vue项目目录结构（转载）

2018-05-08 本文已影响6人小鱼儿的小世界

网摘：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;

vue项目目录结构（转载）

猜你喜欢

热点阅读