添加模板

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

README.md

@@ -1,3 +1,611 @@
-# web-admin-tools-revit
+# 前端团队代码规范
 
-后台管理系统模板-revit
+## 命名规范
+全部采取小写方式，以下划线分隔。
+
+例： 
+```
+my_project_name
+```
+
+### 目录命名
+参照项目命名规则；
+
+有复数结构时，要采用复数命名法。
+
+例：
+```
+scripts, styles, images, data_models
+```
+
+### JS文件命名
+#### 参照项目命名规则。
+
+例：
+```
+account_model.js
+```
+
+CSS, SCSS文件命名
+#### 参照项目命名规则。
+
+例：
+```
+retina_sprites.scss
+```
+
+#### HTML文件命名
+参照项目命名规则。
+
+例：
+```
+error_report.html
+```
+
+## DOM规范
+
+### 属性顺序
+
+属性应该按照特定的顺序出现以保证易读性;
+
+- <code>class</code>
+- <code>id</code>
+- <code>name</code>
+- <code>data-*</code>
+- <code>src</code> <code>for</code> <code>type</code> <code>href</code> <code>value</code> <code>max-length</code> <code>max</code> <code>min</code> <code>pattern</code> 
+- <code>placeholder</code> <code>title</code> <code>alt</code>
+- <code>aria-*</code> <code>role</code>
+- <code>required</code> <code>readonly</code> <code>disabled</code>
+
+class是为高可复用组件设计的，所以应处在第一位；
+
+id更加具体且应该尽量少使用，所以将它放在第二位。
+
+````
+<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
+
+<input class="form-control" type="text">
+
+<img src="..." alt="...">
+
+````
+
+
+## css,scss
+
+### 空格
+以下几种情况不需要空格：
+
+- 属性名后
+- 多个规则的分隔符','前
+- !important '!'后
+- 属性值中'('后和')'前
+- 行末不要有多余的空格
+  
+以下几种情况需要空格：
+
+- 属性值前
+- 选择器'>', '+', '~'前后
+- '{'前
+- !important '!'前
+- @else 前后
+- 属性值中的','后
+- 注释'/'后和'/'前
+  
+```
+/* not good */
+.element {
+    color :red! important;
+    background-color: rgba(0,0,0,.5);
+}
+
+/* good */
+.element {
+    color: red !important;
+    background-color: rgba(0, 0, 0, .5);
+}
+
+/* not good */
+.element ,
+.dialog{
+    ...
+}
+
+/* good */
+.element,
+.dialog {
+
+}
+
+/* not good */
+.element>.dialog{
+    ...
+}
+
+/* good */
+.element > .dialog{
+    ...
+}
+
+/* not good */
+.element{
+    ...
+}
+
+/* good */
+.element {
+    ...
+}
+
+/* not good */
+@if{
+    ...
+}@else{
+    ...
+}
+
+/* good */
+@if {
+    ...
+} @else {
+    ...
+}
+```
+
+### 命名
+- 类名使用小写字母，以中划线分隔
+- id采用驼峰式命名
+- scss中的变量、函数、混合、placeholder采用驼峰式命名
+
+```
+/* class */
+.element-content {
+    ...
+}
+
+/* id */
+#myDialog {
+    ...
+}
+
+/* 变量 */
+$colorBlack: #000;
+
+/* 函数 */
+@function pxToRem($px) {
+    ...
+}
+
+/* 混合 */
+@mixin centerBlock {
+    ...
+}
+
+/* placeholder */
+%myDialog {
+    ...
+}
+```
+
+## JavaScript
+
+### 空行
+
+以下几种情况需要空行：
+
+- 变量声明后（当变量声明在代码块的最后一行时，则无需空行）
+- 注释前（当注释在代码块的第一行时，则无需空行）
+- 代码块后（在函数调用、数组、对象中则无需空行）
+- 文件最后保留一个空行
+
+```
+// need blank line after variable declaration
+var x = 1;
+
+// not need blank line when variable declaration is last expression in the current block
+if (x >= 1) {
+    var y = x + 1;
+}
+
+var a = 2;
+
+// need blank line before line comment
+a++;
+
+function b() {
+    // not need blank line when comment is first line of block
+    return a;
+}
+
+// need blank line after blocks
+for (var i = 0; i < 2; i++) {
+    if (true) {
+        return false;
+    }
+
+    continue;
+}
+
+var obj = {
+    foo: function() {
+        return 1;
+    },
+
+    bar: function() {
+        return 2;
+    }
+};
+
+// not need blank line when in argument list, array, object
+func(
+    2,
+    function() {
+        a++;
+    },
+    3
+);
+
+var foo = [
+    2,
+    function() {
+        a++;
+    },
+    3
+];
+
+var foo = {
+    a: 2,
+    b: function() {
+        a++;
+    },
+    c: 3
+};
+```
+
+### 文档注释
+
+各类标签@param, @method等；
+
+建议在以下情况下使用：
+
+- 所有常量
+- 所有函数
+- 所有类
+
+```
+/**
+ * @func
+ * @desc 一个带参数的函数
+ * @param {string} a - 参数a
+ * @param {number} b=1 - 参数b默认值为1
+ * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
+ * @param {object} d - 参数d为一个对象
+ * @param {string} d.e - 参数d的e属性
+ * @param {string} d.f - 参数d的f属性
+ * @param {object[]} g - 参数g为一个对象数组
+ * @param {string} g.h - 参数g数组中一项的h属性
+ * @param {string} g.i - 参数g数组中一项的i属性
+ * @param {string} [j] - 参数j是一个可选参数
+ */
+function foo(a, b, c, d, g, j) {
+    ...
+}
+```
+
+### 引号
+
+最外层统一使用单引号。
+
+```
+// not good
+var x = "test";
+
+// good
+var y = 'foo',
+    z = '<div id="test"></div>';
+```
+
+### 变量命名
+
+- 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
+- 'ID'在变量名中全大写
+- 'URL'在变量名中全大写
+- 'Android'在变量名中大写第一个字母
+- 'iOS'在变量名中小写第一个，大写后两个字母
+- 常量全大写，用下划线连接
+- 构造函数，大写第一个字母
+- jquery对象必须以'$'开头命名
+
+```
+var thisIsMyName;
+
+var goodID;
+
+var reportURL;
+
+var AndroidVersion;
+
+var iOSVersion;
+
+var MAX_COUNT = 10;
+
+function Person(name) {
+    this.name = name;
+}
+
+// not good
+var body = $('body');
+
+// good
+var $body = $('body');
+```
+
+### 变量声明
+
+一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明。
+
+```
+function doSomethingWithItems(items) {
+    // use one var
+    var value = 10,
+        result = value + 10,
+        i,
+        len;
+
+    for (i = 0, len = items.length; i < len; i++) {
+        result += 10;
+    }
+}
+```
+
+### 函数
+
+无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格；
+
+函数调用括号前不需要空格；
+
+立即执行函数外必须包一层括号；
+
+不要给inline function命名；
+
+参数之间用', '分隔，注意逗号后有一个空格。
+
+```
+// no space before '(', but one space before'{'
+var doSomething = function(item) {
+    // do something
+};
+
+function doSomething(item) {
+    // do something
+}
+
+// not good
+doSomething (item);
+
+// good
+doSomething(item);
+
+// requires parentheses around immediately invoked function expressions
+(function() {
+    return 1;
+})();
+
+// not good
+[1, 2].forEach(function x() {
+    ...
+});
+
+// good
+[1, 2].forEach(function() {
+    ...
+});
+
+// not good
+var a = [1, 2, function a() {
+    ...
+}];
+
+// good
+var a = [1, 2, function() {
+    ...
+}];
+
+// use ', ' between function parameters
+var doSomething = function(a, b, c) {
+    // do something
+};
+```
+
+### 数组、对象
+
+对象属性名不需要加引号；
+
+对象以缩进的形式书写，不要写在一行；
+
+数组、对象最后不要有逗号。
+
+```
+// not good
+var a = {
+    'b': 1
+};
+
+var a = {b: 1};
+
+var a = {
+    b: 1,
+    c: 2,
+};
+
+// good
+var a = {
+    b: 1,
+    c: 2
+};
+```
+
+### 括号
+
+下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else,for, while, do, switch, try, catch, finally, with。
+
+```
+// not good
+if (condition)
+    doSomething();
+
+// good
+if (condition) {
+    doSomething();
+}
+```
+
+### jshint
+用'===', '!=='代替'==', '!='；
+
+for-in里一定要有hasOwnProperty的判断；
+
+不要在内置对象的原型上添加方法，如Array, Date；
+
+不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
+
+变量不要先使用后声明；
+
+不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；
+
+不要在同个作用域下声明同名变量；
+
+不要在一些不需要的地方加括号，例：delete(a.b)；
+
+不要使用未声明的变量（全局变量需要加到.jshintrc文件的globals属性里面）；
+
+不要声明了变量却不使用；
+
+不要在应该做比较的地方做赋值；
+
+debugger不要出现在提交的代码里；
+
+数组中不要存在空元素；
+
+不要在循环内部声明函数；
+
+不要像这样使用构造函数，例：new function () { ... }, new Object；
+
+```
+// not good
+if (a == 1) {
+    a++;
+}
+
+// good
+if (a === 1) {
+    a++;
+}
+
+// good
+for (key in obj) {
+    if (obj.hasOwnProperty(key)) {
+        // be sure that obj[key] belongs to the object and was not inherited
+        console.log(obj[key]);
+    }
+}
+
+// not good
+Array.prototype.count = function(value) {
+    return 4;
+};
+
+// not good
+var x = 1;
+
+function test() {
+    if (true) {
+        var x = 0;
+    }
+
+    x += 1;
+}
+
+// not good
+function test() {
+    console.log(x);
+
+    var x = 1;
+}
+
+// not good
+new Person();
+
+// good
+var person = new Person();
+
+// not good
+delete(obj.attr);
+
+// good
+delete obj.attr;
+
+// not good
+if (a = 10) {
+    a++;
+}
+
+// not good
+var a = [1, , , 2, 3];
+
+// not good
+var nums = [];
+
+for (var i = 0; i < 10; i++) {
+    (function(i) {
+        nums[i] = function(j) {
+            return i + j;
+        };
+    }(i));
+}
+
+// not good
+var singleton = new function() {
+    var privateVar;
+
+    this.publicMethod = function() {
+        privateVar = 1;
+    };
+
+    this.publicMethod2 = function() {
+        privateVar = 2;
+    };
+};
+
+```
+
+
+# point-standard
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    presets: [
+        '@vue/app'
+    ],
+    plugins: [
+        [
+            "component",
+            {
+                "libraryName": "element-ui",
+                "styleLibraryName": "theme-chalk"
+            }
+        ]
+    ]
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "point-standard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "element-ui": "^2.5.4",
+    "vue": "^2.5.22",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-service": "^3.4.0",
+    "babel-plugin-component": "^1.1.1",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.5.21"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>point-standard</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but point-standard doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,10 @@
+<template>
+  <div id="app">
+    <keep-alive>
+    <router-view/>
+    </keep-alive>
+  </div>
+</template>
+
+<style lang="scss">
+</style>

