前言：記錄項目的整個流程

1迂苛、創(chuàng)建項目：vant框架（http://vant-ui.gitee.io/#/zhCN/quickstart）

按照vant官網(wǎng)的安裝-創(chuàng)建項目流程：

# 安裝 Vue Cli
npm install -g @vue/cli
# 創(chuàng)建一個項目
vue create hello-world
# Vue 2 項目鼓择，安裝 Vant 2
npm i vant -S
或
npm i vant@latest-v2 -S

2、添加依賴（持續(xù)更新）

3念搬、目錄結(jié)構(gòu)

4节芥、代理（解決跨域問題）

 devServer:{
    proxy: {
      "/a": {
        target: "https://xxx.com.cn",
        changeOrigin: true, //是否跨域
        secure: false,
        pathRewrite: {
            '^/a': '/a' //重寫接口
        },
        cookieDomainRewrite: ''
      }
    }
  }

5头镊、axios配置

• 判斷token

//獲取cookie
const token = getCookie('access_token');

• 添加token到request的header中

if (token) {
      config.headers.Authorization = `Bearer ${token}`;
}
-----tools.js----
function getCookie(str) {
  const name = `${str}=`;
  const ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i += 1) {
    const c = ca[i].trim();
     if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
  }
  return null;
}

• 更改返回狀態(tài)碼

if (res.status == 200) {
      return res.data
}

6相艇、vuex說明(https://vuex.vuejs.org/zh/guide/)

• index.js

//存放細(xì)分后的用戶相關(guān)狀態(tài)操作等
export default new Vuex.Store({
  modules: {
    User坛芽，
    Login
  }
})

• 細(xì)分之后的單個store

import UserApi from '@/api/User';
const userApi = new UserApi();
//存儲的公共數(shù)據(jù)
const state = {
  userInfo: localStorage.getItem('userInfo') ? localStorage.getItem('userInfo') : {}
};
//處理過的數(shù)據(jù)
const getters = {
};
//唯一更改數(shù)據(jù)的方法
const mutations = {
    SET_USER_INFO(state, data) {
    state.userInfo = data;
  }
};
//調(diào)用更改數(shù)據(jù)的方法翼抠，常用于請求后，調(diào)用mutations的方法去更改公共數(shù)據(jù)
const actions = {
    async getUserInfo({ commit }) {
      const res = await userApi.getUser();
      if(res.result === 200){
        commit('SET_USER_INFO',res.data)
        localStorage.setItem('userInfo',res.data)
      }else{
        commit('SET_USER_INFO', {})
        localStorage.removeItem('userInfo')
      }
    }
}

export default {
  state,
  getters活喊，
  mutations,
  actions,
};

• api接口

import http from '@/utils/httpServer'
import { BASE_URL } from '@/utils/config';

export default class UserApi{
  //獲取用戶信息
  getUser() {
      return http.get(`${BASE_URL}/user`);
  }
}

7钾菊、vue-router路由(https://router.vuejs.org/zh/introduction.html)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    meta:{
      title:'頂部名稱'
    },
    component: Home
  },
  {
    path: '/other',
    name: 'other',
    meta:{
      title:'頂部名稱'
    },
    component: () => import('../views/other.vue')
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to,from,next)=>{
  //如果要用相同的名稱煞烫，這里做判空顯示默認(rèn)
  document.title = to.meta && to.meta.title;
  next()
})
export default router

8累颂、Vant使用

• npm引入后喘落，在src目錄下創(chuàng)建一個lib文件夾，里面創(chuàng)建一個vant.js

import Vue from 'vue';
import {
    Icon,
    Button
} from 'vant'
//按需引入
Vue.use(Icon);
Vue.use(Button);

• 在main.js中引入vant.js,代碼中即可使用vant組件

import './lib/vant';