Vue_CLI安装及项目搭建

通过Vue-CLI搭建Vue项目的操作流程。

Vue-CLI (Command Line Interface)

安装

npm install -g @vue/cli

检查版本

vue --version

创建项目

vue create <Project Name>

创建过程配置

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

选择Vue 3项目，默认自带babel和eslint

babel：将ES6语法转换为ES5语法

eslint：检查语法，修复不规范代码

若选择第三项手动配置

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel # 将ES6语法转换为ES5语法
 ( ) TypeScript # JS的超集
 ( ) Progressive Web App (PWA) Support # App支持
 (*) Router # 路由
 (*) Vuex # 状态管理
 (*) CSS Pre-processors # sass，less转css
 (*) Linter / Formatter # 检查语法规范
 ( ) Unit Testing # 单元测试
 ( ) E2E Testing # 端对端测试

路由是否使用历史模式，选择Y

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

处理Sass还是Less，根据需求选择即可

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

选择eslint标准，选择Airbnb

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

保存时修复与提交git时修复，可全选

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

各插件的配置文件独立还是全部放入package.json

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

是否为下次手动配置记录此次选择

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

项目名称

? Save preset as:

基本操作

build

npm run build

运行

npm run serve