├── src
    ├── store
    │   ├── modules
    │   │   ├── article.ts
    │   │   └── user.ts
    │   ├── types.ts
    │   └── index.ts
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   ├── Layout
    │   │   └── index.vue
    │   ├── Article.vue
    │   ├── Edit.vue
    │   └── Home.vue
    ├── App.vue
    ├── shime-global.d.ts
    ├── store.ts
    ├── utils
    │   ├── urls.ts
    │   ├── utils.ts
    │   └── https.ts
    ├── shims-tsx.d.ts
    ├── shims-vue.d.ts
    ├── scss
    │   └── index.scss
    ├── main.ts
    ├── components
    │   └── HelloWorld.vue
    └── router.ts
├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── tests
    └── unit
    │   ├── .eslintrc.js
    │   └── example.spec.ts
├── postcss.config.js
├── .editorconfig
├── babel.config.js
├── .gitignore
├── .eslintrc.js
├── README.md
├── tsconfig.json
├── package.json
└── vue.config.js


/src/store/modules/article.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calamus0427/mkk/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calamus0427/mkk/master/src/assets/logo.png


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     mocha: true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/store/types.ts:
--------------------------------------------------------------------------------
1 | // 公共 token
2 | export const SAVE_TOKEN = "SAVE_TOKEN";
3 | 
4 | // 用户
5 | export const SAVE_USER = "SAVE_USER";


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 | @import url("./scss/index.scss");
 9 | 
10 | </style>
11 | 


--------------------------------------------------------------------------------
/src/shime-global.d.ts:
--------------------------------------------------------------------------------
1 | // 声明全局的
2 | declare var window: Window;
3 | declare var document: Document;
4 | 
5 | declare module "element-ui/lib/transitions/collapse-transition";
6 | declare module "element-ui";
7 | declare module "vue-simplemde";


--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 | 
 9 |   },
10 |   mutations: {
11 | 
12 |   },
13 |   actions: {
14 | 
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/src/utils/urls.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | // url的链接
 3 | export const urls: object = {
 4 |   bar: "bar",
 5 |   createArticle:"article/create",
 6 |   getArticleList:"article/findAll",
 7 |   getArticleDetail:"article/getDetail"
 8 | };
 9 | 
10 | export default urls;


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     '@vue/app'
 4 |   ],
 5 |   plugins: [
 6 |     [
 7 |       "component",
 8 |       {
 9 |         libraryName: "element-ui",
10 |         styleLibraryName: "theme-chalk"
11 |       }
12 |     ]
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from 'vue'
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
 1 | import VueRouter, { Route } from "vue-router";
 2 | import Vue from 'vue'
 3 | 
 4 | declare module '*.vue' {
 5 |   export default Vue
 6 | }
 7 | 
 8 | declare module "vue/types/vue" {
 9 |   interface Vue {
10 |     $router: VueRouter;
11 |     $route: Route;
12 |     $https: any;
13 |     $urls: any;
14 |     $Message: any;
15 |     $Modal: any;
16 |   }
17 | }


--------------------------------------------------------------------------------
/src/scss/index.scss:
--------------------------------------------------------------------------------
 1 | body{
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     font-size: 14px;
 5 |   }
 6 |   #app {
 7 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
 8 |     -webkit-font-smoothing: antialiased;
 9 |     -moz-osx-font-smoothing: grayscale;
10 |     color: #2c3e50;
11 | }
12 | // 自定义公共样式
13 | .text-c{
14 |     text-align: center;
15 | }
16 | .text-l{
17 |     text-align: left;
18 | }
19 | .text-r{
20 |     text-align: right;
21 | }


