Vue-cli 3.0 构建项目

1. 环境配置

• 安装 Vue-cli 3.0 脚手架工具
• 终端输入运行

npm install -g @vue/cli

• 安装完成后，输入 vue -V 查看是否安装成功

C:\Users\Administrator> vue -V
3.9.1

• 新的命令语句

Commands:
    create [options] <app-name>      create a new project powered by vue-cli-service // 创建一个由vue-cli-service支持的新项目
    add <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project // 在已创建的项目中添加插件
    invoke <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project // 在开发者模式下以零配置运行一个js或vue文件
    inspect [options] [paths...]     inspect the webpack config in a project with vue-cli-service // 在vue-cli-service的项目中检查webpack配置
    serve [options] [entry]          serve a .js or .vue file in development mode with zero config // 简单理解为开发环境下启动命令
    build [options] [entry]          build a .js or .vue file in production mode with zero config // 在生产模式下以零配置构建一个js或vue文件
    init <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init) // 旧api 需要@vue/cli-init // 就是原来的vue-cli init <template> <app-name>

2. 初始化项目

• 终端输入运行

vue create <projectName>

• 这时你可以选择配置

Vue CLI v3.0.0-rc.3
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)     //默认配置
  Manually select features    //自定义配置

默认配置

选择 默认 将直接开始安装 

自定义配置

• 选择 [自定义] ，方向键上下移动，空格选中，Enter确定

? 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)
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*)Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

自定义细节配置

• 是否使用class风格的组件语法

? Use Babel  alongside TypeScript for auto-detected polyfills? (Y/n) 

• 是否使用babel做转义

? Use class-style component syntax? Yes

• 选择CSS预处理类型

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
  LESS
  Stylus

• 选择语法检测规范

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

• 选择 保存时检查 / 提交时检查

? Pick additional lint features: 
>( ) Lint on save               // 保存就检测
 ( ) Lint and fix on commit     // fix和commit时候检查

• 选择配置信息存放位置，单独存放或者并入package.json

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

• 是否保存当前预设，下次构建无需再次配置

? Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置

• 完成安装 ，启动项目

npm run serve //运行项目