src/element_config/index.js

@@ -0,0 +1,22 @@
+import Vue from "vue"
+import {
+    Loading,
+    MessageBox,
+    Message,
+    Notification,
+    Button,
+    Select,
+    Input
+} from 'element-ui';
+Vue.use(Button)
+Vue.use(Input)
+Vue.use(Select)
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;

src/fetch/fetch.js

@@ -0,0 +1,36 @@
+import axios from "axios";
+
+//axios 配置
+
+const instance = axios.create({
+    headers: {
+        "Content-Type": "application/json"
+    },
+    timeout: 30000,
+    baseURL: "", //接口请求地址
+})
+
+instance.interceptors.request.use(config => {
+    // 在发送请求之前做些什么，比如传token
+    const token = localStorage.getItem('token');
+    if (token) {
+        config.headers.Authorization = token;
+    }
+    //config.data = JSON.stringify(config.data);
+    return config
+}, error => {
+    console.log(error)
+    return Promise.reject(error)
+})
+
+// 添加相应拦截器
+instance.interceptors.response.use(response => {
+    //对相应的数据做处理
+    const res = response;
+    return res;
+}, error => {
+    console.error(error)
+    return Promise.reject(error)
+})
+
+export default instance

src/fetch/index.js

@@ -0,0 +1,7 @@
+import {get, post, request } from './request'
+
+let dataForm = '/data-platform-3'
+
+export function getTest(success) {
+    return get(`${dataForm}/dict/query/equipment_family`, {}, success)
+}

