下载安装vue-cli脚手架
VUE CLI3的包名称由
vue-cli改成@vue/cli。如果你已经安装了旧版本的vue-cli(1.x或2.x)，你先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。
cnpm install @vue/cli -g
yarn global add @vue/cli
检查安装
vue -V // 大写 V
image.png
使用命令行来创建
vue create project-vue // project-vue 项目名称
- 我们选择
Manually select feature手动选择功能 - 前面两个是我创建好到预设 第三个是默认的
image.png
- 接下来就选择我们需要的一些功能，这里我就我经常使用的配置
以上下键移动，以空格键进行是否选定- Babel : 将ES6编译成ES5
- TypeScript: javascript类型的超集
- Progressive Web App (PWA) Support: 支持渐进式的网页应用程序
- Router:vue-router
- Vuex: 状态管理
- CSS Pre-processors: CSS预处理
- Linter / Formatter: 开发规范
- Unit Testing: 单元测试
- E2E Testing: 端到端测试
image.png
- 这里他问我们是否使用路由器的历史模式，选择Y
image.png
- 选择css预处理器，我选择Less
image.png
- 这里询问把配置文件放哪，选择放到
poackge.json文件里面
image.png
- 这里就是设置预设了，可以选择将这些配置设置为预设，方便下次快速创建
image.png
- 预设名字
image.png
- 正在安装
image.png
- 安装完执行这两个命令即可
image.png
使用ui可视化界面创建
-
输入
vue ui
image.png -
创建项目
image.png -
输入项目名称，包管理我选择
yarn
image.png -
这可以看到我们之前保存的预设，我们选择手动
image.png -
功能配置还是跟上面一样
image.png -
css预处理器我还是选择Less
image.png -
预设设置
image.png -
等他安装好就行，网不好的话可能需要多安装几次
image.png -
项目安装好了
image.png
