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 routerapp.vue
<template> <div id="app"> <transition name="bounce"> <router-view></router-view> </transition> </div> </template> <script> export default {} </script> <style> *{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;} </style>login.vue
<template> <div id="Login"> <el-form ref="loginForm" :rules="loginRules" :model="loginForm" label-position="left" label-width="0" class="loginForm"> <h3 class="title">VUE</h3> <el-form-item prop="userName"> <el-input type="text" v-model="loginForm.userName" auto-complete="off" placeholder="账号" ></el-input> </el-form-item> <el-form-item prop="userPass"> <el-input type="password" v-model="loginForm.userPass" auto-complete="off" placeholder="密码" ></el-input> </el-form-item> <el-form-item> <el-button class="login-max-button" type="primary" @click.native.prevent="login">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { components: {}, created () {}, data () { return { loginForm: { userName: '000000', userPass: '000000' }, loginRules: { userName: [ {required: true, message: '请输入账号', trigger: 'blur'}, {min: 6, message: '账号最少是6位', trigger: 'blur'} ], userPass: [ {required: true, message: '请输入密码', trigger: 'blur'}, {min: 6, message: '密码最少是6位', trigger: 'blur'} ] } } }, methods: { login (event) { let vue = this vue.$refs.loginForm.validate((valid) => { if (valid) { if (vue.loginForm.userName === '000000' && vue.loginForm.userPass === '000000') { vue.$message({msg: '登录成功!'}, function () { vue.$router.push({name: 'home', params: {}}) vue.$cookieSet({name: 'loginInfo', value: {userName: vue.loginForm.userName}, day: 1}) }) } else { vue.$message({msg: '用户名和密码错误!(6个0)', tp: 'error'}, function () { vue.loginForm.userName = '' vue.loginForm.userPass = '' }) } // vue.$post({ // url: '/admin', // data: { // userName: vue.loginForm.userName, // userPass: vue.loginForm.userPass // }, // success: function (data) { // console.log(data) // } // }) } else { return false } }) } } } </script> <style> #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%} </style>init.vue
<template> <div id="Content"> <NavHeader></NavHeader> <el-row :gutter="1" type="flex" justify="start" style="height:95%;"> <!--NavMenu--> <el-col :span="3" style="background: #E6E6E6"> <div class="grid-content bg-purple"> <NavMenu></NavMenu> </div> </el-col> <!--Content--> <el-col :span="21"> <div class="grid-content bg-purple"> <!--Content Template--> <transition name="bounce"> <router-view></router-view> </transition> </div> </el-col> </el-row> </div> </template> <script> import NavHeader from './layout/NavHeader.vue' import NavMenu from './layout/NavMenu.vue' export default { components: { NavHeader, NavMenu } } </script> <style scoped> #Content{height: 100%} </style>NavMenu.vue
<template> <div id="NavMenu"> <el-menu theme="light" :unique-opened="uniqueOpened" default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handSelect"> <el-submenu index="user"> <template slot="title"><i class="el-icon-menu"></i>用户管理</template> <el-menu-item-group> <el-menu-item index="userList"><i class="el-icon-menu"></i> 用户列表</el-menu-item> <el-menu-item index="addUser"><i class="el-icon-plus"></i> 新建用户</el-menu-item> </el-menu-item-group> </el-submenu> <el-menu-item index="login"><i class="el-icon-setting"></i>退出登录</el-menu-item> </el-menu> </div> </template> <script> export default { data () { return { uniqueOpened: true } }, methods: { handleOpen (key, keyPath) { // console.log(key, keyPath) }, handleClose (key, keyPath) { // console.log(key, keyPath) }, handSelect (key, keyPath) { let vue = this if (key) { vue.$router.push({name: key}) } else { vue.$router.push({name: 404}) } } } } </script> <style> #NavMenu{background: #E6E6E6;height: 100%;} #NavMenu .el-menu{background: #E6E6E6; text-align: l} </style>NavHeader.vue
<template> <div id="NavHeader"> <el-row :gutter="1"> <!--Logo/UserImg--> <el-col :span="4"> <div class="grid-content logo">Element <b class="text">框架管理系统</b></div> </el-col> <!--Search--> <el-col :span="16"><div class="grid-content"></div></el-col> <!--QuitLogin and Msg--> <el-col :span="4"> <div class="grid-content"> <div class="userInfo"> <div class="userImg"><img src="static/img/user.png" class="max-min-img"></div> <div class="userName">{{userName}}</div> </div> </div> </el-col> </el-row> </div> </template> <script> export default { created () { let vue = this let userName = vue.$cookieGet({name: 'loginInfo'}) if (userName) { vue.$data.userName = JSON.parse(userName).userName } else { vue.$message({msg: '请重新登录', tp: 'warning'}, function () { vue.$router.push({name: 'login'}) }) } }, data () { return { userName: '' } } } </script> <style> #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%} </style>工具类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
或留言邮箱