1.创建项目之前 可以先安装vue-cli3脚手架
npm install -g @vue/cli
如果不放心 可以
vue -V
查看安装是否成功
2.创建项目
vue create project
(这里我选择的是默认设置,文件也比较简单,一般项目中应该选择manually select features 我在下面的【补充】中有介绍)
3.按提示运行项目
npm run serve
4.在浏览器中打开
【补充】
-
2、设置自动打开
-
3、这里创建的项目比较简单,很多文件比如像
router
也没有,这是因为再开始的时候没有选择
manually select features
(手动选择功能,我也是呼呼呼的就回车了,哈哈哈,结果忘了选择)
功能选项:按空格键 选中 和 不选中 (试了好一会才发现是这样的啊,哈哈哈)
这里是询问怎么存放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