项目体验地址 https://yyds.it98k.cn/dist
image.png
image.png
image.png
image.png
image.png
1. 下载项目开发模版【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`
就说明你本机的环境和模版不太兼容，请按如下修复。
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目录下还没创建 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. 重启后你会发现，页面自动访问到了 空白的 /login 页面，已经实现了我们的路由拦截，（/login路由自在我们自定义的路由白名单中，所以不会拦截/login）ok了，下面就可以开始开发我们的项目了。
image.png
