网摘：https://blog.csdn.net/WaterSprite_ct/article/details/79728314
一、通过命令行工具安装vue（npm install webpack vue-project）
image
build -- 项目构建的相关代码
config -- 配置目录，包括端口、环境等的配置
-
src -- 开发的主要目录
-- asset : 放置一些图片 -- components ：主要放置一些常用的组件文件 -- App.vue：项目的入口文件(顶层父组件) -- main.js：项目的核心文件(vue的实例初始化) -- page：新建一个目录，主要存放页面 README.md：markdown的说明文档
package.json：npm的配置文件
二、vue-router
vue-router是vue的核心插件，使用vue-router，我们可以将组件映射到路由，然后告诉vue-router在哪里渲染它们
- 安装
import VueRouter from 'vue-router'
Vue.use(VueRouter)
- Router常用的配置属性
- routes: 配置路由的属性
- mode：设置配置路由的模式(默认'hash'[浏览器环境]) -- 'abstract'[node.js环境] -- 'history'[HTML5 History API]
- scrollBehavior：滚动行为的配置(在按下后退/前进按钮，项浏览器的原生那样)
- 数据获取：完成导航(路由)再获取数据 、导航完成前回去(路由进入的守卫中获取数据【路由改变前，组件就渲染完成】)
- 具体的api见 https://router.vuejs.org/zh-cn/
三、生命周期的理解
- beforeCreate：创建前的状态(创建实例前，vue实例的属性值为undefined)
- created：实例创建完成后(data被定义了，但el属性为undefined)
- beforeMount：挂钩前(DOM渲染前)，el属性已经拿到对应的DOM元素
- mounted：挂载结束后(Dom渲染完成后，el属性的Dom的数据将被渲染)
- beforeUpdate：数据变化前的调用
- updated：数据变化后的钩子
- beforeDestroy：销毁前状态
- destroy：销毁完成
四、ajax请求(后台数据交互) -- axios
1. 配置编译环境和线上环境的切换(env.js)
1. let baseUrl = '';
2. let routerMode = 'hash'; /*vue-router的路由模式 --- 所有浏览器支持*/
4. if (process.env.NODE_ENV == 'development') {
6. }else if(process.env.NODE_ENV == 'production'){
7. baseUrl = 'http://www.xxx.com:8001';
8. }
9. /*暴露出去*/
10. export {
11. baseUrl,
12. routerMode
13. }
- 拦截器(fetch.js)
axios模块下：
1. /*
2. * 拦截器的配置
3. *
4. * */
5. import axios from 'axios';
6. import { baseUrl } from './env';
7. import { Message } from 'element-ui';
9. //创建实例时设置配置的默认值
10. const service = axios.create({
11. baseURL: baseUrl,
12. timeout: 2000, //请求超时的时间
13. //对返回的数据进行处理
14. transformResponse: [function (data) {
15. // 对 data 进行任意转换处理
16. return JSON.parse(data);
17. }],
18. //发送到服务器的数据进行转换和处理
19. transformRequest: [function (data) {
20. // 对 data 进行任意转换处理
21. return JSON.stringify(data);
22. }]
24. });
27. //请求拦截器
28. service.interceptors.request.use( (config) => {
29. //请求前的回调函数
30. let token = '';
31. if(token){
32. config.headers['X-user-token'] = token;
33. }
34. return config;
35. }, (err) => {
36. return Promise.reject(err);
37. });
39. //响应拦截器
40. service.interceptors.response.use((res) => {
41. if(res){
42. //非登录 -- 路由重定向
44. }
45. return res;
46. }, (err) => {
47. Message.error('服务器有事离开一下，马上就回来');
48. return Promise.reject(err);
49. });
50. export default service;
