1.所用技术：
vue2.0
vuex
vue-router
axios
ElementUI2.0
webpack
vue-loader
awesome-vue
less
mock
2.环境配置：
全局安装：
npm install -g vue-cli
npm install -g webpackinit一个vue项目：
npm init webpack my-vue-webDemos//一路enternpm安装依赖包：
cd my-vue-webDemos
npm install 启动/打包项目：
npm run dev//启动项目，若需修改vue项目接口，在config文件夹中的index.js中修改
npm run build//打包项目3.单页面系统：
1）项目中使用Element-UI实现：
npm install element-ui --save-dev注：安装element之前，可先安装loader模块
npm install style-loader --save-dev
npm install css-loader --save-dev
npm install file-loader --save-dev
/*loader是webpack的大功能之一，通过不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理*/引用element-ui：
main.js
//引入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)2）项目中使用less
npm install less less-loader --save-dev
在build的webpack.base.conf.js中添加下面代码：
{
test:/\\\\\\\\.css$/, loader:'style!css' }, { test:/\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader:'file'
},
{
test:/\.less$/, loader:"style-loader!css-loader!less-loader" }3）使用mock.js
npm install mockjs --save-dev4)使用axios
npm install axios --save-dev
//安装axios的模拟调试器
npm install axios-mock-adapter --save-dev将axios-mock-adapter引入到项目中：
4.项目及各文件内容：
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
//引入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
//使用mock数据
import Mock from './mock'
Mock.bootstrap();
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/login.vue'
import Home from '@/views/home.vue'
import Dashboard from '@/views/pages/dashboard.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Admin',
name: 'Home',
component: Home,
children:[{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard
}]
}
]
})api/api.js
import axios from 'axios';
let base = '';
export const requestLogin = params => {
return axios.post(`${base}/login`, params).then(res => res.data)
}api/index.js
import * as api from './api';
export default api;mock/testData/userInfo.js
import Mock from 'mockjs';
const UserInfo = [{
id:1,
username: 'admin',
password: '123456',
name:'lyn'
}]
const Users = [];
for(let i=0;i<100;i++){
Users.push(Mock.mock({
id: Mock.Random.guid(),
name: Mock.Random.cname(),//随机生成一个中文名
birth: Mock.Random.date(),//随机生成一个日期
sex:Mock.Random.integer(0,1),//1:男，0：女
mobile:/^1[0-9]{10}$/
}))
}
export {
UserInfo,
Users
}mock/mock.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { UserInfo, Users } from './testData/userInfo';
export default {
/**
* mock bootstrap
* */
bootstrap() {
let mock = new MockAdapter(axios);
//success request
mock.onGet('/success').reply(200, {
msg: 'success'
});
//error request
mock.onGet('/error').reply(500, {
msg: 'failure'
});
//登录
mock.onPost('/login').reply(config => {
let {
username,
password
} = JSON.parse(config.data);
return new Promise((resolve, reject) => { let user = null; setTimeout(() => { let hasUser = UserInfo.some(u => { if(u.username === username && u.password === password) { user = JSON.parse(JSON.stringify(u)); user.password = undefined; return true; } }); if(hasUser) { resolve([200, { code: 200, msg: '请求成功', user }]); } else { resolve([200, { code: 500, msg: '账号或密码错误' }]); } }, 1000); }); }); } }mock/index.js
import mock from './mock';
export default mock;Login.vue
<template>
<el-row>
<el-col :span="24">
<div class="loginBox">
<el-form :model="userInfo" status-icon :rules="rules" ref="userInfo" label-width="0px" class="demo-ruleForm">
<el-form-item prop="username">
<el-input type="text" v-model="userInfo.username" auto-complete="off" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="pass">
<el-input type="password" v-model="userInfo.pass" auto-complete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<div class="operator">
<el-button type="primary" @click="Login('userInfo')">登录</el-button>
<el-button @click="resetForm('userInfo')">重置</el-button>
</div>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</template>
<script> import { requestLogin } from '../api/api' export default { data() { var checkName = (rule, value, callback) => { let that = this; if(value === '') { return callback(new Error('用户名不能为空')); } else { callback(); } }; var validatePass = (rule, value, callback) => { if(value === '') { callback(new Error('请输入密码')); } else { callback(); } }; return { userInfo: { username: '', pass: '' }, rules: { username: [{ validator: checkName, trigger: 'blur' }], pass: [{ validator: validatePass, trigger: 'blur' }] } }; }, methods: { Login(formName) { this.$refs[formName].validate((valid) => { if(valid) { let userInfo = { username:this.userInfo.username, password:this.userInfo.pass }; requestLogin(userInfo).then(data => { let { msg, code, user } = data; if(code !== 200) { this.$message({ message: msg, type: 'error' }); } else { console.log(user); sessionStorage.setItem('user', JSON.stringify(user)); this.$router.push({ path: '/dashboard' }); } }); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>
<style lang="less" scoped> .loginBox { width: 400px; height: 240px; border: 1px solid #ccc; margin: 9% auto 0px auto; border-radius: 4px; padding: 30px 40px 0px 40px; box-shadow: 0 0 25px #cac6c6; .operator { margin-top: 20px; } } </style>5)结果展示：
