开发工具
推荐使用WebStorm
https://www.jetbrains.com/zh-cn/webstorm/features/
命令行工具
cmder
https://cmder.net/
git管理工具
https://www.sourcetreeapp.com/
一.环境搭建
1.安装node.js
https://nodejs.org/zh-cn/
2.切换npm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.vue-cli脚手架
npm install -g @vue/cli //如果安装较慢 可以使用 cnpm i -g @vue/cli@3.3.0
npm uninstall vue-cli -g //如果原来安装过vue-cli2先执行此命令
4.创建项目
a. 命令行创建
vue create 项目名称
b. 进入可视化页面进行项目搭建
vue ui
5.启动项目
npm run serve
二.项目模块封装
1.项目结构模块
image.png
三.debug模式下如何请求接口
浏览器的同源策略
请求的URL地址与当前地址栏中的URL地址协议不同、域名不同、端口不同时，都成为跨域
四.前端token生命周期
axios请求拦截器和响应拦截器
/util/request.js
config.headers[tokenName] = 'Bearer ' + token
五.路由
目前采用后端控制路由模式
1.路由配置
2.不需要token校验路由配置
3.路由导航守卫 vab/plugins/premissions.js
vuex
state：相当于Vue的data
mutations：类似于事件，每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler) 通过 this.$store.commit 同步
actions: Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态 通过 this.$store.dispatch 异步
getters：可以认为是 store 的计算属性，
六.发布
1.代码build
npm run build
2.反向代理
web.config中url改为正式环节后端的地址
