Vue从入门到实战：创建脚手架项目

创建脚手架项目一般有两种方式，

通过vue create 命令行创建；通过vue ui命令启动图形界面来创建。

vue create

创建项目

选择好目录，打开CMD窗口

输入vue create helloworld

项目配置

进入如下配置，选择第三项（Manually select features）：

Vue CLI v4.5.11
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features                                                                                                                           

保持默认的Babel和Linter/Formatter的选中状态，按Enter键，接下来会根据你选择的功能提示选择具体的功能包，或者进一步配置。

Vue CLI v4.5.11
? 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 selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing  

解释一下，Babel：转码器，Linter/Formatter：代码风格检查和格式校验。

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview) 

选择代码规范，暂时选择第1个选项：

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier  

选择何时检测代码，选择第1项：保存时检测。

 Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit     

选择配置信息存放的地点：是专门的配置文件，还是存在package.json ，这里选择第1项：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json    

是否保存此次配置，选择y，以后再用vue create 创建项目时，就用该配置

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

之后输入本次配置的名称。

运行项目

项目创建完成后，

在命令提示符依次输入cd helloworld 和npm run serve 运行项目

浏览器输入http://localhost:8080/

如果中止项目运行，在CMD窗口按Ctrl+C组合键即可。

删除配置（可选）

如果要删除自定义的配置，在操作系统用户目录下找到.vuerc文件，删除里面的配置即可

{
  "useTaobaoRegistry": true,
  "presets": {
    "hello": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "vueVersion": "2"
    }
  }
}

使用图形界面

在命令提示符输入vue ui命令即可。