網(wǎng)摘：https://blog.csdn.net/WaterSprite_ct/article/details/79728314
一、通過命令行工具安裝vue（npm install webpack vue-project）
image
build -- 項目構(gòu)建的相關(guān)代碼
config -- 配置目錄躬窜，包括端口溜族、環(huán)境等的配置
-
src -- 開發(fā)的主要目錄
-- 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'[瀏覽器環(huán)境]) -- 'abstract'[node.js環(huán)境] -- 'history'[HTML5 History API]
- scrollBehavior：滾動行為的配置(在按下后退/前進按鈕积锅，項瀏覽器的原生那樣)
- 數(shù)據(jù)獲取：完成導航(路由)再獲取數(shù)據(jù) 匙瘪、導航完成前回去(路由進入的守衛(wèi)中獲取數(shù)據(jù)【路由改變前碍论，組件就渲染完成】)
- 具體的api見 https://router.vuejs.org/zh-cn/
三坐搔、生命周期的理解
- beforeCreate：創(chuàng)建前的狀態(tài)(創(chuàng)建實例前，vue實例的屬性值為undefined)
- created：實例創(chuàng)建完成后(data被定義了业踏，但el屬性為undefined)
- beforeMount：掛鉤前(DOM渲染前)柳恐，el屬性已經(jīng)拿到對應的DOM元素
- mounted：掛載結(jié)束后(Dom渲染完成后晓殊，el屬性的Dom的數(shù)據(jù)將被渲染)
- beforeUpdate：數(shù)據(jù)變化前的調(diào)用
- updated：數(shù)據(jù)變化后的鉤子
- beforeDestroy：銷毀前狀態(tài)
- destroy：銷毀完成
四、ajax請求(后臺數(shù)據(jù)交互) -- axios
1. 配置編譯環(huán)境和線上環(huán)境的切換(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. //創(chuàng)建實例時設置配置的默認值
10. const service = axios.create({
11. baseURL: baseUrl,
12. timeout: 2000, //請求超時的時間
13. //對返回的數(shù)據(jù)進行處理
14. transformResponse: [function (data) {
15. // 對 data 進行任意轉(zhuǎn)換處理
16. return JSON.parse(data);
17. }],
18. //發(fā)送到服務器的數(shù)據(jù)進行轉(zhuǎn)換和處理
19. transformRequest: [function (data) {
20. // 對 data 進行任意轉(zhuǎn)換處理
21. return JSON.stringify(data);
22. }]
24. });
27. //請求攔截器
28. service.interceptors.request.use( (config) => {
29. //請求前的回調(diào)函數(shù)
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;
