Vue2.x

内观其心，心无其心；外观其形，形无其形；远观其物，物无其物

核心库只关心视图层,都是基于NodeJS,实际开发采用vue-cli脚手架开发，vue-router 路由，vuex状态管理，Vue UI

1. 学习内容

核心

数据驱动，组件化
逻辑

判断，循环
事件

浏览器事件【BOM】：window document 文档对象模型【DOM】- 事件：增删改查排序,JQuery
视图

html,css，css预处理器【新的语言】：SASS,LESS，js：原生js【ES】TypeScript，JS框架：JQuery，Angular，React【虚拟Dom】，Vue【计算属性虚拟DOM】，Axios,js构建工具：Babel，Webpack
通信

xhr【原生】 ajax，axios【ajax框架】
页面跳转

vue-router
状态管理

Vue-UI:飞冰【ICE】，ElementUI,Ant-Design,Bootstrap,AmazeUI，iView【移动端】
后端管理

NodeJS:Express，Koa，HPM，YARN

2. 步骤

2.1 选择编译器

vscode， IDEA， Hubilder， sublime， WebStrom

2.2 下载vue.js

2.3 CDN导入vue.js

1
2
3

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

2.4 创建html文件

栗子

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!--vue3.0-->
    <!--<script src="https://unpkg.com/vue@next"></script>-->
</head>
<body>
    <!--view层：模板-->
    <div id="app">
        <!--绑定-->
        <span v-bind:title="message">
            点击悬浮
        </span>
        <!--判断-->
        <h1 v-if="type === 'A'">{{ message }}</h1>
        <h1 v-else-if="type === 'B'">B</h1>
        <h1 v-else-if="type === 'C'">C</h1>
        <h1 v-else>D</h1>
        <!--循环-->
        <ol>
            <li v-for="(item,index) in items">
                {{ item.a }}-->{{ index }}
            </li>
        </ol>

        <button v-on:click="sayHi">点击</button>
    </div>

    <script>
        var app1 = new Vue({
            el: "#app",
            //Model层：数据，
            data:{
                message: "hello,vue" + new Date().toLocaleString(),
                ok: true,
                type: 'A',
                items: [
                    {a: '几个'},
                    {a: 'haiyou'},
                    {a: 'hou'},
                ]
            },
            //方法，必须定义在Methods对象中，v-on：来绑定事件
            methods: {
                sayHi: function () {
                    alert(this.message)
                }
            }
        });



        /*vue3.0方式*/
        /*const HelloVueApp = {
            data() {
                return {
                    message: 'Hello Vue!!'
                }
            }
        }

        Vue.createApp(HelloVueApp).mount('#app')*/
    </script>
</body>
</html>

3. vue基本语法

3.1 vue七大属性

el属性
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
- 用来设置模板，会替换页面元素，包括占位符。
methods属性
- 放置页面中的业务逻辑，js方法一般都放置在methods中，每次进入页面都要执行一次
render属性
- 创建真正的Virtual Dom
computed属性
- 用来计算，只有message发生变化时才会触发reverseMessage
watch属性
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值，

3.2 V-model绑定表单与组件

栗子

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
<!--view层：模板-->
<div id="app">
    <app-nav v-for="item in items" v-bind:course="item"></app-nav>
    <from action="" method="get">
        <!--双向数据绑定-->
        输入的文本：<input type="text" v-model="message">
        <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>{{ message }}<br>
        性别：
        <input type="radio" name="gender" value="男" id="male" v-model="gender"><lable for="male" checked>男</lable>
        <input type="radio" name="gender" value="女" id="female" v-model="gender"><lable for="female">女</lable>
        选中了谁：{{ gender }}
        <select v-model="selected">
            <option value="" disabled>请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        选中了谁：{{ selected }}


    </from>

</div>

<script>

    //定义一个组件
    Vue.component("app-nav",{
        props: ['course'],
       template:  '<ol>\n' +
           '<li>{{ course }}</li>\n' +
           '</ol>'
    });
    var app1 = new Vue({
        el: "#app",
        //Model层：数据，
        data:{
            message: "123",
            gender: '',
            selected: '',
            items: ["java","Linux","Vue"]
        },
        //方法，必须定义在Methods对象中，v-on：来绑定事件
        methods: {

        }
    });




</script>
</body>
</html>

3.3 Vue生命周期

Vue 实例生命周期

