Vue|vue+vueRouter+Element vue|Vux

此项目提供项目框架组件方案，适合初学者。
由于公司项目紧张,这是晚上下班写了一点点。
项目结构图

文章图片

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

*{margin: 0; padding:0; } html, body{height:100%; overflow: hidden} #app{ font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; height: 100%; } .breadcrumb{padding:20px; }

#Login .loginForm{border:1px solid #EAEAEA; width:400px; margin:200px auto; border-radius: 5px; padding: 35px; box-shadow: 0 0 40px #CAC6C6} #Login .loginForm .title{height: 30px; border-bottom:1px solid #EAEAEA; margin-bottom:20px; text-align: center} #Login .loginForm .login-max-button{width: 100%}

init.vue

scoped> #Content{height: 100%}

NavMenu.vue

#NavMenu{background: #E6E6E6; height: 100%; } #NavMenu .el-menu{background: #E6E6E6; text-align: l}

NavHeader.vue

#NavHeader{ background: #20A0FF; height: 50px; } #NavHeader .logo{line-height: 50px; color: #FFF; font-size:30px; text-shadow:1px 1px 5px #666} #NavHeader .logo .text{font-size: 18px; } #NavHeader .grid-content{height: 50px; } #NavHeader .userInfo{height: 50px; margin-right:30px; } #NavHeader .userName{display: inline-block; height: 50px; line-height: 50px; padding: 0 10px; float: right; cursor: pointer; color: #FFF} #NavHeader .userImg{width:50px; height: 50px; display: inline-block; border-radius: 50%; float: right; } #NavHeader .userImg img{width:50px; height: 50px; border-radius: 50%} #NavHeader .max-min-img{max-width: 100%; max-height: 100%}

工具类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完整地址：git@github.com:Apache-Ra/ra-vue-example.git

或留言邮箱