一、创建vue3项目
1.环境配置:
- Node版本需
8.9以上
node -v // 查询Node版本
补充:推荐使用nvm进行管理Node版本(同时安装多个Node版本):nvm安装详细步骤
- vue-cli需
3.0以上版本(已安装旧版1.x/2.x的需先卸载)
vue -V // 查询vue-cli版本
npm uninstall -g vue-cli //卸载旧版vue-cli
npm install -g @vue/cli // 安装vue-cli3/cli4版本(本文选此项)
npm install -g vue-cli // 安装vue-cli2版本
- 其他常用命令:
vue -V // 查询vue-cli脚手架版本
npm list vue // 查询vue版本
npm -V // 查询npm版本
node -v // 查询node版本
nvm ls //查询已安装的node版本,需先安装nvm
2.创建项目
vue create vue3-demo // vue-cli3/cli4版本 (本文选此项)
vue init webpack vue2-demo // vue-cli2版本
- Manually select features 自定义选项:
- 选择你需要的配置项,按上下键滚动,空格键选中当前特性,最后按回车确定:
Babel:转码器,可将ES6代码转为ES5
TypeScript: 支持使用 TypeScript (JavaScript超集)
Progressive Web App (PWA) Support :支持PWA(渐进式Web应用程序)
Router :支持 vue-router (路由)
Vuex :支持 vuex (状态管理器)
CSS Pre-processors: 支持 CSS 预处理器
Linter / Formatter :支持代码风格检查和格式化
Unit Testing:支持单元测试
E2E Testing: 支持 E2E 测试(end to end)
- 选择vue版本:
- 使用用history模式来创建路由(根据自身需要选择):
- 选择CSS预处理器(根据自身需要选择):
- 选择ESlint(我选默认):
- 什么时候检测(我选保存的时候):
- 选择配置文件位置(单独保存在各自的配置文件中or放在package.json中):
- 保存本次配置内容:
3.运行项目(跑它!跑它!)
npm run serve
二、项目基础配置(多页面)
1.初始的项目结构:
2.接口配置:
...待更新,今天先写到这里