基于vue2.x实现的即时通讯程序仿微信聊天1项目开发模版配置

项目体验地址 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 [email protected] -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