一、vue-环境配置

脚手架版本
- 保证 vue-cli 的版本在 4.5.13 以上
  - vue -V 查看
- 如不满足请升级
  - npm update -g @vue/cli
vue版本
- @vue/cli-v4.5.13 该版本创建的项目，vue的版本为 v3.0.0
- 如果想使用最新的 script setup 语法，该语法在 v3.0.0 版本中是不支持的。
  - 升级到 vue@3.2.8 以上 vue-router@4.0.11 vuex@4.0.2
  - 命令：npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2

完整的项目创建步骤

shell

// 利用 vue-cli 
创建项目 vue create 项目名称 
// 进入模板选择
Vue CLI v4.5.13
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features // 选择手动配置

// ----------------------------------------------------------
? Check the features needed for your project: (*) Choose Vue version // 选择 vue 版本
(*) Babel // 使用 babel
( ) TypeScript // 不使用 ts
( ) Progressive Web App (PWA) Support // 不使用 PWA 
(*) Router // 添加 vue-router
(*) Vuex // 添加 vuex
> (*) CSS Pre-processors // 使用 css 预处理器 (*) Linter / Formatter // 代码格式化
( ) Unit Testing // 不配置测试
( ) E2E Testing // // 不配置测试

// ----------------------------------------------------------
Choose a version of Vue.js that you want to start the project with 
2.x
> 3.x//选择 vue3.0版本

// ----------------------------------------------------------
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 不使用 history模式 的路由 

// ----------------------------------------------------------
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
> Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
Sass/SCSS (with node-sass)
Less
Stylus

// ----------------------------------------------------------
? Pick a linter / formatter config: 
ESLint with error prevention only 
ESLint + Airbnb config
> ESLint + Standard config // 使用 ESLint 标准代码格式化方案 
ESLint + Prettier

// ----------------------------------------------------------
? Pick additional lint features: 
(*) Lint on save //
>(*) Lint and fix on commit // 保存时 && 提交时，都进行 lint

// ----------------------------------------------------------
? Where do you prefer placing config for Babel, ESLint, etc.?  (Use arrow keys)
> In dedicated config files // 单独的配置文件
In package.json

// ----------------------------------------------------------
Save this as a preset for future projects? (y/N) n // 不存储预设 

等待片刻之后，项目就会生成成功。 生成之后，可以通过以下两个指令来运行你的项目:
cd 项目目录
npm run serve
执行成功之后，项目即可运行!

一、vue-环境配置 ​

一、vue-环境配置