新增登录、首页、数据大屏等页面

src/assets/icon/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1553666780131'); /* IE9 */
+  src: url('iconfont.eot?t=1553666780131#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1553666780131') format('woff'),
+  url('iconfont.ttf?t=1553666780131') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1553666780131#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[class^="el-icon-xj"],
+[class*=" el-icon-xj"]/*这里有空格*/
+ {
+  font-family: "iconfont" !important;
+
+  font-size: 16px;
+
+  font-style: normal;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.el-icon-xj-icon_boss:before {
+  content: "\eb90";
+}
+
+.el-icon-xj-icon-jszyw:before {
+  content: "\e626";
+}
+
+.el-icon-xj-icon-jdcyw:before {
+  content: "\e627";
+}
+
+.el-icon-xj-icon-jdhx:before {
+  content: "\e628";
+}
+
+.el-icon-xj-icon-jygl:before {
+  content: "\e629";
+}
+
+.el-icon-xj-icon-sjdp:before {
+  content: "\e62a";
+}
+
+.el-icon-xj-icon-jkyw:before {
+  content: "\e62b";
+}
+
+.el-icon-xj-icon-xtgl:before {
+  content: "\e62c";
+}
+
+.el-icon-xj-icon-wfsg:before {
+  content: "\e62d";
+}
+
+.el-icon-xj-icon-xxaq:before {
+  content: "\e62e";
+}
+
+.el-icon-xj-icon-spjkyw:before {
+  content: "\e62f";
+}
+

src/assets/less/reset.less

+/**
+ * Global Reset of all HTML Elements
+ *
+ * Resetting all of our HTML Elements ensures a smoother
+ * visual transition between browsers. If you don't believe me,
+ * try temporarily commenting out this block of code, then go
+ * and look at Mozilla versus Safari, both good browsers with
+ * a good implementation of CSS. The thing is, all browser CSS
+ * defaults are different and at the end of the day if visual
+ * consistency is what we're shooting for, then we need to
+ * make sure we're resetting all spacing elements.
+ *
+ */
+ html, body {
+    height: 100%;
+    border: 0;
+    font-family: "Helvetica-Neue", "Helvetica",'微软雅黑', Arial, sans-serif;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
+}
+
+div, span, object, iframe, img, table, caption, thead, tbody,
+tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu,
+nav, footer, header, section, summary, mark, audio, video {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code,
+del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd,
+ol, ul, li, fieldset, legend, label {
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    margin: 0;
+    padding: 0;
+}
+
+article, aside, canvas, figure, figure img, figcaption, hgroup,
+footer, header, nav, section, audio, video {
+    display: block;
+}
+
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+    caption, th, td {
+        text-align: left;
+        vertical-align: middle;
+    }
+}
+li{
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}
+a img {
+    border: 0;
+}
+
+:focus {
+    outline: 0;
+}
+*{
+    box-sizing: border-box;
+}
+textarea{
+    resize: none;
+    appearance: none;
+}
+input{
+    appearance: none;
+}
+select {
+    appearance: none;
+    background-color: #fff;
+}
+

src/components/index/digitalLargeScreen/digitalLargeScreen.less

+.hello2{
+    display: block;
+    position: relative;
+    .text{
+        font-size: 25px;
+    }
+}
\ No newline at end of file

src/components/index/digitalLargeScreen/digitalLargeScreen.ts

+// require("./test.less");
+
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import { State,
+        Getter,
+        Action,
+        Mutation,
+        namespace } from 'vuex-class';
+
+
+const test = namespace('test');
+
+@Component({})
+export default class Test extends Vue {
+  @test.Getter info ;
+  @test.Action('changeInfos') changeInfos;
+  user_Info:string='';
+
+   changeInfo() {
+     if(this.user_Info===''){
+         this.$message('请输入新的值哇哈哈哈');
+         return;
+     }
+    this.changeInfos(this.user_Info)
+  }
+  mounted () {
+    let data = {
+      userCode:'root',
+      userPwd:'25d55ad283aa400af464c76d713c07ad'
+    }
+    $utils.$getData("/login",data,(res)=>{
+      
+    })
+  }
+}

src/components/index/digitalLargeScreen/digitalLargeScreen.vue

+<template>
+  <div class="hello2">
+      <p>测试vuex状态管理的组件</p>
+      <input type="text" v-model="user_Info">
+      <el-button @click="changeInfo">按钮</el-button>
+    <span class="text" v-text="`这是子组件内引入的状态：${info}`"></span>
+  </div>
+</template>
+
+<script lang="ts" src="./digitalLargeScreen.ts"></script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+@import url("./digitalLargeScreen.less");
+
+</style>

src/components/index/index/index.less

+.hello2{
+    display: block;
+    position: relative;
+    .text{
+        font-size: 25px;
+    }
+}
\ No newline at end of file

src/components/index/index/index.ts

+// require("./test.less");
+
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import { State,
+        Getter,
+        Action,
+        Mutation,
+        namespace } from 'vuex-class';
+
+
+const test = namespace('test');
+
+@Component({})
+export default class Test extends Vue {
+  @test.Getter info ;
+  @test.Action('changeInfos') changeInfos;
+  user_Info:string='';
+
+   changeInfo() {
+     if(this.user_Info===''){
+         this.$message('请输入新的值哇哈哈哈');
+         return;
+     }
+    this.changeInfos(this.user_Info)
+  }
+  mounted () {
+    let data = {
+      userCode:'root',
+      userPwd:'25d55ad283aa400af464c76d713c07ad'
+    }
+    $utils.$getData("/login",data,(res)=>{
+      
+    })
+  }
+}

src/components/index/index/index.vue

+<template>
+  <div class="hello2">
+      <p>首页</p>
+      <input type="text" v-model="user_Info">
+      <el-button @click="changeInfo">按钮</el-button>
+    <span class="text" v-text="`这是子组件内引入的状态：${info}`"></span>
+  </div>
+</template>
+
+<script lang="ts" src="./index.ts"></script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+@import url("./index.less");
+
+</style>

src/components/index/login/login.less

+.hello2{
+    display: block;
+    position: relative;
+    .icons{
+        font-size: 90px;
+        color: #fff;
+    }
+    .text{
+        font-size: 25px;
+    }
+}
\ No newline at end of file

src/components/index/login/login.ts

+// require("./test.less");
+
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import { State,
+        Getter,
+        Action,
+        Mutation,
+        namespace } from 'vuex-class';
+
+
+const test = namespace('test');
+
+@Component({})
+export default class Test extends Vue {
+  @test.Getter info ;
+  @test.Action('changeInfos') changeInfos;
+  user_Info:string='';
+
+   changeInfo() {
+     if(this.user_Info===''){
+         this.$message('请输入新的值哇哈哈哈');
+         return;
+     }
+    this.changeInfos(this.user_Info)
+  }
+  mounted () {
+    let data = {
+      userCode:'root',
+      userPwd:'25d55ad283aa400af464c76d713c07ad'
+    }
+    $utils.$getData("/login",data,(res)=>{
+      
+    })
+  }
+}

src/components/index/login/login.vue

+<template>
+  <div class="hello2">
+    <i class="el-icon-xj-icon-jszyw icons"></i>
+      <p>测试vuex状态管理的组件</p>
+      <input type="text" v-model="user_Info">
+      <el-button @click="changeInfo">按钮</el-button>
+    <span class="text" v-text="`这是子组件内引入的状态：${info}`"></span>
+  </div>
+</template>
+
+<script lang="ts" src="./login.ts"></script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+@import url("./login.less");
+</style>

src/components/test/test.less

@@ -4,4 +4,8 @@
     .text{
         font-size: 25px;
     }
+    i{
+        font-size: 20px;
+        color: royalblue;
+    }
 }