--------------------------------------------------------------------------------
/tests/unit/example.spec.ts:
--------------------------------------------------------------------------------
 1 | import { expect } from 'chai'
 2 | import { shallowMount } from '@vue/test-utils'
 3 | import HelloWorld from '@/components/HelloWorld.vue'
 4 | 
 5 | describe('HelloWorld.vue', () => {
 6 |   it('renders props.msg when passed', () => {
 7 |     const msg = 'new message'
 8 |     const wrapper = shallowMount(HelloWorld, {
 9 |       propsData: { msg }
10 |     })
11 |     expect(wrapper.text()).to.include(msg)
12 |   })
13 | })
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard',
 9 |     '@vue/typescript'
10 |   ],
11 |   rules: {
12 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
14 |   },
15 |   parserOptions: {
16 |     parser: '@typescript-eslint/parser'
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/store/modules/user.ts:
--------------------------------------------------------------------------------
 1 | import * as types from "../types";
 2 | 
 3 | const initPageState = () => {
 4 |   return {
 5 |     userInfo: {
 6 |       _id: "",
 7 |       name: "",
 8 |       avator: ""
 9 |     }
10 |   };
11 | };
12 | const user = {
13 |   state: initPageState(),
14 |   mutations: {
15 |     [types.SAVE_USER](state: any, pageState: any) {
16 |       for (const prop in pageState) {
17 |         state[prop] = pageState[prop];
18 |       }
19 |     }
20 |   },
21 |   actions: {}
22 | };
23 | 
24 | export default user;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vt
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | ### Run your unit tests
29 | ```
30 | npm run test:unit
31 | ```
32 | 
33 | ### Customize configuration
34 | See [Configuration Reference](https://cli.vuejs.org/config/).
35 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vt</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vt doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import VueSimplemde from 'vue-simplemde'
 6 | import 'simplemde/dist/simplemde.min.css'
 7 | // import 'lib-flexible/flexible'
 8 | 
 9 | import ElementUI from "element-ui";
10 | import service from "./utils/https";
11 | import urls from "./utils/urls"
12 | Vue.config.productionTip = false
13 | 
14 | Vue.prototype.$https = service
15 | Vue.prototype.$urls = urls
16 | 
17 | Vue.use(ElementUI,{size:'mini'})
18 | Vue.use(VueSimplemde)
19 | 
20 | new Vue({
21 |   router,
22 |   store,
23 |   render: h => h(App)
24 | }).$mount('#app')
25 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | import * as types from "./types";
 4 | import user from "./modules/user";
 5 | // import article from "./modules/article";
 6 | 
 7 | Vue.use(Vuex);
 8 | 
 9 | const initPageState = () => {
10 |     return {
11 |         token: ""
12 |     }
13 | }
14 | const store = new Vuex.Store({
15 |     strict:process.env.NODE_ENV !== "production",
16 |     modules: {
17 |         user,
18 |         // article
19 |     },
20 |     state: initPageState(),
21 |     mutations: {
22 |         [types.SAVE_TOKEN](state: any,pageState: any){
23 |             for (const prop in pageState){
24 |                 state[prop] = pageState[prop]
25 |             }
26 |         }
27 |     },
28 |     actions: {}
29 | });
30 | export default store;


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |   
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import { Component, Prop, Vue } from 'vue-property-decorator'
 9 | 
10 | @Component
11 | export default class HelloWorld extends Vue {
12 |   @Prop() private msg!: string;
13 | 
14 |   mounted () {
15 |     this.greet()
16 |   }
17 |   async greet(){
18 |     const res: any = await this.$https.get(this.$urls.bar,{})
19 |   }
20 | }
21 | </script>
22 | 
23 | <!-- Add "scoped" attribute to limit CSS to this component only -->
24 | <style scoped lang="scss">
25 | h3 {
26 |   margin: 40px 0 0;
27 | }
28 | ul {
29 |   list-style-type: none;
30 |   padding: 0;
31 | }
32 | li {
33 |   display: inline-block;
34 |   margin: 0 10px;
35 | }
36 | a {
37 |   color: #42b983;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/router.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Layout from './views/Layout/index.vue'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   mode:"history",
 9 |   routes: [
10 |     {
11 |       path: '/',
12 |       name: '',
13 |       component: Layout,
14 |       children: [{
15 |         path: 'home',
16 |         name: 'Home',
17 |         component: () => import(/* webpackChunkName: "Home" */ './views/Home.vue')
18 |       },{
19 |         path: 'edit',
20 |         name: 'Edit',
21 |         component: () => import(/* webpackChunkName: "about" */ './views/Edit.vue')
22 |       },{
23 |         path: 'article',
24 |         name: 'Article',
25 |         component: () => import(/* webpackChunkName: "about" */ './views/Article.vue')
26 |       }]
27 |     }
28 |   ]
29 | })
30 | 


--------------------------------------------------------------------------------
/src/utils/utils.ts:
--------------------------------------------------------------------------------
 1 | export function throttle(fn: Function, delay: number) {
 2 |     // last为上一次触发回调的时间, timer是定时器
 3 |     let last = 0,
 4 |       timer: any = null;
 5 |     // 将throttle处理结果当作函数返回
 6 |     return function() {
 7 |       // 保留调用时的this上下文
 8 |       let context = this;
 9 |       // 保留调用时传入的参数
10 |       let args = arguments;
11 |       // 记录本次触发回调的时间
12 |       let now = +new Date();
13 |       // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
14 |       if (now - last < delay) {
15 |         // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
16 |         clearTimeout(timer);
17 |         timer = setTimeout(function() {
18 |           last = now;
19 |           fn.apply(context, args);
20 |         }, delay);
21 |       } else {
22 |         // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
23 |         last = now;
24 |         fn.apply(context, args);
25 |       }
26 |     };
27 |   }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "noImplicitThis": false,
15 |     "types": [
16 |       "webpack-env",
17 |       "mocha",
18 |       "chai"
19 |     ],
20 |     "paths": {
21 |       "@/*": [
22 |         "src/*"
23 |       ]
24 |     },
25 |     "lib": [
26 |       "esnext",
27 |       "dom",
28 |       "dom.iterable",
29 |       "scripthost"
30 |     ]
31 |   },
32 |   "include": [
33 |     "src/**/*.ts",
34 |     "src/**/*.tsx",
35 |     "src/**/*.vue",
36 |     "tests/**/*.ts",
37 |     "tests/**/*.tsx"
38 |   ],
39 |   "exclude": [
40 |     "node_modules"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/src/utils/https.ts:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | // 创建axios实例
 4 | let service: any = {};
 5 | if (process.env.NODE_ENV === "development") {
 6 |   service = axios.create({
 7 |     baseURL: "http://192.168.0.142:3000/", // api的base_url
 8 |     timeout: 50000 // 请求超时时间
 9 |   });
10 | } else {
11 |   // 生产环境下
12 |   service = axios.create({
13 |     baseURL: "0.0.0.0:3000/", // api的base_url
14 |     timeout: 50000 // 请求超时时间
15 |   });
16 | }
17 | 
18 | // console.log('process.env.BASE_URL',process.env.BASE_URL)
19 | // request拦截器 axios的一些配置
20 | service.interceptors.request.use(
21 |   (config: any) => {
22 |     return config;
23 |   },
24 |   (error: any) => {
25 |     // Do something with request error
26 |     console.error("error:", error); // for debug
27 |     Promise.reject(error);
28 |   }
29 | );
30 | 
31 | // respone拦截器 axios的一些配置
32 | service.interceptors.response.use(
33 |   (response: any) => {
34 |     return response;
35 |   },
36 |   (error: any) => {
37 |     console.error("error:" + error); // for debug
38 |     return Promise.reject(error);
39 |   }
40 | );
41 | 
42 | export default service;


--------------------------------------------------------------------------------
/src/views/Layout/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-container>
 3 |     <!-- <el-container>
 4 |     <el-aside width="200px">Aside</el-aside>-->
 5 |     <el-header>
 6 |       <el-menu
 7 |         class="el-menu-demo"
 8 |         mode="horizontal"
 9 |       >
10 |         <el-menu-item index="1">
11 |             <router-link class="link"
12 |                        to="/home">
13 |             文章
14 |           </router-link>
15 |         </el-menu-item>
16 |         <el-menu-item index="2">
17 |             <router-link class="link"
18 |                        to="/edit">
19 |             新增
20 |           </router-link>
21 |         </el-menu-item>
22 |       </el-menu>
23 |     </el-header>
24 |     <el-main>
25 |       <router-view/>
26 |     </el-main>
27 |     <!-- <el-aside width="200px">Aside</el-aside> -->
28 |     <!-- </el-container> -->
29 |     <el-footer>Footer</el-footer>
30 |   </el-container>
31 | </template>
32 | 
33 | <script lang="ts">
34 | import { Component, Vue } from "vue-property-decorator";
35 | 
36 | @Component({
37 |   components: {}
38 | })
39 | export default class Layout extends Vue {
40 |   mounted() {}
41 | }
42 | </script>
43 | <style scoped>
44 | .el-header {
45 |     width: 100%;
46 |   padding: 0;
47 |   position: absolute;
48 |   z-index: 100000;
49 | }
50 | .el-main {
51 |   padding: 0;
52 | }
53 | .el-menu-demo{
54 |     width: 100%;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vt",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "test:unit": "vue-cli-service test:unit"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^0.18.0",
13 |     "core-js": "^2.6.5",
14 |     "element-ui": "^2.7.2",
15 |     "simplemde": "^1.11.2",
16 |     "vue": "^2.6.6",
17 |     "vue-class-component": "^6.0.0",
18 |     "vue-property-decorator": "^8.0.0",
19 |     "vue-router": "^3.0.1",
20 |     "vue-simplemde": "^0.5.1",
21 |     "vuex": "^3.0.1"
22 |   },
23 |   "devDependencies": {
24 |     "@types/chai": "^4.1.0",
25 |     "@types/mocha": "^5.2.4",
26 |     "@vue/cli-plugin-babel": "^3.5.0",
27 |     "@vue/cli-plugin-eslint": "^3.5.0",
28 |     "@vue/cli-plugin-typescript": "^3.5.0",
29 |     "@vue/cli-plugin-unit-mocha": "^3.5.0",
30 |     "@vue/cli-service": "^3.5.0",
31 |     "@vue/eslint-config-standard": "^4.0.0",
32 |     "@vue/eslint-config-typescript": "^4.0.0",
33 |     "@vue/test-utils": "1.0.0-beta.29",
34 |     "babel-eslint": "^10.0.1",
35 |     "babel-plugin-component": "^1.1.1",
36 |     "chai": "^4.1.2",
37 |     "eslint": "^5.8.0",
38 |     "eslint-plugin-vue": "^5.0.0",
39 |     "node-sass": "^4.9.0",
40 |     "sass-loader": "^7.1.0",
41 |     "typescript": "^3.2.1",
42 |     "vue-template-compiler": "^2.5.21"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/views/Article.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="articleDetail" v-loading="loading"></div>
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | declare var document: any;
 7 | import { Component, Vue } from "vue-property-decorator";
 8 | import { markdownEditor } from "vue-simplemde";
 9 | 
10 | @Component({
11 |   components: {
12 |     markdownEditor
13 |   }
14 | })
15 | export default class Article extends Vue {
16 |   articleData: Object = {
17 |     id: "",
18 |     title: "",
19 |     image: "",
20 |     description: "",
21 |     content: "",
22 |     tag: "",
23 |     flag: 1,
24 |     author: ""
25 |   };
26 |   rules: Object = {};
27 |   content: String = "";
28 |   configs: Object = {
29 |     spellChecker: false, // 禁用拼写检查
30 |     renderingConfig: {
31 |       singleLineBreaks: false,
32 |       codeSyntaxHighlighting: true
33 |     }
34 |   };
35 |   loading: Boolean = false;
36 |   mounted() {
37 |     this.getDetail();
38 |   }
39 |   async getDetail() {
40 |       let params = {
41 |           id:this.$route.query.articleId
42 |       }
43 |     this.loading = true;
44 |     const res: any = await this.$https.get(this.$urls.getArticleDetail).then(
45 |       (data: any) => data
46 |     );
47 |     this.articleData = res;
48 |     this.loading = false;
49 |   }
50 |   cancel() {}
51 | }
52 | </script>
53 | <style lang="scss" scoped>
54 | .articleDetail {
55 |   display: inline-block;
56 |   width: 100%;
57 |   margin-top: 60px;
58 |   .markdownEditor {
59 |     margin: 20px;
60 |   }
61 | }
62 | </style>
63 | 
64 | 


--------------------------------------------------------------------------------
/src/views/Edit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="edit">
 3 |     <el-form ref="articleFrom" :model="articleData" :rules="rules">
 4 |       <el-form-item label="标题" prop="title">
 5 |         <el-input v-model="articleData.title"></el-input>
 6 |       </el-form-item>
 7 |       <el-form-item label="封面" prop="image">
 8 |         <el-input v-model="articleData.image"></el-input>
 9 |       </el-form-item>
10 |       <el-form-item label="描述" prop="descript">
11 |         <el-input v-model="articleData.description"></el-input>
12 |       </el-form-item>
13 |       <el-form-item label="标签" prop="tag">
14 |         <el-input v-model="articleData.tag"></el-input>
15 |       </el-form-item>
16 |     </el-form>
17 |     <markdown-editor class="markdownEditor" v-model="articleData.content" ref="markdownEditor"></markdown-editor>
18 |     <el-row class="text-r">
19 |       <el-button @click="cancel">清空</el-button>
20 |       <el-button type="primary" @click="save('articleFrom')">保存</el-button>
21 |     </el-row>
22 |   </div>
23 | </template>
24 | 
25 | <script lang="ts">
26 | declare var document: any;
27 | import { Component, Vue } from "vue-property-decorator";
28 | import { markdownEditor } from "vue-simplemde";
29 | 
30 | @Component({
31 |   components: {
32 |     markdownEditor
33 |   }
34 | })
35 | export default class Edit extends Vue {
36 |   articleData: Object = {
37 |     title: "",
38 |     image: "",
39 |     description: "",
40 |     content: "",
41 |     tag: "",
42 |     flag: 1,
43 |     author: "mrk"
44 |   };
45 |   rules: Object = {
46 |     title: [
47 |       { required: true, message: "请输入文章标题", trigger: "blur" },
48 |       { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
49 |     ],
50 |     image: [
51 |     ],
52 |     descript: [
53 |       { min: 0, max: 100, message: "长度在 0 到 100 个字符", trigger: "blur" }
54 |     ],
55 |     tag: [
56 |     ]
57 |   };
58 |   content: String = "";
59 |   configs: Object = {
60 |     spellChecker: false, // 禁用拼写检查
61 |     renderingConfig: {
62 |       singleLineBreaks: false,
63 |       codeSyntaxHighlighting: true
64 |     }
65 |   };
66 |   mounted() {}
67 |   cancel() {}
68 |   save(formName: any) {
69 |     this.$refs[formName].validate((valid: any) => {
70 |           if (valid) {
71 |             this.$https.post(this.$urls.createArticle, this.articleData).then((res:any) => {
72 |                 console.log(res)
73 |             })
74 |           }
75 |         });
76 |   }
77 | }
78 | </script>
79 | <style lang="scss" scoped>
80 | .edit {
81 |   display: inline-block;
82 |   width: 100%;
83 |   margin-top: 60px;
84 |   .markdownEditor {
85 |     margin: 20px;
86 |   }
87 | }
88 | </style>
89 | 
90 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const sourceMap = process.env.NODE_ENV === "development";
 3 | 
 4 | module.exports = {
 5 |   // 基本路径
 6 |   publicPath: "./",
 7 |   // 输出文件目录
 8 |   outputDir: "dist",
 9 |   // eslint-loader 是否在保存的时候检查
10 |   lintOnSave: false,
11 |   // webpack配置
12 |   // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
13 |   chainWebpack: () => { },
14 |   configureWebpack: config => {
15 |     if (process.env.NODE_ENV === "production") {
16 |       // 为生产环境修改配置...
17 |       config.mode = "production";
18 |     } else {
19 |       // 为开发环境修改配置...
20 |       config.mode = "development";
21 |     }
22 | 
23 |     Object.assign(config, {
24 |       // 开发生产共同配置
25 |       resolve: {
26 |         extensions: [".js", ".vue", ".json", ".ts", ".tsx"],
27 |         alias: {
28 |           vue$: "vue/dist/vue.js",
29 |           "@": path.resolve(__dirname, "./src"),
30 |           "@c": path.resolve(__dirname, "./src/components"),
31 |           utils: path.resolve(__dirname, "./src/utils"),
32 |           less: path.resolve(__dirname, "./src/less"),
33 |           views: path.resolve(__dirname, "./src/views"),
34 |           assets: path.resolve(__dirname, "./src/assets"),
35 |           com: path.resolve(__dirname, "./src/components"),
36 |           store: path.resolve(__dirname, "./src/store"),
37 |           mixins: path.resolve(__dirname, "./src/mixins")
38 |         }
39 |       }
40 |     });
41 |   },
42 |   // 生产环境是否生成 sourceMap 文件
43 |   productionSourceMap: sourceMap,
44 |   // css相关配置
45 |   css: {
46 |     // 是否使用css分离插件 ExtractTextPlugin
47 |     extract: true,
48 |     // 开启 CSS source maps?
49 |     sourceMap: false,
50 |     // css预设器配置项
51 |     loaderOptions: {
52 |     
53 |     },
54 |     // 启用 CSS modules for all css / pre-processor files.
55 |     modules: false
56 |   },
57 |   // use thread-loader for babel & TS in production build
58 |   // enabled by default if the machine has more than 1 cores
59 |   parallel: require("os").cpus().length > 1,
60 |   // PWA 插件相关配置
61 |   // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
62 |   pwa: {},
63 |   // webpack-dev-server 相关配置
64 |   devServer: {
65 |     open: process.platform === "darwin",
66 |     host: "0.0.0.0",
67 |     port: 3001, //8080,
68 |     https: false,
69 |     hotOnly: false,
70 |     proxy: {
71 |       // 设置代理
72 |       // proxy all requests starting with /api to jsonplaceholder
73 |       "/api": {
74 |         // target: "https://emm.cmccbigdata.com:8443/",
75 |         target: "http://localhost:3000/",
76 |         // target: "http://47.106.136.114/",
77 |         changeOrigin: true,
78 |         ws: true,
79 |         pathRewrite: {
80 |           "^/api": ""
81 |         }
82 |       }
83 |     },
84 |     before: app => { }
85 |   },
86 |   // 第三方插件配置
87 |   pluginOptions: {
88 |     // ...
89 |   }
90 | };


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <div ref="container" class="container">
  4 |       <div ref="inner" class="inner"></div>
  5 |     </div>
  6 |     <el-row v-loading="loading">
  7 |       <el-col
  8 |         v-for="(item,index) in articleList"
  9 |         :key="index"
 10 |         class="articleItem"
 11 |       >
 12 |         <div :style="{background:'urls('+item.image+')'}"></div>
 13 |         <p @click="articleDetail(item.id)">{{item.title}}</p>
 14 |         <div>
 15 |           {{item.author}}{{item.createdAt}}
 16 |         </div>
 17 |       </el-col>
 18 |     </el-row>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script lang="ts">
 23 | declare var window: any;
 24 | import { Component, Vue } from "vue-property-decorator";
 25 | 
 26 | @Component({
 27 |   components: {}
 28 | })
 29 | export default class Home extends Vue {
 30 |   mouse = {
 31 |     _x: 0,
 32 |     _y: 0,
 33 |     x: 0,
 34 |     y: 0,
 35 |     updatePosition: function(event: any) {
 36 |       let e = event || window.event;
 37 |       this.x = (e.clientX - this._x) / 30;
 38 |       this.y = (e.clientY - this._y) / 30;
 39 |     },
 40 |     setOrigin: function(e: any) {
 41 |       this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
 42 |       this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
 43 |     },
 44 |     show: function() {
 45 |       return "(" + this.x + ", " + this.y + ")";
 46 |     }
 47 |   };
 48 |   container: any;
 49 |   inner: any;
 50 |   counter: number = 0;
 51 |   updateRate: number = 2;
 52 |   content: String = "";
 53 |   articleList:Array<any> = []
 54 |   loading:Boolean = false;
 55 |   mounted() {
 56 |     this.container = this.$refs.container;
 57 |     this.inner = this.$refs.inner;
 58 |     this.container.onmousemove = this.onMouseMoveHandler;
 59 |     this.mouse.setOrigin(this.container);
 60 |     this.getArticle()
 61 |   }
 62 |   onMouseMoveHandler(event: any) {
 63 |     if (this.isTimeToUpdate()) {
 64 |       this.update(event);
 65 |     }
 66 |   }
 67 |   isTimeToUpdate() {
 68 |     return this.counter++ % this.updateRate === 0;
 69 |   }
 70 |   update(event: any) {
 71 |     this.mouse.updatePosition(event);
 72 |     this.updateTransformStyle(this.mouse.x.toFixed(5), this.mouse.y.toFixed(5));
 73 |   }
 74 |   updateTransformStyle(x: any, y: any) {
 75 |     let style = "translate(" + -x + "px," + -y + "px)";
 76 |     this.inner.style.transform = style;
 77 |     this.inner.style.webkitTransform = style;
 78 |     this.inner.style.mozTransform = style;
 79 |     this.inner.style.msTransform = style;
 80 |     this.inner.style.oTransform = style;
 81 |   }
 82 |   /**
 83 |    * 设置图片显示范围
 84 |    */
 85 |   setImgPosition() {
 86 |     let innerImg = this.$refs.innerImg;
 87 |     let width = document.body.clientWidth;
 88 |     let height = document.body.clientHeight;
 89 |     let imgHeight = innerImg.offsetHeight;
 90 |     let marginLeft = -width / 55 + "px";
 91 |     let marginTop = -(imgHeight - height) / 2 / 55 + "px";
 92 |     this.inner.style.margin = marginTop + " 0 0 " + marginLeft;
 93 |   }
 94 |   /**
 95 |    * 获取文章列表
 96 |    */
 97 |   getArticle(){
 98 |     this.loading = true
 99 |     const res:any = this.$https.get(this.$urls.getArticleList)
100 |     res.then((data:any) => {
101 |       this.articleList = data.data.data
102 |     })
103 |     this.loading = false
104 |   }
105 |   articleDetail(id:String){
106 |     let url = "http://0.0.0.0:3001/article?"
107 |     window.open(url+`articleId=${id}`)
108 |   }
109 | }
110 | </script>
111 | <style scoped>
112 | .container {
113 |   width: calc(100vw - 17px);
114 |   height: 100vh;
115 |   overflow: hidden;
116 | }
117 | .inner {
118 |   width: 110%;
119 |   margin-left: -5%;
120 |   height: 110%;
121 |   margin-top: -2%;
122 |   overflow: hidden;
123 |   background: url("https://isujin.com/wp-content/uploads/2018/11/wallhaven-672007-1.png");
124 |   background-repeat: no-repeat;
125 |   background-size: cover;
126 |   background-position: center;
127 |   opacity: 0.01;
128 | }
129 | .inner img {
130 |   width: 100%;
131 | }
132 | </style>
133 | 
134 | 


--------------------------------------------------------------------------------