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