栗子

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo3</title>
    <style>
        /*隐藏{{ info.name }}*/
        [v-clock] {
            display: none;
        }
    </style>

</head>
<body>
    <div id="vue" v-clock>
        <div>{{ info.name }}</div>
        <div>{{ info.address.street }}</div>

        <a v-bind:href="info.url">点击</a>
    </div>


</body>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--引入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: '#vue',
        data(){
            return {
                //请求的返回参数，必须和JSON字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null,
                }
            }
        },
        mounted() {//钩子函数，链式编程，ES6新特性
            axios.get('../data.json').then(response => (this.info = response.data));

        }
    });
</script>
</html>

3.4 计算属性

（1）栗子

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!--vue3.0-->
    <!--<script src="https://unpkg.com/vue@next"></script>-->
</head>
<body>
    <!--view层：模板-->
    <div id="app">
        <!--绑定-->
        <span v-bind:title="message">
            点击悬浮
        </span>
        <!--判断-->
        <h1 v-if="type === 'A'">{{ message }}</h1>
        <h1 v-else-if="type === 'B'">B</h1>
        <h1 v-else-if="type === 'C'">C</h1>
        <h1 v-else>D</h1>
        <!--循环-->
        <ol>
            <li v-for="(item,index) in items">
                {{ item.a }}-->{{ index }}
            </li>
        </ol>

        <button v-on:click="sayHi">点击</button>

        <p>{{ currentTime1() }}</p>
        <p>{{ currentTime2 }}</p>
    </div>

    <script>
        var app1 = new Vue({
            el: "#app",
            //Model层：数据，
            data:{
                message: "hello,vue" + new Date().toLocaleString(),
                ok: true,
                type: 'A',
                items: [
                    {a: '几个'},
                    {a: 'haiyou'},
                    {a: 'hou'},
                ]
            },
            //方法，必须定义在Methods对象中，v-on：来绑定事件
            methods: {
                sayHi: function () {
                    alert(this.message)
                },
                currentTime1() {
                    return Date.now();
                }
            },
            computed: {//计算属性：method，cpmputed方法名不能重名，重名之后，只会调用method的方法,可以相当于缓存
                currentTime2() {
                    return Date.now();
                }
            }
        });



        /*vue3.0方式*/
        /*const HelloVueApp = {
            data() {
                return {
                    message: 'Hello Vue!!'
                }
            }
        }

        Vue.createApp(HelloVueApp).mount('#app')*/
    </script>
</body>
</html>

3.5 插槽

栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" :title="title"></todo-title>
            <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
        </todo>
    </div>

<script>
    /*slot:插槽*/
    Vue.component("todo",{
        template:
        '<div>\
           <slot name="todo-title"></slot>\
           <ul>\
            <slot name="todo-items"></slot>\
            </ul>\
         </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{ title }}</div>'
    });
    Vue.component("todo-items",{
        props: ['item'],
       template: '<li>{{ item }}</li>'
    });
    var vm = new Vue({
       el: "#app",
        data: {
           title: "hello列表",
           todoItems: ['hello1','hello2','hello3']
        }
    });
</script>
</body>
</html>

3.6 自定义事件

栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" :title="title"></todo-title>
            <todo-items slot="todo-items" v-for="(item ,index) in todoItems" :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
        </todo>
    </div>