src/fetch/request.js

@@ -0,0 +1,87 @@
+import instance from "./fetch"
+
+import { Message } from 'element-ui';
+import router from '@/router/index.js'
+
+function successResponse(response, success, failed) {
+    let res = response.data;
+    let result = res.result || res.Result;
+    if (result == "success") {
+        success(res)
+    } else if (result == "failure") {
+        let msg = res.ResultMsg || res.message || res.Message || res.resultMsg
+        Message.error({ message: msg })
+    } else {
+        router.replace('/login')
+    }
+}
+
+function errorResponse(response, err) {
+    let json = JSON.stringify(err),
+        lastData = JSON.parse(json)
+    console.log(err)
+    if (lastData.hasOwnProperty('config')) {
+        Message.error({ message: '接口：' + lastData.config.url + '请求错误' })
+    } else {
+        Message.error({ message: '请求错误:' + err });
+    }
+}
+
+
+/**
+ * post 请求方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+export function post(url, data = {}, success) {
+    instance.post(url, data).then(response => {
+        //对接口错误码做处理
+        successResponse(response, success)
+    }, err => {
+        errorResponse({}, err)
+    })
+}
+
+
+/**
+ * get 请求方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+export function get(url, data = {}, success) {
+    instance.get(url, {
+            params: data
+        })
+        .then(response => {
+            successResponse(response, success)
+        })
+        .catch(err => {
+            errorResponse({}, err)
+        })
+}
+
+/**
+ * 封装所有请求
+ * @param methed
+ * @param url
+ * @param data 
+ * @param headers
+ * @returns {Promise}
+ */
+export function request(methed, url, data = {}, headers, success) {
+    instance({
+            method: methed || 'post',
+            url: url,
+            data: methed === 'get' ? { params: data } : data,
+            headers: headers || { 'Content-Type': 'application/json' },
+        })
+        .then(response => {
+            //对接口错误码做处理
+            successResponse(response, success)
+        })
+        .catch(err => {
+            errorResponse(response, err)
+        })
+}

