从零开始使用vue-cli搭建后端管理系统

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)结果展示：