<script>
    /*slot:插槽*/
    Vue.component("todo",{
        template:
        '<div>\
           <slot name="todo-title"></slot>\
           <ul>\
            <slot name="todo-items"></slot>\
            </ul>\
         </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{ title }}</div>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],
       template: '<li>{{ index }}-->{{ item }} <button @click="remove">删除</button></li>',
        methods: {
            remove:function (index) {
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
       el: "#app",
        data: {
           title: "hello列表",
           todoItems: ['hello1','hello2','hello3']
        },
        methods: {
           removeItems:function (index) {
               console.log("删除了" + this.todoItems[index] + "成功");
               this.todoItems.splice(index,1);//一次删除一个元素
           }
        }
    });
</script>
</body>
</html>

4. Axios异步通信

实现AJAX异步通信，可以用在浏览器和node.js中,Axios 是一个基于 promise 的 HTTP 库，js至少为ES6，有箭头函数，少用JQuery，因为会频繁操作Dom

axios文档

4.1功能

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

5. vue-cli脚手架

统一目录结构

5.1 安装环境

(1) 安装node.js安装node.js，其他博主

(2) 安装npm淘宝镜像加速器cnpm【尽量少用cnpm】npm安装，其他博主

1	npm install cnpm -g

(3) 通过cnpm安装vue-cli【比npm快】

1	cnpm install vue-cli -g

(4) 栗子

新建一个目录
创建基于webpack模板的vue应用程序,初始化并运行

# 1.初始化
vue init webpack myvue

? Project name myvue
? Project description A Vue.js project
? Author xxy
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

# 2. 移动到myvue
cd myvue
# 3. 安装依赖,cnpm少用
npm install
# 或者
cnpm install 
# 4. 运行，cnpm少用
npm run dev
# 或者
cnpm run dev

(5) Git

6. Webpack【前端资源构建打包工具】

6.1 模块化的演进(背景)

Script标签

1 2	<script src = "a.js"></script> <script src = "b.js"></script>

缺点：全局容易造成冲突

CommonsJS

require("module");
require("../module.js");
export.doStuff = function(){};
module.exports = someValue;

缺点：同步加载

define("module",["dep1","dep2"],function(d1,d2) {
    return someExportedValue;
});
require(["module","../file.js"], function(module,file) {});

缺点：开发成本高，是一种妥协的实现

实现：requireJs,curl

define(function(require,exports,module)
       var $ = require("jquery");
       var Spinning = require("./spinning");
		export.doSomething = ...;
        module.exports = ...;
});

缺点：依赖SPM打包，模块加载逻辑偏重

实现：Sea.js,coolie

ES6模块

1
2
3

import "jquery";
export function doStuff() {}
module "localModule" {}

缺点：全新的命令，新版NodeJS才支持，原生浏览器还没有实现该标准

实现：Babel

6.2 安装Webpack

npm install webpack -g
npm install webpack-cli -g
# 测试安装是否成功
webpack -v
webpack-cli -v

6.3 配置

创建webpack.config.js 配置文件
- entry: 入口文件，指定webpack用哪个文件作为项目的入口
- output:输出，指定webpack把处理完成的文件放置到指定路径
- module：模块，用于处理各种类型的文件
- plugins：插件，如：热更新、代码重用等
- resolve：设置路径指向
- watch：监听，用于设置文件改动后直接打包

6.4 使用

创建项目
创建一个名为modules的目录，用于放置Js模块等资源文件
在modules下创建模块文件，如hello.js，用于编写JS模块相关代码
hello.js

//暴露一个方法
exports.sayHi = function() {
    document.write("<h1>xxy</h1>");
};

main.js

1 2	var hello = require("./hello"); hello.sayHi();

webpack.config.js

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
};

启动终端

webpack

7. vue-router

7.1 安装

1	npm install vue-router --save-dev

7.2 使用vue-router

创建Content.vue文件

<template>
    <h1>内容</h1>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>
</style>

创建Main.vue文件

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>
</style>

创建router文件夹
router文件夹下创建index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'
import Main from '../components/Main'
//安装路由
Vue.use(VueRouter);

//配置导出路由

export default new VueRouter({
    routes: [
    {
        //路由路径
        path: '/content',
        name: 'content',
        //跳转的组件
        component: Content
    },
    {
        //路由路径
        path: '/main',
        name: 'main',
        //跳转的组件
        component: Main
    }
    ]
});

App.vue文件

<template>
  <div id="app">
   <h1>xxy</h1>
   <router-link to = "/main">首页</router-link>
    <router-link to = "/content">内容</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  // import Content from './components/Content'

export default {
  name: 'App',


}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

8. 建立新的项目

8.1 环境准备步骤

# 进入目录
cd test
# vue初始化
vue init webpack myvue1
# npm安装vue-router
cd myvue1
npm install vue-router --save-dev
# 安装UI库
npm i element-ui -S
# 安装依赖
npm install
# 安装SASS加载器，css
cnpm install sass-loader node-sass --save-dev
# 启动项目
npm run dev

8.2 npm命令解释

npm install moduleName：安装模块到项目目录下
npm install -g moduleName: -g表示安装全局，具体哪个盘，看npm config prefix 的位置
npm install –save moduleName: –save表示将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
npm install –save-dev moduleName: –save-dev表示将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

8.3 编写vue文件

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

Main.vue

<template>
    <h1>主页</h1>
