項(xiàng)目體驗(yàn)地址 https://yyds.it98k.cn/dist

image.png

image.png

image.png

image.png

image.png

1. 下載項(xiàng)目開發(fā)模版【https://github.com/sunniejs/vue-h5-template/tree/vue2-h5-template】

這個(gè)模版下載后，如果啟動不起來，報(bào)錯(cuò)
`@vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the dependency tree`
就說明你本機(jī)的環(huán)境和模版不太兼容，請按如下修復(fù)。
1：修改package.json依賴插件，刪除 "node-sass": "^4.14.1", 
2：安裝 "sass": "1.26.8", "vue-loader": "^15.9.8",
3：安裝命令如下：cnpm i sass@1.26.8 -S   cnpm i vue-loader@^15.9.8 -D
4：最后 cnpm install  安裝所以依賴包后，npm run serve 啟動項(xiàng)目 

image.png

2. 項(xiàng)目啟動后，我們要先修復(fù)下我們模版的部分邏輯，因?yàn)樯婕暗降卿?，所以要完善下【路由攔截】方法，跟我一起來

在`src`目錄下新建一個(gè)js文件`permission.js`，然后在`main.js`內(nèi)引入permission.js，然后permission.js代碼如下：


import router from './router'
import store from './store'
import { getToken } from '@/utils/auth' // get token from cookie
const whiteList = ['/login'] // no redirect whitelist

router.beforeEach(async (to, from, next) => {
    // set page title
    document.title = to.meta.title

    // determine whether the user has logged in
    const hasToken = getToken()
    if (hasToken) {
        if (to.path === '/login') {
            // if is logged in, redirect to the home page
            next({ path: '/' })
        } else {
            const hasGetUserInfo = store.getters.userInfo
            if (hasGetUserInfo) {
                next()
            } else {
                try {
                    // get user info
                    await store.dispatch('getUserInfo') // 請求獲取用戶信息
                    next({ ...to, replace: true })
                    // next()
                } catch (error) {
                    // remove token and go to login page to re-login
                    console.log(error);
                    // await store.dispatch('resetToken')
                    next(`/login?redirect=${to.path}`)
                }
            }
        }
    }
    else {
        /* has no token*/
        if (whiteList.indexOf(to.path) !== -1) {
            // in the free login whitelist, go directly
            next()
        } else {
            next(`/login?redirect=${to.path}`)
        }

    }
})





然后，會報(bào)錯(cuò) 

This dependency was not found:

* @/utils/auth in ./src/permission.js

To install it, you can run: npm install --save @/utils/auth

是因?yàn)槲覀冊趗tils目錄下還沒創(chuàng)建 auth.js 文件

3. 在utils目錄下新建auth.js文件,文件代碼如下：

import Cookies from 'js-cookie'

const TokenKey = 'vue_huixin_token'


export function getToken() {
    return Cookies.get(TokenKey)
}

export function setToken(token) {
    return Cookies.set(TokenKey, token)
}

export function removeToken() {
    return Cookies.remove(TokenKey)
}


ps:然后，會報(bào)錯(cuò)

This dependency was not found:

* js-cookie in ./src/utils/auth.js

To install it, you can run: npm install --save js-cookie

是因?yàn)闆]有安裝js-cookie插件，安裝一下 ```cnpm install --save js-cookie```

eslint代碼校驗(yàn)很煩人，暫時(shí)關(guān)閉他，在 ```vue.config.js``` lintOnSave: !IS_PROD , 改成 lintOnSave: false, 然后重啟項(xiàng)目 ，就沒有errors校驗(yàn)了。

4. 重啟后你會發(fā)現(xiàn)，頁面自動訪問到了 空白的 /login 頁面，已經(jīng)實(shí)現(xiàn)了我們的路由攔截，（/login路由自在我們自定義的路由白名單中，所以不會攔截/login）ok了，下面就可以開始開發(fā)我們的項(xiàng)目了。

image.png