Vue-cli项目搭建（axios vue-router vue

之前有写过如何用vue-cli搭建一个项目，现在我们来将这个项目的基本构架搭建出来。
例如如何使用vuex 和 axios 等。
这里我做的是一个基于vue的后台管理系统。

https://www.jianshu.com/p/b449e5387794
最开始我只创建了两个页面 home 和 login

暂时只有两个页面

基于这个地址里的步骤搭建完项目。我们可以先配置vue 项目的路由。这里我们用到了路由懒加载。这样可以进行优化

找到 router文件夹 在下面新建 routes.js

routes.js的代码如下

const Home = () => import('pages/Home')
const Login = () => import('pages/Login')

const routes = [{
  path: '/home',
  name: 'home',
  text: '首页',
  isnav: true,
  components: {
    default: Home
  },
  meta: {
    islogin: true //这里是为了做导航守卫由于是后台管理需要所有的页面在登陆后才能进入
  }
}, {
  path: '/login',
  name: 'login',
  isnav: false,
  components: {
    default: Login
  },
  meta: {
    islogin: false
  }
}, {
  path: '/',
  redirect: '/home' //这类是从写  如果 路由为空自动跳转到home界面
}]

export default routes

在index.js只需要引入页面 就好。如果要写成多页 就加一个 mode: 'history'
index.js内容

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes.js'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes
})

这样你现在访问页面就是 你的主页页面了。
下一篇我们要配置axios

https://www.jianshu.com/p/73c1a94759b6