一小时精通Vue

开发工具

推荐使用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/[email protected]

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改为正式环节后端的地址