\ No newline at end of file

src/components/test/testVuex.vue

 <template>
   <div class="hello2">
+      <i class="el-icon-xj-icon-spjkyw icons"></i>
       <p>测试vuex状态管理的组件</p>
       <input type="text" v-model="user_Info">
       <el-button @click="changeInfo">按钮</el-button>

src/main.ts

@@ -7,11 +7,18 @@ import store from './store'
 
 Vue.config.productionTip = false
 
+//引入公用css文件
+import './assets/less/reset.less';
+
 //引入element-ui
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI);
 
+// 引入iconfont图标库
+import './assets/icon/iconfont.css';
+
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/router/index.ts

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
+// 登录
+import Login from '@/components/index/login/login.vue'
+// 首页
+import Index from '@/components/index/index/index.vue'
+// 数据大屏
+import DigitalLargeScreen from '@/components/index/digitalLargeScreen/digitalLargeScreen.vue'
+
 
 Vue.use(Router)
 
@@ -8,8 +15,24 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'Hello',
-      component: HelloWorld
-    }
+      name: '默认页面',
+      redirect:'/login'   //重定向
+      // component: Login
+    },
+    {
+      path: '/login',
+      name: '登录',
+      component: Login
+    },
+    {
+      path:'/index',
+      name:'首页',
+      component:Index
+    },
+    {
+      path:'/digitalLargeScreen',
+      name:'数字大屏',
+      component:DigitalLargeScreen
+    },
   ]
 })