1.安装vue的脚手架环境

可以参考我上篇的安装步骤，如何安装vue脚手架

2.项目的创建

vue create ceshi

image.png

回车后出现如下图：

image.png

一开始你们肯定是没有第一个vue2这个的，这是创建项目后可以选择保存常用的创建项目配置，如果保存了就会在这里显示出来。

Default ([Vue 2] babel, eslint)  //创建一个vue2的项目
Default (Vue 3 Preview) ([Vue 3] babel, eslint)  //创建一个vue3的项目
Manually select features  //手动选择功能

我们一般不使用前面的默认两个，这里我们选择手动选择,会出现如下图：

image.png

下表是分别对应的功能：

需要什么我们就可以选择什么，一般来说router是必须的，CSS预处理器可以选择Less,Sass、Stylus等预处理器。

通过上下去选择需要的功能，按空格确认，按回车是直接进入下一步

• 如果你需要创建vue3的项目就选3.x，如果需要vue2的项目就选2.x

image.png

• 是否需要使用history模式创建路由

image.png

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

项目即可创建成功

image.png

默认目录结构

image.png

如果觉得上面的代码创建过于麻烦，我们可以选择vue自带的图形化界面来创建一个项目，会相对简单一点。
我们输入vue ui 进入图形化界面

vue ui

image.png

即可跳转到图形化界面

image.png

点击左下角的小房子图标可以选择打开之前创建的项目或者是创建新的项目

image.png

因为操作不难就不演示了。至此，项目创建完毕。
进入创建的项目路径后输入 npm run serve或者yarn serve即可启动项目

//使用npm启动项目 
npm run serve

//或者使用yarn启动项目
yarn serve

image.png