src/main.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router/index'
+import store from './store/index'
+
+//element-ui引入config
+import "./element_config"
+
+Vue.config.productionTip = false
+
+new Vue({
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#app')

src/router/beforEach.js

@@ -0,0 +1,17 @@
+import router from '@/router'
+import store from '@/store'
+import { Message } from 'element-ui'
+import { tools } from '@/utils/tools'
+
+//不重定向的白名单
+const whiteList = ['/login']
+
+router.beforeEach((to, from, next) => {
+    if (tools.getCookie()) {
+        if (to.path == "login") {
+            next({ path: "/" })
+        } else {
+            if (store.getters.)
+        }
+    }
+})

src/router/index.js

@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './../views/Home.vue'
+import notFind from "./../views/404"
+
+Vue.use(Router)
+
+export default new Router({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes: [{
+            path: '/',
+            name: 'home',
+            component: Home
+        },
+        {
+            path: '/notFind',
+            name: 'notFind',
+            component: notFind
+        },
+        {
+            path: '/about',
+            name: 'about',
+            // route level code-splitting
+            // this generates a separate chunk (about.[hash].js) for this route
+            // which is lazy-loaded when the route is visited.
+            component: () =>
+                import ('./../views/About.vue')
+        },
+        {
+            path: '/login',
+            name: 'login',
+            component: () =>
+                import ('./../views/login')
+        },
+    ]
+})

src/store/index.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  }
+})

src/utils/tools.js

@@ -0,0 +1,23 @@
+const tools = {}
+
+//存储cookie
+tools.setCookie = (name, value) => {
+    var Days = 30; /* 设置cookie保存时间 */
+    var exp = new Date();
+    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
+    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
+}
+
+
+//获取cookie
+tools.getCookie = name => {
+    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+    if (arr = document.cookie.match(reg)) {
+        return unescape(arr[2]);
+    } else {
+        /* 如果没有参数，那么就获取本域下的所有cookie */
+        return document.cookie;
+    }
+}
+
+export default tools

src/views/404/index.vue

