Wang's blog Wang's blog
首页
  • 前端文章

    • HTML教程
    • CSS
    • JavaScript
  • 前端框架

    • Vue
    • React
    • VuePress
    • Electron
  • 后端技术

    • Npm
    • Node
    • TypeScript
  • 编程规范

    • 规范
  • 我的笔记
  • Git
  • GitHub
  • VSCode
  • Mac工具
  • 数据库
  • Google
  • 服务器
  • Python爬虫
  • 前端教程
更多
收藏
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Wang Mings

跟随大神,成为大神!
首页
  • 前端文章

    • HTML教程
    • CSS
    • JavaScript
  • 前端框架

    • Vue
    • React
    • VuePress
    • Electron
  • 后端技术

    • Npm
    • Node
    • TypeScript
  • 编程规范

    • 规范
  • 我的笔记
  • Git
  • GitHub
  • VSCode
  • Mac工具
  • 数据库
  • Google
  • 服务器
  • Python爬虫
  • 前端教程
更多
收藏
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • CSS

  • Npm

  • Vue

    • Vue简介
      • Vue3简介
      • 安装Vue CLI
      • 升级Vue CLI
      • 创建Vite构建的Vue3的项目
      • 创建CLI构建的Vue3的项目
      • WebStorm配置Vite构建工具运行环境
      • 关闭vue3的语法检查
    • 路由守卫
    • tsvue的写法
    • Vue常用技巧
    • vue的JSX写法
    • vue防抖组件
    • 动态热更新设置
    • keepActive缓存路由
    • 自动生成面包屑VUE组件
    • vue生命周期对比生命周期
    • eslint编译时警告或错误配置
    • Vue中封装axios的取消请求事情
    • vue+element递归生成无限菜单组件
    • Vue框架dist目录下各个文件的区别
    • 超详细Vue的种和Vue的种组件间通信方式
    • Vue项目中出现Loadingchunk{n}failed问题的解决方法
    • Vuex

    • 其他

    • 基础

    • 工具

    • 组件

    • 规模化

    • 过渡&动画

    • 可复用性&组合

  • HTML

  • Node

  • Yaml

  • React

  • 框架

  • 规范

  • Electron

  • JS演示

  • VuePress

  • JavaScript

  • TypeScript

  • 微信小程序

  • TypeScript-axios

  • 前端
  • Vue
wangmings
2022-07-19
目录

Vue简介

# Vue3简介

Vue(读音 /vjuː/,类似于view``) 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用(SPA)`提供驱动。

# 安装Vue CLI

Vue CLI的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x或2.x),你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。

npm install -g @vue/cli
# OR
yarn global add @vue/cli
1
2
3

# 升级Vue CLI

仅仅针对vue3.0

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
1
2
3

# 创建Vite构建的Vue3的项目

  1. 使用Vite初始化项目

    # 创建vite构建的项目,<project-name>替换为项目名称
    npm init vite@latest <project-name> -- --template vue
    
    1
    2
  2. 进入项目文件夹中,假设当前项目名称为test

    cd test
    
    1
  3. 安装npm

    npm install
    
    1
  4. 调试/运行

    npm run dev
    
    1

# 创建CLI构建的Vue3的项目

  1. 使用CLI初始化项目

    # test为项目名称,请自行替换
    vue create test
    
    1
    2
  2. 进入项目文件夹中,假定项目名称为test

    cd test
    
    1
  3. 运行

    npm run serve
    
    1

# WebStorm配置Vite构建工具运行环境

  1. 添加npm运行环境

    shadow

  2. 添加运行命令

    shadow

# 关闭vue3的语法检查

  1. Vue-CLI

    在项目的根目录下添加/找到vue.config.js文件

    module.exports = {
        lintOnSave:false, //关闭语法检查
    }
    
    1
    2
    3
  2. Vite

    在项目根目录下找到vite.config.js文件

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue()],
      lintOnSave:false, //添加关闭语法检查
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
编辑 (opens new window)
前端移动端和PC端自适应解决方案,支持vite打包配置
路由守卫

← 前端移动端和PC端自适应解决方案,支持vite打包配置 路由守卫→

最近更新
01
theme-vdoing-blog博客静态编译问题
09-16
02
搜索引擎
07-19
03
友情链接
07-19
更多文章>
Theme by Vdoing | Copyright © 2019-2022 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式