Vue入门

一、第一个vue程序

1. 什么是MVVM

​ MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。

2. 为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：

低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

3.构建一个Vue程序

使用IDEA，在settings中的plugs中下载Vue.js插件

4.导入vue.js在线CDN

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

5.渲染

<div id="app">  {{ message }} </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

​ Hello Vue!

二、Vue基本语法

1.vue-bind

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

除了文本插值，我们还可以像这样来绑定元素 attribute：

<div id="app">
    <span v-bind:title="message"/>
    鼠标悬停可查看绑定的信息！
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue!",
        }
    });
</script>

​ 鼠标悬停可查看绑定的消息！

v-bind被称为指令。指令带有前缀 v-它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 app.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

2.条件、循环、便利

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type=='B'">b</h1>
    <h1 v-else>c</h1>
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    </li>
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue!",
            type:"A",
            items: [
                {message: 'vekzjj'},
                {message: 'jzx'}
            ]
        }
    });
</script>

​ A

• vekzjj–0
• jzx–1

2.v-on 事件绑定

<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>


<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            message :"vekzjj"
        },
        methods :{
            //方法必须定义在Vue的Method对象中,通过v-on去绑定事件
            sayHi: function (){
                alert(this.message);
            }
        }
    });
</script>

​ alert(“vekzjj”)

三、双向绑定 v-model

1. 什么是双向绑定

Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

就像是在输入框中输入数据，下面的元素值显示出来

2. 为什么要实现数据的双向绑定

在Vue.js 中，如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。

3. 在表单中使用双向数据绑定

你可以用v-model指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明

<div id="app">
    输入的文本：<input type="text" v-model="message">{{message}}
<!--    复选框-->
    <p>性别：</p>
    <input type="radio" name="sex" value="男" v-model="vekzjj">男
    <input type="radio" name="sex" value="女" v-model="vekzjj">女
    <p>
        选中了：{{vekzjj}}
    </p>
<!--    下拉框：-->
    <select v-model="jzx">
        <option>=请选择=</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
</div>


<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"",
            vekzjj:"",
            jzx:'B'
        }
    });
</script>

四、Vue组件

<div id="app">

<vekzjj v-for="item in items" v-bind:zjj="item"></vekzjj>

</div>


<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    Vue.component("vekzjj",{
        props: ['zjj'],
        template: '<li>{{zjj}}</li>'
    });
    var vm = new Vue({
        el:"#app",
        data:{
            items:["Java","Linux","前端"]
        }

    });
</script>

• Java
• Linux
• 前端

五、Axios通信

1. 什么是Axios

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

从浏览器中创建XMLHttpRequests

从node.js创建http请求

支持Promise API [JS中链式编程]

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF (跨站请求伪造)

GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/

2. 为什么要使用Axios

由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !

demo：

创建一个data.json文件：

{
  "name": "vekzjj",
  "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"
    }
  ]
}

<body>
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>

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


<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            info:{
                name:null,
                address:{
                    street:null,
                    city:null,
                    country:null
                },
                links:[
                    {
                        name: null,
                        url:null
                    },
                    {
                        name:null,
                        url:null
                    }
                ]
            }
        },
        mounted(){//钩子函数
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>
</body>

vekzjj

南京

点击//点击后可以跳转到哔哩哔哩网页

六. Vue计算属性（computed）

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！

<body>
<div id="app">
    <p>methods==>{{currentTime1()}}</p>
    <p>computed==>{{currentTime2}}</p>
    <p>{{message}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"Hello Vue!"
        },
        methods: {
            currentTime1:function (){
                return Date.now().toString();
            }
        },
        computed:{//计算属性：methods，computed中的方法名不能重名
            currentTime2:function (){
                return Date.now().toString();
            }
        }
    });
</script>

</body>

methods==>1651210572972

computed==>1651210572972

Hello Vue!

七、内容分发,插槽 （slot）

<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    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>{{item}}</li>',
        }
    });
    var vm = new Vue({
        el: "#app",
        data:{
            title:"学习",
            todoItems:['Java','Linux','Python']
        },   
    });
</script>
</body>

​ 学习

• Java
• Linux
• Python

​

八、自定义事件内容分发

通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;