@@ -0,0 +1,343 @@
+<template>
+    <div class="saga-container">
+        <div class="saga-error404page">
+            <div class="saga-newcharacter404">
+                <div class="saga-chair404"></div>
+                <div class="saga-leftshoe404"></div>
+                <div class="saga-rightshoe404"></div>
+                <div class="saga-legs404"></div>
+                <div class="saga-torso404">
+                    <div class="saga-body404"></div>
+                    <div class="saga-leftarm404"></div>
+                    <div class="saga-rightarm404"></div>
+                    <div class="saga-head404">
+                        <div class="saga-eyes404"></div>
+                    </div>
+                </div>
+                <div class="saga-laptop404"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        data() {
+            return {}
+        },
+        created() {},
+        mounted() {},
+        methods: {}
+    }
+</script>
+<style lang="scss">
+    .saga-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+    }
+    body {
+        background-color: white;
+        overflow: hidden;
+    }
+    .saga-error404page {
+        width: 400px;
+        height: 800px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .saga-body404,
+    .saga-head404,
+    .saga-eyes404,
+    .saga-leftarm404,
+    .saga-rightarm404,
+    .saga-chair404,
+    .saga-leftshoe404,
+    .saga-rightshoe404,
+    .saga-legs404,
+    .saga-laptop404 {
+        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/404-character-new.png) 0 0 no-repeat;
+        width: 200px;
+        height: 200px;
+    }
+    .saga-newcharacter404,
+    .saga-torso404,
+    .saga-body404,
+    .saga-head404,
+    .saga-eyes404,
+    .saga-leftarm404,
+    .saga-rightarm404,
+    .saga-chair404,
+    .saga-leftshoe404,
+    .saga-rightshoe404,
+    .saga-legs404,
+    .saga-laptop404 {
+        background-size: 750px;
+        position: absolute;
+        display: block;
+    }
+    .saga-newcharacter404 {
+        width: 400px;
+        height: 800px;
+        left: 50%;
+        top: 20px;
+        margin-left: -200px;
+    }
+    $swayspeed: 20s;
+    .saga-torso404 {
+        position: absolute;
+        display: block;
+        top: 138px;
+        left: 0px;
+        width: 389px;
+        height: 252px;
+        animation: sway $swayspeed ease infinite;
+        transform-origin: 50% 100%;
+    }
+    .saga-body404 {
+        position: absolute;
+        display: block;
+        top: 0px;
+        left: 0px;
+        width: 389px;
+        height: 253px;
+    }
+    .saga-head404 {
+        position: absolute;
+        top: -148px;
+        left: 106px;
+        width: 160px;
+        height: 194px;
+        background-position: 0px -265px;
+        transform-origin: 50% 85%;
+        animation: headTilt $swayspeed ease infinite;
+    }
+    .saga-eyes404 {
+        position: absolute;
+        top: 92px;
+        left: 34px;
+        width: 73px;
+        height: 18px;
+        background-position: -162px -350px;
+        animation: blink404 10s steps(1) infinite, pan 10s ease-in-out infinite;
+    }
+    .saga-leftarm404 {
+        position: absolute;
+        top: 159px;
+        left: 0;
+        width: 165px;
+        height: 73px;
+        background-position: -265px -341px;
+        transform-origin: 9% 35%;
+        transform: rotateZ(0deg);
+        animation: typeLeft 0.4s linear infinite;
+    }
+    .saga-rightarm404 {
+        position: absolute;
+        top: 148px;
+        left: 231px;
+        width: 157px;
+        height: 91px;
+        background-position: -442px -323px;
+        transform-origin: 90% 25%;
+        animation: typeLeft 0.4s linear infinite;
+    }
+    .saga-chair404 {
+        position: absolute;
+        top: 430px;
+        left: 55px;
+        width: 260px;
+        height: 365px;
+        background-position: -12px -697px;
+    }
+    .saga-legs404 {
+        position: absolute;
+        top: 378px;
+        left: 4px;
+        width: 370px;
+        height: 247px;
+        background-position: -381px -443px;
+    }
+    .saga-leftshoe404 {
+        position: absolute;
+        top: 591px;
+        left: 54px;
+        width: 130px;
+        height: 92px;
+        background-position: -315px -749px;
+    }
+    .saga-rightshoe404 {
+        position: absolute;
+        top: 594px;
+        left: 187px;
+        width: 135px;
+        height: 81px;
+        background-position: -453px -749px;
+        transform-origin: 35% 12%;
+        animation: tapRight 1s linear infinite;
+    }
+    .saga-laptop404 {
+        position: absolute;
+        top: 186px;
+        left: 9px;
+        width: 365px;
+        height: 216px;
+        background-position: -2px -466px;
+        transform-origin: 50% 100%;
+        animation: tapWobble 0.4s linear infinite;
+    }
+    @keyframes sway {
+        0% {
+            transform: rotateZ(0deg);
+        }
+        20% {
+            transform: rotateZ(0deg);
+        }
+        25% {
+            transform: rotateZ(4deg);
+        }
+        45% {
+            transform: rotateZ(4deg);
+        }
+        50% {
+            transform: rotateZ(0deg);
+        }
+        70% {
+            transform: rotateZ(0deg);
+        }
+        75% {
+            transform: rotateZ(-4deg);
+        }
+        90% {
+            transform: rotateZ(-4deg);
+        }
+        100% {
+            transform: rotateZ(0deg);
+        }
+    }
+    @keyframes headTilt {
+        0% {
+            transform: rotateZ(0deg);
+        }
+        20% {
+            transform: rotateZ(0deg);
+        }
+        25% {
+            transform: rotateZ(-4deg);
+        }
+        35% {
+            transform: rotateZ(-4deg);
+        }
+        38% {
+            transform: rotateZ(2deg);
+        }
+        42% {
+            transform: rotateZ(2deg);
+        }
+        45% {
+            transform: rotateZ(-4deg);
+        }
+        50% {
+            transform: rotateZ(0deg);
+        }
+        70% {
+            transform: rotateZ(0deg);
+        }
+        82% {
+            transform: rotateZ(0deg);
+        }
+        85% {
+            transform: rotateZ(4deg);
+        }
+        90% {
+            transform: rotateZ(4deg);
+        }
+        100% {
+            transform: rotateZ(0deg);
+        }
+    }
+    @keyframes typeLeft {
+        0% {
+            transform: rotateZ(0deg);
+        }
+        25% {
+            transform: rotateZ(7deg);
+        }
+        75% {
+            transform: rotateZ(-6deg);
+        }
+        100% {
+            transform: rotateZ(0deg);
+        }
+    }
+    @keyframes typeRight {
+        0% {
+            transform: rotateZ(0deg);
+        }
+        25% {
+            transform: rotateZ(-6deg);
+        }
+        75% {
+            transform: rotateZ(7deg);
+        }
+        100% {
+            transform: rotateZ(0deg);
+        }
+    }
+    @keyframes tapWobble {
+        0% {
+            transform: rotateZ(-0.2deg);
+        }
+        50% {
+            transform: rotateZ(0.2deg);
+        }
+        100% {
+            transform: rotateZ(-0.2deg);
+        }
+    }
+    @keyframes tapRight {
+        0% {
+            transform: rotateZ(0deg);
+        }
+        90% {
+            transform: rotateZ(-6deg);
+        }
+        100% {
+            transform: rotateZ(0deg);
+        }
+    }
+    @keyframes blink404 {
+        0% {
+            background-position: -162px -350px;
+        }
+        94% {
+            background-position: -162px -350px;
+        }
+        98% {
+            background-position: -162px -368px;
+        }
+        100% {
+            background-position: -162px -350px;
+        }
+    }
+    @keyframes pan {
+        0% {
+            transform: translateX(-2px);
+        }
+        49% {
+            transform: translateX(-2px);
+        }
+        50% {
+            transform: translateX(2px);
+        }
+        99% {
+            transform: translateX(2px);
+        }
+        100% {
+            transform: translateX(-2px);
+        }
+    }
+</style>

