1.安装vue的脚手架环境
可以参考我上篇的安装步骤，如何安装vue脚手架
2.项目的创建
vue create ceshi
回车后出现如下图：
一开始你们肯定是没有第一个vue2这个的，这是创建项目后可以选择保存常用的创建项目配置，如果保存了就会在这里显示出来。
Default ([Vue 2] babel, eslint) //创建一个vue2的项目
Default (Vue 3 Preview) ([Vue 3] babel, eslint) //创建一个vue3的项目
Manually select features //手动选择功能
我们一般不使用前面的默认两个，这里我们选择手动选择,会出现如下图：
下表是分别对应的功能：
| 序号 | 选项 | 描述 | 选择 |
|---|---|---|---|
| 1 | Choose Vue version | 选择Vue版本 | Y |
| 2 | Babel | vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5 | Y |
| 3 | TypeScript | TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源 | |
| 4 | Progressive Web App (PWA) Support | 渐进式Web应用程序（PWA）支持 | |
| 5 | Router | 路由 | |
| 6 | Vuex | Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 | |
| 7 | CSS Pre-processors | CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。 | |
| 8 | Linter / Formatter | 格式化程序 | Y |
| 9 | Unit Testing | 单元测试 | |
| 10 | E2E Testing | 端到端（end-to-end） |
需要什么我们就可以选择什么，一般来说router是必须的，CSS预处理器可以选择Less,Sass、Stylus等预处理器。
通过上下去选择需要的功能，按空格确认，按回车是直接进入下一步
- 如果你需要创建vue3的项目就选3.x，如果需要vue2的项目就选2.x
- 是否需要使用history模式创建路由
hash模式和history模式的区别
最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的
对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
为了达到这一目的，浏览器当前提供了以下两种支持：
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由.
-
选择：编码规则
image.png
- ESLint with error prevention only
只配置使用 ESLint 官网的推荐规则- ESLint + Airbnb config
使用 ESLint 官网推荐的规则 + Airbnb 的配置
的规则- ESLint + Standard config
使用 ESLint 官网推荐的规则 + Standard 的规则 我们一般选择这个- ESLint + Prettier
使用 ESLint 官网推荐的规则 +Prettier 的配置 Prettier 主要是做风格统一。代码格式化工具
-
我们默认选第一个
image.png -
您希望在哪里放置Babel，ESLint等的配置？我们默认第一个
image.png -
选择是否保存现在创建的配置，如果选择了就会出现我一开始的那个选项
image.png
项目即可创建成功
默认目录结构
如果觉得上面的代码创建过于麻烦，我们可以选择vue自带的图形化界面来创建一个项目，会相对简单一点。
我们输入vue ui 进入图形化界面
vue ui
即可跳转到图形化界面
点击左下角的小房子图标可以选择打开之前创建的项目或者是创建新的项目
因为操作不难就不演示了。至此，项目创建完毕。
进入创建的项目路径后输入 npm run serve或者yarn serve即可启动项目
//使用npm启动项目
npm run serve
//或者使用yarn启动项目
yarn serve
