項目體驗地址 https://yyds.it98k.cn/dist
image.png
image.png
image.png
image.png
image.png
1. 下載項目開發(fā)模版【https://github.com/sunniejs/vue-h5-template/tree/vue2-h5-template】
這個模版下載后准脂，如果啟動不起來，報錯
`@vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the dependency tree`
就說明你本機的環(huán)境和模版不太兼容内狗，請按如下修復捧存。
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 啟動項目
image.png
2. 項目啟動后扇住，我們要先修復下我們模版的部分邏輯迈窟，因為涉及到登錄缝其，所以要完善下【路由攔截】方法挎塌，跟我一起來
在`src`目錄下新建一個js文件`permission.js`，然后在`main.js`內引入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}`)
}
}
})
然后榴都，會報錯
This dependency was not found:
* @/utils/auth in ./src/permission.js
To install it, you can run: npm install --save @/utils/auth
是因為我們在utils目錄下還沒創(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:然后，會報錯
This dependency was not found:
* js-cookie in ./src/utils/auth.js
To install it, you can run: npm install --save js-cookie
是因為沒有安裝js-cookie插件漠其，安裝一下 ```cnpm install --save js-cookie```
eslint代碼校驗很煩人嘴高，暫時關閉他，在 ```vue.config.js``` lintOnSave: !IS_PROD , 改成 lintOnSave: false, 然后重啟項目 辉懒，就沒有errors校驗了阳惹。
4. 重啟后你會發(fā)現(xiàn)，頁面自動訪問到了 空白的 /login 頁面眶俩，已經實現(xiàn)了我們的路由攔截莹汤，（/login路由自在我們自定義的路由白名單中，所以不會攔截/login）ok了颠印，下面就可以開始開發(fā)我們的項目了纲岭。
image.png