src/views/About.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+    about
+    </div>
+</template>
+<script>
+export default {
+    data(){ return {}},
+    created(){},
+    mounted(){},
+    methods:{}
+}
+</script>
+<style>
+</style>

src/views/Home.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="home">
+    <el-input v-model="testData"></el-input>
+    <router-link to="/about">to</router-link>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'home',
+  components: {
+  },
+  data(){
+      return {
+          testData: ""
+      }
+  }
+}
+</script>

src/views/login/index.vue

@@ -0,0 +1,24 @@
+<template>
+<div>
+    <el-button @click="createPost">测试请求</el-button>
+</div>
+</template>
+<script>
+
+import {getTest} from '@/fetch'
+export default {
+    data(){ return {}},
+    created(){},
+    mounted(){},
+    methods:{
+        createPost(){
+            getTest( _ => {
+                console.log(_)
+            })
+        }
+    }
+}
+</script>
+<style lang="scss">
+
+</style>

vue.config.js

@@ -0,0 +1,20 @@
+// 作为配置文件，直接导出配置对象即可
+module.exports = {
+    devServer: {
+        // 设置主机地址
+        host: 'localhost',
+        // 设置默认端口
+        port: 8080,
+        // 设置代理
+        proxy: {
+            '/data-platform-3': {
+                // 目标 API 地址
+                target: 'http://192.168.20.225:8080/',
+                // 如果要代理 websockets
+                ws: true,
+                // 将主机标头的原点更改为目标URL
+                changeOrigin: false
+            }
+        }
+    }
+}