vue+vueRouter+Element

此项目提供项目框架组件方案，适合初学者。

由于公司项目紧张,这是晚上下班写了一点点。

项目结构图

main.js

/**
 *  导入文件
 *  @Vue: vue
 *  @Vuex: vue的一种状态管理模式
 *  @FastClick: 点击时延迟
 *  @Element: element-ui
 *  @App: 入口vue
 *  @router: 路由文件
 */
import Vue from 'vue'
import Vuex from 'vuex'
import FastClick from 'fastclick'
import Element from 'element-ui'
import App from './App'
import router from './router/router'
import 'element-ui/lib/theme-default/index.css'
import $http from './kit/request'
import $message from './kit/message'
import $cookie from './kit/cookie'
/**
 * 加载插件
 */
Vue.use(Vuex)
Vue.use(Element)
/**
 *  设置常量信息
 */
let DOMAIN_NAME = ''
let SERVER_NAME = ''
let API_PREFIX = ''
/**
 *  设置全局公用常量
 */
Vue.prototype.DOMAIN_NAME = DOMAIN_NAME
Vue.prototype.SERVER_NAME = SERVER_NAME
Vue.prototype.API_PREFIX = API_PREFIX
/**
 *  设置store
 */
const store = new Vuex.Store({})
/**
 *  监听路由
 *  修改网站title的值
 */
router.afterEach((transition) => {
  if (transition.meta.title) {
    document.title = transition.meta.title
  }
})
/**
 *  通用工具类
 */
Vue.prototype.$post = function (opts) {
  opts.method = 'post'
  $http(opts)
}
Vue.prototype.$get = function (opts) {
  opts.method = 'get'
  $http(opts)
}
/**
 * 弹出层
 * @param opts
 * @param onCloses
 */
Vue.prototype.$message = function (opts, onCloses) {
  $message(opts, onCloses)
}
/**
 * 操作coookie
 * @param name
 * @param value
 * @param day
 */
Vue.prototype.$cookieSet = function (opts) {
  opts.method = 'set'
  $cookie(opts)
}
Vue.prototype.$cookieGet = function (opts) {
  opts.method = 'get'
  return $cookie(opts)
}
Vue.prototype.$cookieDel = function (opts) {
  opts.method = 'del'
  $cookie(opts)
}
/**
 *  日志输出开关
 */
Vue.config.productionTip = true
/**
 *  点击延迟
 */
FastClick.attach(document.body)
/**
 *  创建实例
 */
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

router.js

/**
 *  导入文件
 *  @Vue: vue
 *  @VueRouter: 路由
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
/**
 *  加载模块
 */
Vue.use(VueRouter)
/**
 *  配置滚动条的位置
 *  通过这个这个属性（是个函数），可以让应用像浏览器的原生表现那样，在按下 后退/前进 按钮时，简单地让页面滚动到顶部或原来的位置。
 */
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}
/**
 *  路由配置
 *  @mode: 配置路由模式（"hash" | "history" | "abstract"）
 *  @base: 如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。
 *  @linkActiveClass: 点击触发的class
 *  @scrollBehavior: 配置滚动条的位置
 */
const router = new VueRouter({
  base: __dirname,
  likActiveClass: 'link-active',
  scrollBehavior,
  routes: [
    {
      path: '/init',
      name: 'init',
      component: resolve => require(['../components/init.vue'], resolve),
      children: [
        {
          path: '/init/home',
          name: 'home',
          component: resolve => require(['../components/home.vue'], resolve),
          meta: {title: '主页'}
        },
        {
          path: '/init/user/userList',
          name: 'userList',
          component: resolve => require(['../components/user/userList.vue'], resolve),
          meta: {title: '主页'}
        },
        {
          path: '/init/user/addUser',
          name: 'addUser',
          component: resolve => require(['../components/user/addUser.vue'], resolve),
          meta: {title: '主页'}
        }
      ]
    }, {
      path: '/login',
      name: 'login',
      component: resolve => require(['../components/login.vue'], resolve),
      meta: {title: '登录'}
    }
  ]
})

/**
 *  路由出口
 */
export default router

app.vue

login.vue

init.vue

NavMenu.vue

NavHeader.vue

工具类request.js

import axios from 'axios'
import {Loading, Message} from 'element-ui'
/**
 * @param opts
 */
const $http = function (opts) {
  let loadingInstance = Loading.service()
  loadingInstance.close()
  axios({
    method: opts.method,
    url: opts.url,
    headers: opts.headers || {},
    params: opts.params || {},
    data: opts.data || {}
  }).then(function (response) {
    loadingInstance.close()
    opts.success(response)
  }).catch(function (error) {
    console.log(error)
    Message.warning({message: '系统异常'})
    loadingInstance.close()
  })
}
/**
 *  出口
 */
export default $http

以上为大部分代码

GIT完整地址：[email protected]:Apache-Ra/ra-vue-example.git

或留言邮箱