vue-cli 安装和使用

一、vue-cli 安装和使用

1.1 安装

npm安装参考：官方安装地址

# 安装最新版本
npm install -g @vue/cli
# 查看安装的版本
vue --version
# 升级到最新版本
npm update -g @vue/cli

1.2 使用

• step1 这一步选择手动设置配置

# 创建名为 demo 的 vue-cli 项目
PS F:\Vue> vue create demo 
Vue CLI v4.5.14
? Please pick a preset: (Use arrow keys)
# 之前保存的自动设置 （后期项目中使用，熟练后）
> demo ([Vue 3] less, babel, router, vuex, eslint) 
# Vue 2 的默认设置（Vue2的项目会选择）
  Default ([Vue 2] babel, eslint)
# vue3 默认的 vue3的默认设置（学习使用）
  Default (Vue 3) ([Vue 3] babel, eslint)
# 手动自定义设置 （后期项目中使用）
  Manually select features

说明：demo是通过手动自定义设置后保存作为后面来使用的模板，与Vue2和Vue3的默认配置类似，选中后则不在今后之后的步骤。

• step2 勾选如下配置

Vue CLI v4.5.14
? 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)
# 空格取消或者选择，enter确认进入下一步（操作不可返回）
>(*) Choose Vue version # 后续选择Vue版本（必选）
 (*) Babel # 
 ( ) TypeScript # 微软js进阶版
 ( ) Progressive Web App (PWA) Support # App支持的
 (*) Router # 路由
 (*) Vuex # 状态管理
 (*) CSS Pre-processors # less 和 sass 转为 css
 (*) Linter / Formatter # 检查语法规范
 ( ) Unit Testing # 单元测试
 ( ) E2E Testing # 端对端测试

• step3 使用Vue3

Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 
  2.x
> 3.x # 选择此处为 vue3.x 版本

• step4 是否使用历史路由

Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
# 是否使用历史路由
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y# y使用

• step5 选中 css 转换的形式

Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? 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) # 任选其一
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

• step6 选择按照哪种语法规范检查错误

Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? 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: (Use arrow keys) # 选取语法检查规范，默认即可
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

• step7 勾选自动修复

Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? 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: Basic
? Pick additional lint features: 
 (*) Lint on save # 手动修复
>(*) Lint and fix on commit     # 自动修复（一般都要勾选）

• step8 选择分离与否

Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? 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: Basic
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? 
> In dedicated config files # 分离的配置（大项目）
  In package.json # 一个文件中（小项目）

• step9 是否保存为项目模板

Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? 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: Basic
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
# 作为之后的项目模板来保存吗？是y，反之
? Save this as a preset for future projects? (y/N) 

到此，设置完成，等待一会就可创建好我们的vuecli项目了。

二、vue-cli 项目主要目录说明

• 项目运行与打包

### Compiles and hot-reloads for development 运行
npm run serve
### Compiles and minifies for production 打包
npm run build

• 打包后结果
  

三、Ubuntu 中 vue-cli 安装和使用

• node与npm安装方法链接

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install nodejs
sudo apt-get install -y nodejs

# 查看版本
forget@ubuntu:~$ node -v
v16.13.0
forget@ubuntu:~$ npm -v
8.1.0

• 安装 vue cli

# 安装cnpm
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装vue-cli
sudo npm install -g @vue/cli
# 查看vue版本