使用框架：vue

使用插件：vue-cli萍诱，vue-loader，axios 铭腕，px2rem

使用UI框架：mint-ui

第一步柿究、先用 vue-cli 直接搭建項(xiàng)目

先全局安裝 vue-cli

npm install --g vue-cli

然后執(zhí)行創(chuàng)建項(xiàng)目語(yǔ)句
vue-cli 3.x則用

vue create project-name

vue-cli 2.x 用（我這用的是2.x）

vue init webpack project-name

搭建

ESlint 是統(tǒng)一代碼風(fēng)格的
下面兩個(gè)是測(cè)試用的
最后是選擇install 依賴包，默認(rèn)npm就行了孤里，安裝慢的話可以用淘寶的鏡像 cnpm伏伯。
項(xiàng)目搭建好在項(xiàng)目根目錄運(yùn)行

npm run dev

就可以得到這樣一個(gè)頁(yè)面

默認(rèn)首頁(yè)

搭建好獲得這個(gè)項(xiàng)目結(jié)構(gòu)

圖為借鑒來(lái)的

第二步、引入使用的插件

(1)axios(數(shù)據(jù)請(qǐng)求捌袜，類似ajax说搅，vue-resource)

npm install axios -s

安裝好后，開(kāi)始配置axios虏等，和封裝請(qǐng)求弄唧，在src下創(chuàng)建api文件夾用于放置請(qǐng)求文件
http.js ↓

目錄

import axios from 'axios'
import QS from 'qs'
//默認(rèn)接口url前綴
axios.defaults.baseURL = 'http:// 你的api路徑';
//超時(shí)時(shí)間，超過(guò)5秒提示請(qǐng)求超時(shí)
axios.defaults.timeout = 5000;
//post的默認(rèn)請(qǐng)求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
/**
 * get方法候引，對(duì)應(yīng)get請(qǐng)求
 * @param {String} url [請(qǐng)求的url地址]
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

/**
 * post方法侯养，對(duì)應(yīng)post請(qǐng)求
 */
export function post(url, params,config) {
    return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params),config)
            .then(res => {
                resolve(res.data)
            }).catch(err => {
                reject(err.data)
            })
    })
}

創(chuàng)建模塊的請(qǐng)求js
login.js

import {get, post } from './http'
export const login = data => post('login_query_Personnel', data)
export const queryCode = data => get('query_Personnel_openid',data)

在組件使用

import { login } from "../api/login";
methods:{
  tologin(){
    login({
        phone: this.phone,
        password: this.password,
        openid:localStorage.getItem("openid")
      }).then(res => {
        console.log(res);
        if (res.resultCode == 0) {
          Toast("登錄成功");
          localStorage.setItem('loginInfo',JSON.stringify(res.data))
          this.$router.go(-1)
        } else {
          Toast(res.resultMess);
        }
      });
}
}

(2)引入mint-ui

npm install mint-ui -s

按需引入組件

<mt-header title="登錄">
</mt-header>
import { Header, Field, Toast } from "mint-ui";

（3）引入px2rem，適配手機(jī)端

npm install postcss-px2rem -s

記得刪除index.html<meta name='viewport' >標(biāo)簽
在.postcssrc.js中配置

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    'postcss-px2rem-exclude':{
      remUnit:75  //按照設(shè)計(jì)圖
    }
  }
}

第三步澄干、配置路由

設(shè)置路由路徑及相對(duì)應(yīng)的組件
及是否需要登陸

{ path: '/baoxiu', name: 'baoxiu', component: baoxiu, meta: { requireLogin: true } },

判斷是否需要登錄逛揩，在路由中設(shè)置 router.beforeEach

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requireLogin)) {  //判斷該路由是否需要登錄權(quán)限
        if (localStorage.getItem('loginInfo')) {        //判斷當(dāng)前用戶的登錄信息loginInfo是否存在
            next()
        } else {
            next({
                path: '/login',
                query: { Rurl: to.fullPath }        //保存上一個(gè)頁(yè)面
            })
        }
    } else {
        next()
    }
})

參考于https://www.cnblogs.com/gaosong-shuhong/p/9300319.html