使用vue-cli安装vue2项目详解（手把手教你安装使用Vue）
使用vue-cli安装vue2项目详解（手把手教你安装使用Vue）vue create 项目名创建项目过程步骤选项说明：npm i -g @vue/cli #自动安装最新版本3.2 创建项目# 步骤1 项目名称 ? Project name vue-cli-2.x # 步骤2 项目描述 ? Project description vue-cli-2.x demo # 步骤3 项目作者 ? Author lanxy # 步骤4 Vue 构建模式 ? Vue build (Use arrow keys) ❯ Runtime Compiler: recommended for most users #根组件中使用 template components Runtime-only: about 6KB lighter min gzip but templates (or any Vue-specific HTML) are ONLY allowed
安装vue脚手架之前，先安装好node环境！！!
以下安装过程中，如果重复安装一直报错，可以尝试使用下面命令清理npm缓存
npm cache verify
npm cache clean --force安装webpack
npm i webpack-cli -g #全局安装 linux和Mac 需要加sudo
webpack-cli -v #安装后 可查看版本Vue CLI 2.x
2.1 安装
npm i vue-cli -g #全局安装 linux和Mac 需要加sudo
vue -V #查看版本号（大写V）
2.2 创建项目
vue init webpack 项目名字
创建项目时一些步骤选项
# 步骤1 项目名称
? Project name vue-cli-2.x
# 步骤2 项目描述
? Project description vue-cli-2.x demo
# 步骤3 项目作者
? Author lanxy
# 步骤4 Vue 构建模式
? Vue build (Use arrow keys)
❯ Runtime Compiler: recommended for most users #根组件中使用 template components
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 #根组件中使用 render (推荐)
# 步骤5 是否安装vue-router
? Install vue-router? Yes
# 步骤6 是否添加ESLint 代码检查工具
? Use ESLint to lint your code? Yes
# 步骤7 选择ESLint 检查模式 （步骤5不选时无步骤6）
? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/standard/standard) #标准配置
Airbnb (https://github.com/airbnb/javascript) #Airbnb配置
none (configure it yourself) #自定义
# 步骤8 设置单元测试
? Set up unit tests No
# 步骤9 e2e测试
? Setup e2e tests with Nightwatch? No
# 步骤10 选择项目的包管理方式 npm /yarn
? Should we run `npm install` for you after the project has been created? (recommended)
❯ Yes use NPM
Yes use Yarn
No I will handle that myself
2.3 启动项目
npm run devVue CLI 3.x/4.x
安装Vue CLI 3.x/4.x 默认会覆盖Vue CLI 2.x的，所以安装时，如果以后不需要使用Vue CLI 2.x 那么需要把2.x版本先卸载掉 如果还想同时使用，则可通过安装CLI的桥接工具来做兼容
npm uninstall vue-cli #卸载Vue CLI 2.x
# 或者安装桥接工具来兼容两者
npm i -g @vue/cli-init #安装桥接工具 （linue和Mac 需要加sudo）
3.1 安装Vue CLI 3.x/4.x （目前最新是4.x)
npm i -g @vue/cli #自动安装最新版本
3.2 创建项目
vue create 项目名
创建项目过程步骤选项说明：
# 步骤1 选择预设配置，还是手动配置
? Please pick a preset:
default (babel eslint) #默认配置
❯ Manually select features #选此项，进行手动配置
# 步骤2 选择添加的配置项（上下键可移动， 空格键选择或者取消选择）下面实心原点表示选中项
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support #渐进式Web应用程序
◉ Router #vue-router（vue路由）
◉ Vuex #vuex（vue的状态管理模式）
◉ css Pre-processors #CSS 预处理器（如：less、Sass）
❯◉ Linter / Formatter #代码风格检查和格式化（如：ESlint）
◯ Unit Testing #单元测试（unit tests）
◯ E2E Testing #e2e（end to end） 测试
# 步骤3 选择是否使用history router：Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) #选n
# 步骤4 选中css预处理器
? Pick a CSS pre-processor (PostCSS Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
❯ Less #vue 一般搭配此项
Stylus
# 步骤5 选择ESLint 的代码检测模式 (步骤2如果没有选Linter / Formatter项，则无步骤5和6)
? Pick a linter / formatter config:
ESLint with error prevention only #只有错误预防
ESLint Airbnb config #Aribnb配置
❯ ESLint Standard config #标准配置
ESLint Prettier #漂亮配置
# 步骤6 ESLint 的检查时机
? Pick additional lint features:
◉ Lint on save #保存时检查
❯◯ Lint and fix on commit #commit时检查
# 步骤7 选择如何存放配置
? Where do you prefer placing config for Babel ESLint etc.?
In dedicated config files #独立的文件放置
❯ In package.json #放到package.json中
# 步骤8 是否保存本次配置（保存之后在下次创建项目时即可选择预设置项）
? Save this as a preset for future projects? (y/N)
# 如果选择了yes 最后会提示输入保存的名称，输入回车即可
3.3 启动项目
npm run serveVUE 项目管理器
在使用Vue CLI 3.x以上时，可以通过命令 `vue ui` 进行启动Vue项目管理器。这样就可以通过项目管理器进行管理项目（例如创建、运行、打包等等操作）
