前言

整理本篇博文的目的如下：

在使用中学习、掌握vue语法，能修改、实现简单的vue操作。

监控项目中用的是ElementUI，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

• Element UI是基于Vue 2.0的；
• Element UI 提供一组组件；
• Element UI 提供组件的参考实例, 直接复制。

即并非原生的vue语法，用起来更加方便。

通过功能点掌握vue使用的主要元素：分成如下两部分去记忆：

• <template>标签下，是页面展示信息；
• <script>标签下，是一些函数、数据绑定等信息；
• <style>中都是统一引入的样式，不再说。

这次实现执行结果查询功能包含：

1、创建一个页面，构建页面展示元素的标签：查询条件（el-form）、table元素（el-table）、分页显示（利用组件Pagination，并在request.js中添加拦截器，设置分页参数）。

2、vue常用的主要语法如下：

1. router-路由；
2. components-组件；（组件及自定义组件，v-model等语法实现数据的传递与绑定；用到了分页组件）
3. data-数据；
4. filters-过滤器；（用到了日期格式化过滤器、金额格式化过滤器、自定义的过滤器）
5. vue的生命周期；（created等函数，用到了beforeCreate、created）
6. method；
7. watch-监听；

3、具体功能：

• 菜单样式调整：vue项目启动类入口，引入样式，了解掌握路由知识-router（设置菜单及子菜单），编写配置文件及api调用后台项目api。
• 分页查询：method（查询等方法）、components（分页组件使用）、beforeCreate及created周期函数（在vue进行实例化时，动态获取字段信息，并通过过滤器filters将代码映射为中文）、data（组织入参等数据信息）、在request.js中编写拦截器设置分页属性。
• 通过超链接跳转到外部项目。

下面根据前言中的几个点进行详细说明。

一、vue的项目入口、配置信息

1.1项目创建

关于vue项目的搭建，及其需要的开发环境，在vue基础入门中有说明，具体的步骤及详细了解也可以参看链接：https://blog.csdn.net/muzidigbig/article/details/80490884

这里只简单介绍项目的目录结构。

1.1.1通过npm的方式创建vue项目（参看该链接的vue.js的第三种安装方式）

1.1.2项目入口及配置

监控项目用的是elementUI框架，参看如下链接：https://yezonggang.blog.csdn.net/article/details/109313711

了解项目结构及打包build原理。

1.1.3启动

介绍一下目录及其作用：

     build：最终发布的代码的存放位置。

     config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

     node_modules：npm 加载的项目所需要的各种依赖模块。

     src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

             assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名)，如logo等

             components:目录里放的是一个个的组件文件

             router/index.js：配置路由的地方

             App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的<router-view/>必不可少。

             main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。

     static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。

     test：初始测试目录，可删除

      .XXXX文件：配置文件。

     index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

     package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）

     package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）

     README.md：项目的说明文件。

     webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。

     .babelrc:是检测es6语法的配置文件，例：适配哪些浏览器的限制

     .gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

     .postcssrc.js:前缀的配置 （css转化的配置）

     .editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格...（建议定义这个规范）

     .eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

     .eslintignore:忽略eslint对项目某些文件的语法规则的检查

    这就是整个项目的目录结构，其中，我们主要在src目录中做修改（模块化开发）。

通过上述知识点，我们知道main.js是项目的入口。监控项目的入口，也是这个js文件。如下：

/*
 * XXXX web template 入口文件
 * { xxxx} XXXX公共组件
 * { ./icons } 全局svg图标
 * { filters } 全局vue自定义过滤
 */
import "babel-polyfill";
import Vue from "vue";
import Element from "element-ui";
import App from "./App";
import store from "./store";
import router from "./router";
import { showLoading, hideLoading } from '@/utils/loading';
import "./icons"; // icon
import "./permission"; // permission control
import * as filters from "./filters"; // global filters
// picc components
import "web-plugin/common/theme/index.css";
import xxxx from "web-plugin";
import "web-plugin/common/xxxx.css";
import "@/styles/index.scss";

// i18n languages
import i18n from "@/lang";
// 引入vue-quill-editor富文本编辑器
import VueQuillEditor from "vue-quill-editor";

import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
import echarts from "echarts";
Vue.prototype.$echarts = echarts; // eslint-disable-line no-undef
Vue.prototype.showLoading = showLoading;
Vue.prototype.hideLoading = hideLoading;
Vue.use(VueQuillEditor /* { default global options } */); // eslint-disable-line no-undef
Vue.use(Element);
Vue.use(xxxx);

Object.keys(filters).forEach((key) => {
    Vue.filter(key, filters[key]); // eslint-disable-line no-undef
});
Vue.config.productionTip = false; // eslint-disable-line no-undef
/* eslint-disable */
new Vue({
    // eslint-disable-line no-undef
    el: "#app",
    router,
    store,
    i18n,
    render: (h) => h(App)
});

1.1.4在这里，还引入了权限控制permission.js。

1.1.5src路径下layout中是布局设置。通过在路由中引入，设置菜单的样式。

二、vue的菜单、路由设置

三、vue的组件

四、vue的生命周期

参看链接：https://www.jianshu.com/p/410b6099be69

五、过滤器

六、方法

七、监听

八、下载

九、调试