vue2.0 create project

ready

1. Taobao mirror mounting npm
   npm CNPM --registry the install -g = https://registry.npm.taobao.org

2. Add the contents of system variables path
   because cnpm will be installed to D: \ Program Files \ nodejs \ under node_global, and the system variable path does not include the path. Add the path in the system variable path normal use cnpm.
   -v CNPM
   npm install -g @ VUE / cli
   view the version (if the installation was successful): vue -V

   Creating a project

   vue create project-name
   reduction project in the root directory 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

Select the second

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

Here since the choice of typescript why use babel, babel here is to use the compilation, ts es6 generate the code, and then through the babel compiled into es5 Code;
select the desired plug-in uses a space Select, Enter the next step

? 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)
  Less
  Stylus
----------回车--------------
? 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 built-format plug-in code formatting will lead to wrap the problem, the solution
1, set
2, search vetur
3, three dots to the right of the button, -> open settings.json
add the following code:

"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
        }
    }