准备

1. 安装淘宝 npm镜像
   npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 添加系统变量path的内容
   因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。
   cnpm -v
   npm install -g @vue/cli
   查看版本（是否安装成功）：vue -V

   创建一个项目

   vue create project-name
   还原项目 在根目录 cnpm install

Vue CLI v3.5.1
┌───────────────────────────┐
│  Update available: 3.9.3  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)Manually select features

选择第二个

Vue CLI v3.5.1
┌───────────────────────────┐
│  Update available: 3.9.3  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert sele? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert sele? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert sele? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert sele? Check the features needed for your project:(*) Babel
>(*) TypeScript( ) Progressive Web App (PWA) Support(*) Router(*) Vuex(*) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing

这里既然选择了typescript为什么还要用babel，这里是希望使用babel的编译功能，ts生成es6代码，再经过babel编译成es5代码；
选择需要插件 使用空格选择，回车进行下一步

? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? 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): (Use arrow keys)? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass)   //注意选这个 最新版本都用这个实现了，用node-sass容易被墙Sass/SCSS (with node-sass)LessStylus
----------回车--------------
? Pick a linter / formatter config: TSLint
----------回车-----------------
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save( ) Lint and fix on commit? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json（选择把配置文件放在一个文件里）
? Save this as a preset for future projects? (y/N) n等待安装完成�  Generating README.md...�  Successfully created project admin.
�  Get started with the following commands:$ cd admin$ npm run serve结束

VSCode 内置格式化插件导致代码格式化会自动换行问题，解决办法
1、设置
2、搜索 vetur
3、右边三个点按钮，-> open settings.json
添加以下代码：

"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto"},"prettyhtml": {"printWidth": 200,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}}