TT建站之路--vue项目基础框架搭建【01】

上篇文章就说过，要搞个网站玩玩，结果4个月过去了，现在才动手，哎呀。。。。。。觉得自己身为程序员三四年了，是时候搞一个属于自己独立开发的项目出来，暂定小说类型网站。促使我做这件事主要有以下几方面的原因：

1：同步更新文章可以锻炼自己的文字输出能力。
2：写文章的同时，可以加深自己对知识点的理解。
3：自己写的项目，想怎么搞就怎么搞，可以把最新了解到的技术毫无顾忌的用到项目实践当中。

说干就干，然后也就有了本系列文章，这将记录我从零开始建站的全过程，包括前端搭建、后台搭建、数据库设计。技术选型分为：前端选择VUE，后台还没考虑好，JAVA或者GO（在我没有确定之前，各位看到这篇文章的小伙伴可以提提意见哟），数据库MySQL。

一、使用vue cli脚手架初始化项目。

首先安装vue cli，推荐使用vue cli3+，打开CMD输入如下命令：

npm install -g @vue/cli

然后使用cli创建一个项目

vue create hxkj-novel    //hxkj-novel 为项目名

创建完成后，用开发工具打开，开发工具我这边使用的是webStorm，个人感觉用起来比较顺手。打开之后嘞，就会发现项目的目录结构如下：

│  node_modules                 
│  package-lock.json
│  package.json      //项目配置文件├─public│      favicon.ico  //网站图标│      index.html  //入口HTML文件└─src
    │  App.vue
    │  main.js    //入口JS文件，一般全局定义都在这里面
    ├─assets      //静态资源放置目录
    │      logo.png
    └─components  //组件放置目录
            HelloWorld.vue

二、接下来就是做一些基本的配置了。

1、配置代理

因为这个项目我打算做前后端分离模式，所以，在开发过程中必然会遇到跨域的问题，然后呢，就得解决这个问题啦，那就是配置反向代理喽。
在项目的根目录下新建 vue.config.js 文件，自 Vue CLI 3 开始，项目中所有的配置信息都写在这个文件中。
配置信息如下：

//vue.config.jsmodule.exports = {
    devServer: {
        proxy: {// 设置代理
            '/tsy': {
                target: 'http://www.hxkj.vip',//设置调用的接口域名和端口号
                changeOrigin: true,//开启跨域访问：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                ws: true,// 是否启用websockets
                pathRewrite: {                    '^/tsy': ''
                }
            }
        }
    }
}

2、配置路由拦截器

我们可以通过路由拦截做什么?我认为最主要的便是对权限的控制,比如有的页面需要登录了才能进入,有些页面不同身份渲染不同.这个项目我引入了 mint ui 框架,所以我是结合 mint ui 中 messageBox 组件来处理的。由于路由拦截器跟路由路径配置我是分开来写的，一共用到两个文件。下面简单的配置一下登录拦截：

//router.js文件配置示例import Vue from 'vue'import VueRouter from 'vue-router'import {routes} from "./routes"import {MessageBox} from 'mint-ui'Vue.use(VueRouter)const router = new VueRouter({
    routes
})

router.beforeEach((to, from, next) => {    if (to.matched.some(r => r.meta.requireAuth)) { //判断该页面是否需要登录后才能进入
        // 判断是否登录
        if (store.getters.isLogin) { //已登录状态  不拦截
            next();
        } else {//未登录状态  拦截并重定向到登录页
            MessageBox.confirm('请登录您的账号！', '温馨提示').then(action => {                if (action == 'confirm') {
                    next({                        path: '/login',                        query: {redirect: to.fullPath}
                    })
                }
            }).catch(e => {                console.log(e)
            });
        }
    } else {
        next();
    }
})export default router;

//routes.js文件配置示例import Home from '../components/home/Home'import HomePage from '../components/home/HomePage'import HomeMine from '../components/home/HomeMine'export const routes = [
    {        path: '/', name: 'home', component: Home, redirect: '/home/index', children: [
        {path: '/home/index', name: 'homePage', component: HomePage, meta: {title: '哈希小说网'}},        // 需要登录才能进入的页面可以增加一个meta属性--requireAuth: true
        {path: '/home/mine', name: 'homeMine', component: HomeMine, meta: {title: '我的', requireAuth: true}}
    ]
    }
]

3、配置http拦截器

如果需要统一处理所有http请求和响应，那么就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），就让用户重新登录。具体配置信息如下：

//http.js文件配置示例import store from './store/store'import axios from 'axios'import router from './router/router'// http request 拦截器axios.interceptors.request.use(    config => {        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }        return config;
    },
    err => {        return Promise.reject(err);
    });// http response 拦截器axios.interceptors.response.use(    response => {        return response;
    },
    error => {        if (error.response) {            switch (error.response.status) {                case 401:                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({                        path: 'login',                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }        return Promise.reject(error.response.data)   // 返回接口返回的错误信息
    });

4、配置路由按需加载

按需加载，顾名思义-即在需要的时候进行加载，随用随载。在以往开发单页应用的经验中，发现，如果没有应用按需加载，运用webpack打包后的文件将会非常的大，简直恐怖如斯，这样就造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，首页卡个10几秒，阔怕呀。而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。惯例，出示配置代码：

//routes.js文件配置示例const Home = resolve => require(['../components/home/Home'], resolve)const HomePage = resolve => require(['../components/home/HomePage'], resolve)const HomeMine = resolve => require(['../components/home/HomeMine'], resolve)export const routes = [
    {        path: '/', name: 'home', component: Home, redirect: '/home/index', children: [
        {path: '/home/index', name: 'homePage', component: HomePage, meta: {title: '哈希小说网'}},
        {path: '/home/mine', name: 'homeMine', component: HomeMine, meta: {title: '我的'}}
    ]
    }
]

假如又遇到一个问题，不想要每个路由都单独加载，需要按模块加载，那当然也是没有问题的，配置信息如下：

//routes.js文件配置示例//这里以首页模块为例const Home = r => require.ensure([], () => r(require('../components/home/Home')), 'home')//home 就是改模块的名字，相同模块使用同一个名字就好const HomePage = r => require.ensure([], () => r(require('../components/home/HomePage')), 'home')const HomeMine = r => require.ensure([], () => r(require('../components/home/HomeMine')), 'home')export const routes = [
    {        path: '/', name: 'home', component: Home, redirect: '/home/index', children: [
        {path: '/home/index', name: 'homePage', component: HomePage, meta: {title: '哈希小说网'}},
        {path: '/home/mine', name: 'homeMine', component: HomeMine, meta: {title: '我的'}}
    ]
    }
]

作者：_TSY_
链接：https://www.jianshu.com/p/504fd2d78542