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

# 升级Vue CLI

仅仅针对vue3.0

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

# 创建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运行环境

   

2. 添加运行命令

   

# 关闭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