vue 项目创建 （使用vue-cli3脚手架）

1.创建项目之前 可以先安装vue-cli3脚手架 npm install -g @vue/cli

安装vue-cli3脚手架

如果不放心 可以vue -V 查看安装是否成功

查看版本

2.创建项目 vue create project（这里我选择的是默认设置，文件也比较简单，一般项目中应该选择manually select features 我在下面的【补充】中有介绍）

创建项目

3.按提示运行项目 npm run serve

项目运行

得到网址

4.在浏览器中打开

在浏览器打开

---

【补充】

• 1、使用视图界面创建项目 vue ui
  
  运行vue ui

浏览器打开

• 2、设置自动打开

  
  
  
  

• 3、这里创建的项目比较简单，很多文件比如像router也没有，这是因为再开始的时候没有选择 manually select features（手动选择功能，我也是呼呼呼的就回车了，哈哈哈，结果忘了选择）

功能选项：按空格键 选中 和 不选中 （试了好一会才发现是这样的啊，哈哈哈）

功能选项

是否设置路由为history模式

这里是询问怎么存放babel,postcss,eslint等的配置文件

是否保存此次配置

---

【全选】

我们再来试试全选的情况
将所有选项都选择上：

1.是否使用class风格的组件语法？

如果选择y，脚手架就会帮我们安装以下组件
vue-class-component
vue-property-decorator

2.是否使用Babel为TypeScript做转义？（如果想使用JavaScript编辑，在安装选项时不要选择TypeScript）

3.这个是是否设置路由为history模式

4.选择一种CSS预处理 （如果安装Sass/Scss，本地需要预先安装python）

5.选择一种TypeScript格式化校验规则

6.选择校验的时机

Lint on save 保存的时候校验
Lint and fix on commit 提交的时候校验

7.选择一种单元测试方案

8.选择一种E2E(端对端)测试方案（只在Chrome浏览器上测试）

9.这里是询问怎么存放babel,postcss,eslint等的配置文件

In dedicated config files 单独存放
In package.json 集成在package.json

10.是否保存为preset（预设项，以后可以使用的,就不用像这样再一步一步来）

11.给预置项起个名字

下次打开的时候就能看到你之前保存的预设项了

下次运行项目时

参考网站https://www.jianshu.com/p/fe331c42570f
https://www.cnblogs.com/adhehe/p/10184851.html

文档地址：https://cli.vuejs.org/zh/guide/cli-service.html