vue.component组件不能直接删除vue实例下的属性，前端可以通过methods里的自定义方法通过绑定元素删除vue的属性，组件通过this.emit()分发调用前端的自定义方法删除vue实例的元素

<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    v-bind:item="item" v-bind:index="index" v-on:myremove="removeItems(index)"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    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 v-on:click="remove">删除</button></li>',
        methods:{
            remove:function (index){
                this.$emit('myremove',index)
            }
        }
    });
    var vm = new Vue({
        el: "#app",

        data:{
            title:"学习",
            todoItems:['Java','Linux','Python']
        },
        methods:{
            removeItems:function (index){
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>
</body>

​ 学习

• 0–Java 删除
• 1–Linux 删除
• 2–Python 删除

九、第一个vue-cli项目

1. 什么是vue-cli

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;

预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;
主要功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

2. 需要的环境

Node.js : http://nodejs.cn/download/

安装就无脑下一步就好,安装在自己的环境目录下
安装Node.js 淘宝镜像加速器（cnpm）下载会快很多
npm install cnpm -g
安装的位置:C:\Users\Administrator\AppData\Roaming\npm

Git : https://git-scm.com/downloads
镜像:https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功:

cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

3. 安装vue-cli

#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list

这里vue list显示连接超时可能是网的问题！！！

4. 第一个 vue-cli 应用程序

自己选择将所有的Vue项目放在什么地方，并建立一个总的Vue文件夹

然后使用cmd进入你这个总的Vue文件夹输入vue init webpack myvue命令

这里基于webpack模板使用管理员cmd建立vue项目程序

vue init webpack myvue
## 这里的myvue是你想起的vue的项目名字，自己起即可

这里回车后会下载webpack的模板

可能出现的问题：

connect 超时！

解决方法：
1.找到本机的hosts文件 应该在这个位置：C:\Windows\System32\drivers\etc
2.在hosts文件后面添加
140.82.112.3   github.com      
199.232.69.194   github.global.ssl.fastly.net
如果保存不了说明需要管理员的全限！这里我是使用cmd将hosts文件改成了可读写：
cd /d C:\Windows\System32\drivers\etc
attrib hosts -R
这两行输入后回车，在进行添加即可。
这个时候可能还会超时，换个热点或者网络多试几次就可以了！

然后会出现这个页面：全部选择no即可，自己初始化！

之后进行初始化运行

cd myvue
npm install
npm run dev

十、Webpack

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

npm install webpack -g
npm install webpack-cli -g

测试安装成功: 输入以下命令有版本号输出即为安装成功

webpack -v

1. 什么是Webpack

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
 Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;
 伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用) ，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
 前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

2. 使用Webpack

1. ​ 这里再你之前建的装所有的Vue项目的文件夹中可以发现一个myvue的文件夹，这个是刚才使用vue init webpack myvue创建的一个vue项目，这里用同样的方式再总的Vue文件夹下再初始化一个webpack-study vue文件：vue init webpack webpack-study。然后使用idea打开这个webpack-study文件夹

2. 建立一个modules包，建hello.js和main.js

   //main.js：main.js 请求hello.js 调用sayHi()方法
   var hello = require("./hello");
   hello.sayHi();
   hello.sayHi2();
   

   //hello.js：hello.js 暴露接口 相当于Java中的类
   //暴露一个方法
   exports.sayHi = function () {
       document.write("<h1>Hello WEBPACK</h1>");
   };
   exports.sayHi2 = function () {
       document.write("<h1>Hello VUE</h1>");
   }
   

3. 在主目录创建webpack-config.js , webpack-config.js 这个相当于webpack的配置文件

   //webpack.config.js:
   module.exports = {
     entry:'./modules/main.js',
     output:{
         filename:"./js/bundle.js"
     }
   };
   //enrty请求main.js的文件
   
   //output是输出的位置和名字
   

4. 在idea命令台输入webpack命令（idea要设置管理员启动）

5. 完成上述操作之后会在主目录生成一个dist文件 生成的js文件夹路径为/ dist/js/bundle.js

6. 在主目录创建index.html 导入bundle.js

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
   </head>
   <body>
   <script src="dist/js/bundle.js"></script>
   
   </body>
   </html>
   

打开index.html后页面：

Hello WEBPACK

Hello VUE

十一、vue-router路由

Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于Vue.js过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的CSS class的链接

HTML5历史模式或hash模式，在IE9中自动降级

自定义的滚动条行为

1. 安装

这里我是用之前初始化的myvue 这个vue项目去测试的，你也可以在初始化一个还是使用vue webpack init xxx命令。之后需要使用管理员cmd进入myvue这个文件夹，如果执行安装路由命令

npm install vue-router --save-dev

【注意】：这里说明，如果使用npm安装不上的，就用淘宝镜像cnpm安装 后面所有的安装的东西都一样

2. vue-router demo实例

1. 使用idea打开myvue项目
2. 删除src/assets中的logo和component中的helloworld组件
3. 总结一句话：原来它用来展示这是一个vue项目的自带的东西都不要，我们自己去定义！

• 这里首先在components包下定义三个我们自己用于测试的组件：这里直接右键那个包然后new 一个vue component就行

  Content.vue
  Main.vue
  MyContent.vue
  

  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>
  

  MyContent.vue

  <template>
  <h1>I love you</h1>
  </template>
  <script>
  export default {
    name: "MyContent"
  }
  </script>
  <style scoped>
  </style>
  

• 新建一个router包并建一个index.js用来编写路由配置：

  index.js：

  import Vue from 'vue'
  import VueRouter from "vue-router";
  import Content from "../components/Content";
  import Main from "../components/Main";
  import MyContent from "../components/MyContent";
  //安装路由
  Vue.use(VueRouter);
  
  //配置导出路由
  export default new VueRouter({
    routes:[
      {
        //路由路径
        path:'/content',
        name:'content',
        //要跳转的组件
        component:Content
      },
      {
        //路由路径
        path:'/main',
        name:'main',
        //要跳转的组件
        component:Main
      },
      {
        //路由路径
        path:'/mycontent',
        name:'MyContent',
        //要跳转的组件
        component:MyContent
      }
    ]
  });
  

• 在App.vue中需要调用我们的路由

  App.vue：

  <template>
    <div id="app">
      <h1>Vue-Router</h1>
      <router-link to="/main">首页</router-link>
      <router-link to="/content">内容页</router-link>
      <router-link to="/mycontent">Me</router-link>
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  
  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中把路由配置进去

  main.js：

  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/>'
  })
  

• 将idea设成管理员模式在控制台输入npm run dev启动，打开8080端口查看！

这里点击每一个都可以实现跳转，有点想a标签的功能，不过这地方是异步的！

注意这里很多地方都需要import导入！！！

十二、vue + ElementUI

这里还是跟上面一样在总的Vue文件夹中使用cmd vue init webpack hello-vue命令创建hello-vue项目

初始化完毕后，我们需要安装依赖：

进入工程目录
cd hello-vue
安装 vue-router
npm install vue-router --save-dev
安装 element-ui
npm i element-ui -S
安装依赖
npm install
安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
启动测试
npm run dev

这里说明：node-sass或者sass-loader安装失败，可以换成npm再试一试，如果还不行，就换个网络，还可能是node.js版本太高的原因，我这里踩过坑，我最后将node.js的版本降到了14，node-sass用的@4.0.0版本。

Npm命令解释

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

• 成功后，使用idea打开这个文件夹，将assets和components包下的东西都删了，并且删掉App.vue中不需要的东西！

• 创建router和views包

• 先编写视图，在views包下创建Login.vue和Main.vue

  **Login.vue:**这里的代码是ElementUI中生成的

  <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-routers 路由到指定页面，该方式称之为编程式导航
            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>
  

• 编写路由配置！在router包下创建index.js

  import Vue from 'vue'
  import Router from 'vue-router'
  import Main from "../views/Main";
  import Login from "../views/Login";
  Vue.use(Router);
  
  export default new Router({
    routes:[
      {
        path:'/main',
        component:Main,
      },
      {
        path:'/login',
        component:Login
      }
    ]
  });
  

• 编写App.vue

  <template>
    <div id="app">
      <router-link to="/login"></router-link>
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'App'
  
  }
  </script>
  

• 在主入口main.js导入相关依赖和路由

  import Vue from 'vue'
  import App from './App'
  import router from './router'
  import Element from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  
  
  Vue.use(router);
  Vue.use(Element);
  
  new Vue({
    el: '#app',
    router,
    render:h=> h(App)
  })
  

• 在控制台Terminal中执行npm run dev命令