【vue create】一.使用vue creat搭建项目

场景：使用vue create脚手架快速搭建vue的项目
前提：需要安装node.js和cnpm以及yarn
并且cnpm需要设置为淘宝镜像，cnpm和yarn安装教程网上很多可以自行搜索

1.使用dos命令安装vue-cli脚手架

//这个是从镜像源下载
cnpm install -g @vue/cli 

查看安装的版本（显示版本号说明安装成功）

vue --version

2.使用vue create命令搭建vue项目

1.cmd窗口跳到需要新建项目的文件夹下，使用vue create

//vuetest是我的项目名
vue create vuetest

2.我这里选择第三个Manually select features自定义选项操作并回车（至于第一个和第二个选项可以快速搭建带eslint和babel的项目）

3.选择配置项
我这里选择了Babel、Router、Vuex、Linter/Formatter三个选项，然后回车
4.选择vue的版本
我这里选择第二个2.X,然后回车

5.选择router的模式
vue-router分为两种模式

hash
history

**hash：**
特征：
1.hash会在浏览器路径里带#号，比如http://locahost:8080/#/index
2.hash在浏览器改变路径触发页面跳转，即前进后退，但不会重新加载页面。
3.hash传参是基于url，如果要传递复杂的参数会有体积的限制


**history**
特征：
1.可以在url放参数，而且也可以将数据存放在一个特定的对象中，其利用HTML5 History inteface中新增的pushState()和replaceState()方法（限制：history只支持IE8以上）

2.需要后台配置支持,前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.test.com/user/id 如果后端缺少对 /user/id 的路由处理，将返回 404 错误。

我这里使用router路由的history模式，输入Y,然后回车（如果使用hash,则输入n）

6.代码语法错误检查
我这里选择ESLint + Standard config，这个是标准的，然后回车

7.选择检查代码语法的时机
我这里选择第一个Lint on save，然后回车
8.第三方配置文件存在的方式
我这里选择第一个In dedicated config files，然后回车

9.是否保存本次配置为预设项目模板
我这里选择N(也可以选择Y，这样下次可以直接使用该配置方案快速搭建项目)，然后回车，则项目搭建成功
10.搭建成功的示例

11.打开项目安装依赖
在终端输入如下代码，安装依赖包

yarn install

13.启动项目
在终端输入如下代码，然后回车启动项目

yarn serve

放在浏览器预览

注意点：
1.我的npm版本是8.5.0 ，node版本是16.14.2 ， yarn版本是1.22.18，
vue-cli版本是5.0.8，cnpm版本是8.2.0