vue2.0 创建项目

准备

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)
  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 内置格式化插件导致代码格式化会自动换行问题，解决办法

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