安装Vue Cli4.x 和 Vue Cli2.x_综合

安装 Vue Cli4.x版本

Vue Cli 官方文档

1、卸载以前安装的版本

npm uninstall vue-cli -g
# OR
yarn global remove vue-cli

2、安装Vue Cli4.x

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

3、通过命令行查看版本号

vue --version

重点：通过 Vue Cli4.x 版本创建项目
a、运行以下命令来创建一个新项目

vue create hello-world（项目名称 -> 不能大写和中文）

b、选取配置项
储存（之前创建过可以设置存储）、默认、手动配置
在这里插入图片描述
c、选取手动配置项
上下键控制方向，空格键控制选中状态，a 全选，i 反选

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
( ) 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） 测试

在这里插入图片描述
d、配置路由模式
a、Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（history 地址后面带一个 / # / ，另一个hash 不带 / # / ）
b、Use history mode for router? (Requires proper server setup for index fallback in production)
（路由器使用历史模式？（需要为生产中的索引回退设置正确的服务器））
在这里插入图片描述
e、选用Css预处理器（less、sass）
node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现

f、选用ESlint代码规则验证
插件化的javascript代码检测工具，ESLint + Prettier （规范报错 + 规范管理）
在这里插入图片描述
g、选择代码校验时间（选择保存就检查，不然可能有累计错误）
Lint on save // 保存就检测
Lint and fix on commit // fix和commit时候检查

h、单元测试
Mocha + Chai : mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest : 安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
在这里插入图片描述

i、存放配置项（package.json）
In dedicated config files // 独立文件放置
In package.json // 放package.json里
在这里插入图片描述
j、是否保存手动的配置
可以保存一份常用的配置以后省的选择，减少时间
N 不保存
Y保存，会让你给这套配置输入一个名字

k、自动创建项目
在这里插入图片描述
到此也就可以启动项目，进行征战沙场了。。。

安装 Vue Cli2.x 版本
a、需要拉取旧版本

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

创建项目基本注意点

项目名称
? Project name (vue)
项目描述
? Project description (A Vue.js project)
源码解析准备（第二个更小）
? Vue build- Runtime+Compiler- Runtime Only
是否安装路由
? Install vue-router?
检验你的代码是否符合规范
? Use ESLint to lint your code?
项目单元测试
? Set up unit tests (Y/n)
自动化测试
? Setup e2e tests with Nightwatch?
使用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

最后 Vue Cli2.x 版本的项目也就创建好了，开始大展拳脚吧！！！
本文引用了 https://www.cnblogs.com/sese/p/11712275.html 的部分图片