</template>
<script>
export default {
  name: 'main',

}
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <h1>zhu</h1>
    <router-link to="/login">登录</router-link>
    <router-link to="/main">主页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',

}
</script>

<style>

</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/main',
            name: 'main',
            component: Main
        }
    ]
});

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'



Vue.use(router);
Vue.use(ElementUI);
new Vue({
  el: '#app',
  router,
  render: h => h(App)//ElementUI
});

可能遇到的问题：Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

原因：此错误来自sass-loader。semver不匹配，因为node-sass @latest为v5.0.0，而sass-loader期望值为^ 4.0.0。

解决方案：

1
2
3

npm uninstall node-sass
npm install node-sass@4.14.1
npm run dev

9. 安装axios

9.1 命令

1 2	npm install axios -S cnpm install axios -S

9.2 路由模式

hash：路径带 # 符号，如 http://localhost/#/login
history：路径不带 # 符号，如 http://localhost/login

9.3 路由钩子与异步请求

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行
参数说明
- to：路由将要跳转的路径信息
- from：路径跳转前的路径信息
- next：路由的控制参数
- next() 跳入下一个页面
- next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
- next(false) 返回原来的页面
- next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

9.4 实例

data.json

{
    "name": "weg",
    "age": "18",
    "sex": "男",
    "url":"https://www.baidu.com",
    "address": {
      "street": "文苑路",
      "city": "南京",
      "country": "中国"
    },
    "links": [
      {
        "name": "bilibili",
        "url": "https://www.bilibili.com"
      },
      {
        "name": "baidu",
        "url": "https://www.baidu.com"
      },
      {
        "name": "cqh video",
        "url": "https://www.4399.com"
      }
    ]
  }

UserList.vue

<template>
    <h1>用户列表</h1>
</template>
<script>
export default {
  name: 'UserList'

}
</script>

<style scoped>

</style>

UserProfile.vue

<template>
<!--所有的元素，必须在根节点下-->
<div>
<h1>个人信息</h1>
{{id}}

<!--{{ $route.params.id }}-->
   </div>
</template>
<script>
export default {
  props: ['id'],
  name: 'UserProfile',
  beforeRouteEnter:(to,from,next)=> {
      console.log("进入路由之前："); //加载数据
      next(vm => {
        vm.getData();//进入路由之前执行getData
      });
  },
  beforeRouteLeave:(to,from,next)=>{
       console.log("进入路由之后：");
      next();
  },
  methods: {
    getData: function() {
     this.axios({
       method: 'get',
       url: 'http://localhost:8080/static/mock/data.json'
     }).then(function(response) {
       console.log(response)
     })
    }
  }

}
</script>

<style scoped>

</style>

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main/"+this.form.username);
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">

          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <!--name传递地址，params传递参数 v-bind绑定-->
                <router-link :to="{name: 'userProfile',params: {id: 1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/userList">用户列表</router-link>
              </el-menu-item>

              <el-menu-item index="1-3">
                <!--插入的地方-->
                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
            <el-menu-item-group>
              <el-menu-item index="3-1">
               回到首页
              </el-menu-item>
              
            </el-menu-item-group>
          </el-submenu>

        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
         <span> {{ username }} </span>
        </el-header>
        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    props: ['username'],
    name: "Main"
  }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

NotFound.vue

<template>
  <div>
    <h1>404,你的页面走丢了</h1>
  </div>
</template>

<script>


export default {
  name: 'NotFound'

}
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <h1>zhu</h1>
    <router-link to="/login">登录</router-link>
    <router-link to="/main">主页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',

}
</script>

<style>

</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'
import UserProfile from '../views/user/UserProfile'
import UserList from '../views/user/UserList'
import NotFound from '../views/NotFound'
Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/main/:username',
            name: 'main',
            component: Main,
            props: true,
            //嵌套路由
            children: [
                {
                    path: '/user/userProfile/:id',
                    name: 'userProfile',
                    component: UserProfile,
                    props: true
                },
                {
                    path: '/user/userList',
                    component: UserList
                }
            ]
        },
        {
            path: '/goHome',
            redirect: '/main/kevin'
        },
        {
            path: '*',
            component: NotFound
        }
    ]
});

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);
Vue.use(router);
Vue.use(ElementUI);
new Vue({
  el: '#app',
  router,
  render: h => h(App)//ElementUI
});

10. 总结

对于前端框架有了最基础的学习，还有很多问题需要改正