Vue-cli2.x/3.x/4.x不同版本安装过程

Vue基础环境

Node.js ( v10以上 )

npm

yarn

安装 Vue-cli 2.x/3.x 版本

#安装 2.x / 3.x 版本 :
npm install vue-cli -g

yarn global add vue-cli

vue list

#卸载 2.x / 3.x 版本 : 
npm uninstall vue-cli -g

#检查安装版本 : 
vue --version

npm : 指明使用 node.js 命令

install : 安装

vue-cli : 要安装的工具

–global : 全局安装

创建项目（基于 webpack 模板） :

D:\text>vue init webpack text-2.9.6

? Project name (text-2.9.6)
#项目名称

vue init webpack text2.9.6

vue init 模板名 项目名

? Project description (A Vue.js project)
#项目描述

? Author (xxx(xxx.@com))
#作者

? Vue build (Use arrow keys)
#Vue 构建(使用方向键 )
  Runtime + Compiler: recommended for most users
  #运行时编译器 + : 推荐给大多数用户
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
  #仅供运行时使用: gzip 最小值约为 6KB ，但模板(或任何特定于 vue的 HTML)只允许在 .vue 文件中使用 - 在其他地方需要渲染函数

? Install vue-router? (Y/n)
#安装 vue-router?
yes

? Use ESLint to lint your code? (Y/n)
#使用 ESLint 来检查你的代码?
yes

? Pick an ESLint preset (Use arrow keys)
#选择一个 ESLint 预设 ( 使用方向键 )
   Standard (https://github.com/standard/standard)
   #标准
   Airbnb (https://github.com/airbnb/javascript)
   none (configure it yourself)
  #没有 (自己配置 )

? Set up unit tests (Y/n)
#设置单元测试
no

? Setup e2e tests with Nightwatch? (Y/n)
#使用 Nightwatch 设置端到端加密测试 ?

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
#我们应该在项目创建后为你运行 npm install 吗?( 推荐 ) ( 使用方向键 )
  Yes, use NPM
  #使用 NPM
  Yes, use Yarn
  #使用 Yarn
  No, I will handle that myself
  #自己处理

To get started:

开始:

D:\text>

D:\text>cd tetx

D:\text\text>npm run dev

Your application is running here: http://localhost:8080

安装 Vue-cli 4.x 版本

官网指南 :Vue - cli( 4.x )**

基于 webpack 构建，并带有合理的默认配置 .

( 如果已经安装了 2.x 或 3.x 版本 , 再安装 4.x 版本时出现报错 , 建议卸载掉其他版本后重新安装 4.x 版本 )

报错相关信息 :

 npm ERR! code EEXIST
    # npm 错误!代码 EEXIST
    
    npm ERR! path C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
    #路径
    
    npm ERR! dest C:\Users\AppData\Roaming\npm\vue
    
    npm ERR! EEXIST: file already exists, cmd shim 'C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js' -> 'C:\Users\AppData\Roaming\npm\vue'
    # 文件已经存在
    
    npm ERR! File exists: C:\Users\AppData\Roaming\npm\vue
    # 文件是否存在 :
    
    npm ERR! Remove the existing file and try again, or run npm
    #删除现有文件并重试，或运行 npm
    
    npm ERR! with --force to overwrite files recklessly.
    #使用 ——强制鲁莽地覆盖文件。
    
    npm ERR! A complete log of this run can be found in:
    #完整的运行日志可以在:
    npm ERR!     C:\Users\AppData\Roaming\npm-cache\_logs\2021-07-25T02_38_52_168Z-debug.log

安装4.x版本

#安装
npm install -g @vue/cli

yarn global add @vue/cli

#卸载 :
npm uninstall -g @vue/cli

yarn global remove @vue/cli

#升级 :
npm update -g @vue/cli

yarn global upgrade --latest @vue/cli

#检查安装版本 : 
vue --version
# 4.5.13

安装一个全局的扩展 :

npm install -g @vue/cli-service-global

创建项目 :

vue create app
#(app为文件名)

Vue CLI v4.5.13
? Please pick a preset:(Use arrow keys)
  #请选择预设:(用箭头键 )
  Default ([Vue 2] babel, eslint)
  #默认([视图 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  #默认(视图3)([视图3] babel, eslint)
  Manually select features
  #手动选择功能

Vue CLI v4.5.13
? 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)
#检查项目所需的特性: (按 <空格>选择，按 <a>切换所有选项，按 <i>反转选择 )
 (*) Choose Vue version
 #选择 Vue版本
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 #渐进的 Web应用程序 (PWA) 支持
 (*) Router
 #路由器
 (*) Vuex
 (*) CSS Pre-processors
 #CSS预处理程序
 (*) Linter / Formatter
 ( ) Unit Testing
 #单元测试
 ( ) E2E Testing
 #E2E测试

Vue CLI v4.5.13
? Please pick a preset: Manually select features
#请选择预设:手动选择功能
? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors, Linter
#检查您的项目所需的功能:选择 Vue 版本， Babel ，路由器，CSS预处理器， Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
#选择要启动项目的 Vue.js 版本(使用方向键)
  2.x
  3.x

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
#路由器使用历史模式?(生产中索引回退需要正确的服务器设置)

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
#选择一个CSS预处理程序(默认支持 PostCSS, Autoprefixer 和 CSS 模块):( 使用方向键)
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

? Pick a linter / formatter config: (Use arrow keys)
#选择一个linter / formatter 配置:(使用方向键)
  ESLint with error prevention only
  #只有错误预防的 ESLint
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
#选择附加的 lint功能:( 按<space>选择，<a>切换所有，<i>反转选择 )
 ( ) Lint on save
 ( ) Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? 
#你倾向于把 Babel, ESLint 等的配置放在哪里?
In dedicated config files
#在专用配置文件中
In package.json
#在package.json

? Save this as a preset for future projects? 
#将其保存为未来项目的预设?
Yes
No

? Save preset as:
#保存预设为: (填写预设名字)

Get started with the following commands:

开始使用以下命令 :

D:\text>cd app

D:\text\app>npm run serve

 App running at:
  - Local:   http://localhost:8080/
  - Network: http://xxx.xxx.xxx.xxx:8080/

    
    Note that the development build is not optimized.
    #注意，开发构建没有优化。
    To create a production build, run npm run build.
    #要创建一个生产构建，请运行 npm run build。

2.x/3.x版本与4.x版本区别