vue-cli3.x 安装

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它

可以在命令行中访问 vue 命令来验证它是否安装成功

vue -V  

用这个命令来检查其版本是否正确 (3.x)：

vue --version

查看其他命令可以使用

vue -h

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service  // 创建一个由vue-cli-service 支持的新项目
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project   // 在已有的项目中添加插件
  invoke [options] <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文件）
  ui [options]                               start and open the vue-cli ui  // vue3.0提供的一个UI 
  init [options] <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>
  config [options] [value]                   inspect and modify the config // 项目配置文件
  upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor) // 更新插件或者配置文件
  info                                       print debugging information about your environment  // 打印出来vue配置文件

  Run vue <command> --help for detailed usage of given command.

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目：

vue create 项目名称(必须小写)

# OR vue ui

两种选择方式，第一种是默认的(一路回车)，第二种手动配置

Vue CLI v3.3.0
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

手动配置(选择需要的模块，上下移动，空格进行确定)

Vue CLI v3.3.0? 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  //es6转换器
 ( ) TypeScript //使用js的超类语言TypeScript
 ( ) Progressive Web App (PWA) Support //PWA单页应用 
 ( ) Router  //使用路由
 ( ) Vuex  //使用vue状态管理器
 ( ) CSS Pre-processors //css预处理,如less,sass等
 (*) Linter / Formatter //Eslint安装
 ( ) Unit Testing //Unit单元测试
 ( ) E2E Testing //E2E单元测试 

选择需要的模块

Vue CLI v3.3.0
? Please pick a preset: Manually select features
? 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

模块安装询问

Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

选择Y接下步骤

Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes //是否使用history模式,这里选的是Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less //选择css预处理器,这里选的Less
? Pick a linter / formatter config: Prettier //选择Linter / Formatter规范类型
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 保存并且检测 (一般选择这个)
 ( ) Lint and fix on commit // fix和commit检查

选择了router，Less，ESlint—Prettier作为代码检查

Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? 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): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files  // 独立文件夹
  In package.json  // 放入package.json里 (一般选择这个)

babel .eslint这些文件放在独立的文件里还是package.json里

Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? 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): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? 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 //是否记录下，以便下次继续使用这套配置

选择N不记录

安装后移动到目录并启动

 cd 项目名称  // 进入项目目录 
 npm run serve  //运行项目

查看下目录结构