安装vue3.0脚手架

1、安装vue-cli 3.0

先卸载旧版本

npm uninstall vue-cli -g

安装3.0脚手架

npm install -g @vue/cli
# or
yarn global add @vue/cli

安装成功查看版本 vue-V
如果出现安装失败或者提示errno 4048，是权限问题，使用管理员身份执行，记得重复2，3两步（多试几遍就好了）

vue3.0脚手架搭建

1、安装vue-cli 3.0

先卸载旧版本

npm uninstall vue-cli -g

安装3.0脚手架

npm install -g @vue/cli
# or
yarn global add @vue/cli

安装成功查看版本 vue-V
如果出现安装失败或者提示errno 4048，是权限问题，使用管理员身份执行，记得重复2，3两步（多试几遍就好了）

2.创建项目

1）去你想要指定目录下创建项目
test：项目名称

vue create health

2）项目配置：我选择自定义配置

3）接下来就是选择我们所需的选项来生成项目，使用 空格键 选中

? Check the features needed for your project:
 (*) Choose Vue version                       //选择版本3.x还是2.x
 (*) Babel                                    // javascript转译器
 (*) TypeScript                               // 使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support        // 渐进式WEB应用
 (*) Router                                   // 使用vue-router
 (*) Vuex                                     // 使用vuex
 (*) CSS Pre-processors                       // 使用css预处理器
>(*) Linter / Formatter                       // 代码规范标准
 ( ) Unit Testing                             // 单元测试
 ( ) E2E Testing                              // e2e测试

4）选择版本 3.x的

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x

5）是否使用Class风格装饰器？

即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

? Use class-style component syntax? (y/N) y

6）使用Babel与TypeScript一起用于自动检测的填充 ?

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y

7）路由模式

 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

8）我选择 Sass/SCSS (with dart-sass)

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass) // 保存后编译
  Sass/SCSS (with node-sass) // 实时编译 
  Less
  Stylus

9）选择 代码格式化检测 因为是用typescript 所以选择 TSLint

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only // 只进行报错提醒
  ESLint + Airbnb config // 不严谨模式
  ESLint + Standard config // 正常模式
  ESLint + Prettier  // 严格模式
  TSLint (deprecated)  // typescript格式验证工具

10）代码检查方式 保存检查

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save //保存就检测
 ( ) Lint and fix on commit //fix和commit就检测

11） 文件配置，我选择配置在独立的文件中

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files  //独立文件存放
  In package.json //放到package里面

12）保存上述配置，保存后下一次可直接根据上述配置生成项目，这里我就不保存了，有需要的同学可自行保存

? Save this as a preset for future projects? (y/N) N

完整的配置

Vue CLI v4.5.13
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

OK，等待项目加载各种包…

报错了

Error: Cannot find module 'vue-template-compiler'

解决办法

cd health

npm install vue-template-compiler

npm run serve

这时我们的项目就已经生成并启动完成；默认是localhost:8080

看下项目目录结构