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 webpack

init一個vue專案：

npm init webpack my-vue-webDemos//一路enter

npm安裝依賴包：

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-dev

4)使用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)結果展示：