├── static
    └── .gitkeep
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   ├── logo.png
    │   └── loginbg.jpg
    ├── components
    │   ├── home
    │   │   └── AppIndex.vue
    │   ├── HelloWorld.vue
    │   └── Login.vue
    ├── App.vue
    ├── store
    │   └── index.js
    ├── router
    │   └── index.js
    └── main.js
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── index.html
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/java-fancl/picture-vue/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/loginbg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/java-fancl/picture-vue/HEAD/src/assets/loginbg.jpg


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/src/components/home/AppIndex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     hello world!
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         name: "AppIndex"
10 |     }
11 | </script>
12 | 
13 | <style scoped>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>picture-vue</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 | <!--    <img src="./assets/logo.png">-->
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App'
11 | }
12 | </script>
13 | 
14 | <style>
15 | #app {
16 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
17 |   -webkit-font-smoothing: antialiased;
18 |   -moz-osx-font-smoothing: grayscale;
19 |   text-align: center;
20 |   color: #2c3e50;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 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 |     user: {
 9 |       username: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).username
10 |     }
11 |   },
12 |   mutations: {
13 |     login (state, user) {
14 |       state.user = user
15 |       window.localStorage.setItem('user', JSON.stringify(user))
16 |     }
17 |   }
18 | })
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # picture-vue
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | // 导入自定义页面
 5 | import AppIndex from "@/components/home/AppIndex"
 6 | import Login from "@/components/Login";
 7 | 
 8 | Vue.use(Router)
 9 | 
10 | export default new Router({
11 |   mode: 'history',  // history 模式 ， 默认为hash模式
12 |   routes: [
13 |     {
14 |       path: '/login',
15 |       name: 'Login',
16 |       component: Login
17 |     },
18 |     {
19 |       path: '/index',
20 |       name: 'AppIndex',
21 |       component:AppIndex,
22 |       meta: {
23 |         requireAuth: true
24 |       }
25 |     }
26 |   ]
27 | })
28 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | import ElementUI from 'element-ui'
 7 | import 'element-ui/lib/theme-chalk/index.css'
 8 | import store from './store'
 9 | 
10 | // 设置反向代理，前端请求默认发送到http://localhost:8443/api
11 | var axios = require('axios')
12 | axios.defaults.baseURL = 'http://localhost:8443/api'
13 | // 全局组件，之后可在其他组件中通过this.$axios 发送数据
14 | Vue.prototype.$axios = axios
15 | 
16 | Vue.config.productionTip = false
17 | 
18 | Vue.use(ElementUI)
19 | 
20 | router.beforeEach((to, from, next) => {
21 |     if (to.meta.requireAuth) {
22 |       if (store.state.user.username) {
23 |         next()
24 |       } else {
25 |         next({
26 |           path: 'login',
27 |           query: {redirect: to.fullPath}
28 |         })
29 |       }
30 |     } else {
31 |       next()
32 |     }
33 |   }
34 | )
35 | /* eslint-disable no-new */
36 | new Vue({
37 |   el: '#app',
38 |   render: h => h(App),
39 |   router,
40 |   store,
41 |   components: { App },
42 |   template: '<App/>'
43 | })
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "picture-vue",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "java-fancl <fancl3085015@163.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.19.2",
14 |     "element-ui": "^2.13.0",
15 |     "vue": "^2.5.2",
16 |     "vue-router": "^3.0.1",
17 |     "vuex": "^3.1.3"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^7.1.2",
21 |     "babel-core": "^6.22.1",
22 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-plugin-syntax-jsx": "^6.18.0",
25 |     "babel-plugin-transform-runtime": "^6.22.0",
26 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
27 |     "babel-preset-env": "^1.3.2",
28 |     "babel-preset-stage-2": "^6.22.0",
29 |     "chalk": "^2.0.1",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.28.0",
32 |     "extract-text-webpack-plugin": "^3.0.0",
33 |     "file-loader": "^1.1.4",
34 |     "friendly-errors-webpack-plugin": "^1.6.1",
35 |     "html-webpack-plugin": "^2.30.1",
36 |     "node-notifier": "^5.1.2",
37 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
38 |     "ora": "^1.2.0",
39 |     "portfinder": "^1.0.13",
40 |     "postcss-import": "^11.0.0",
41 |     "postcss-loader": "^2.0.8",
42 |     "postcss-url": "^7.2.1",
43 |     "rimraf": "^2.6.0",
44 |     "semver": "^5.3.0",
45 |     "shelljs": "^0.7.6",
46 |     "uglifyjs-webpack-plugin": "^1.1.1",
47 |     "url-loader": "^0.5.8",
48 |     "vue-loader": "^13.3.0",
49 |     "vue-style-loader": "^3.0.1",
50 |     "vue-template-compiler": "^2.5.2",
51 |     "webpack": "^3.6.0",
52 |     "webpack-bundle-analyzer": "^2.9.0",
53 |     "webpack-dev-server": "^2.9.1",
54 |     "webpack-merge": "^4.1.0"
55 |   },
56 |   "engines": {
57 |     "node": ">= 6.0.0",
58 |     "npm": ">= 3.0.0"
59 |   },
60 |   "browserslist": [
61 |     "> 1%",
62 |     "last 2 versions",
63 |     "not ie <= 8"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     // 为了让后端能够访问到前端的资源，需要配置跨域支持
14 |     proxyTable: {
15 |       '/api' : {
16 |         target: 'http://localhost:8443',
17 |         changeOrigin: true,
18 |         pathRewrite: {
19 |           '^/api': ''
20 |         }
21 |       }
22 |     },
23 | 
24 |     // Various Dev Server settings
25 |     host: 'localhost', // can be overwritten by process.env.HOST
26 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
27 |     autoOpenBrowser: false,
28 |     errorOverlay: true,
29 |     notifyOnErrors: true,
30 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
31 | 
32 | 
33 |     /**
34 |      * Source Maps
35 |      */
36 | 
37 |     // https://webpack.js.org/configuration/devtool/#development
38 |     devtool: 'cheap-module-eval-source-map',
39 | 
40 |     // If you have problems debugging vue-files in devtools,
41 |     // set this to false - it *may* help
42 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
43 |     cacheBusting: true,
44 | 
45 |     cssSourceMap: true
46 |   },
47 | 
48 |   build: {
49 |     // Template for index.html
50 |     index: path.resolve(__dirname, '../dist/index.html'),
51 | 
52 |     // Paths
53 |     assetsRoot: path.resolve(__dirname, '../dist'),
54 |     assetsSubDirectory: 'static',
55 |     assetsPublicPath: '/',
56 | 
57 |     /**
58 |      * Source Maps
59 |      */
60 | 
61 |     productionSourceMap: true,
62 |     // https://webpack.js.org/configuration/devtool/#production
63 |     devtool: '#source-map',
64 | 
65 |     // Gzip off by default as many popular static hosts such as
66 |     // Surge or Netlify already gzip all static assets for you.
67 |     // Before setting to `true`, make sure to:
68 |     // npm install --save-dev compression-webpack-plugin
69 |     productionGzip: false,
70 |     productionGzipExtensions: ['js', 'css'],
71 | 
72 |     // Run the build command with an extra argument to
73 |     // View the bundle analyzer report after build finishes:
74 |     // `npm run build --report`
75 |     // Set to `true` or `false` to always turn it on or off
76 |     bundleAnalyzerReport: process.env.npm_config_report
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <h2>Essential Links</h2>
  5 |     <ul>
  6 |       <li>
  7 |         <a
  8 |           href="https://vuejs.org"
  9 |           target="_blank"
 10 |         >
 11 |           Core Docs
 12 |         </a>
 13 |       </li>
 14 |       <li>
 15 |         <a
 16 |           href="https://forum.vuejs.org"
 17 |           target="_blank"
 18 |         >
 19 |           Forum
 20 |         </a>
 21 |       </li>
 22 |       <li>
 23 |         <a
 24 |           href="https://chat.vuejs.org"
 25 |           target="_blank"
 26 |         >
 27 |           Community Chat
 28 |         </a>
 29 |       </li>
 30 |       <li>
 31 |         <a
 32 |           href="https://twitter.com/vuejs"
 33 |           target="_blank"
 34 |         >
 35 |           Twitter
 36 |         </a>
 37 |       </li>
 38 |       <br>
 39 |       <li>
 40 |         <a
 41 |           href="http://vuejs-templates.github.io/webpack/"
 42 |           target="_blank"
 43 |         >
 44 |           Docs for This Template
 45 |         </a>
 46 |       </li>
 47 |     </ul>
 48 |     <h2>Ecosystem</h2>
 49 |     <ul>
 50 |       <li>
 51 |         <a
 52 |           href="http://router.vuejs.org/"
 53 |           target="_blank"
 54 |         >
 55 |           vue-router
 56 |         </a>
 57 |       </li>
 58 |       <li>
 59 |         <a
 60 |           href="http://vuex.vuejs.org/"
 61 |           target="_blank"
 62 |         >
 63 |           vuex
 64 |         </a>
 65 |       </li>
 66 |       <li>
 67 |         <a
 68 |           href="http://vue-loader.vuejs.org/"
 69 |           target="_blank"
 70 |         >
 71 |           vue-loader
 72 |         </a>
 73 |       </li>
 74 |       <li>
 75 |         <a
 76 |           href="https://github.com/vuejs/awesome-vue"
 77 |           target="_blank"
 78 |         >
 79 |           awesome-vue
 80 |         </a>
 81 |       </li>
 82 |     </ul>
 83 |   </div>
 84 | </template>
 85 | 
 86 | <script>
 87 | export default {
 88 |   name: 'HelloWorld',
 89 |   data () {
 90 |     return {
 91 |       msg: 'Welcome to Your Vue.js App'
 92 |     }
 93 |   }
 94 | }
 95 | </script>
 96 | 
 97 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 98 | <style scoped>
 99 | h1, h2 {
100 |   font-weight: normal;
101 | }
102 | ul {
103 |   list-style-type: none;
104 |   padding: 0;
105 | }
106 | li {
107 |   display: inline-block;
108 |   margin: 0 10px;
109 | }
110 | a {
111 |   color: #42b983;
112 | }
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <body id="poster">
 3 |     <el-form class="login-container" label-position="left"
 4 |              label-width="0px">
 5 |       <h3 class="login_title">系统登录</h3>
 6 |       <el-form-item>
 7 |         <el-input type="text" v-model="loginForm.username"
 8 |                   auto-complete="off" placeholder="账号"></el-input>
 9 |       </el-form-item>
10 |       <el-form-item>
11 |         <el-input type="password" v-model="loginForm.password"
12 |                   auto-complete="off" placeholder="密码"></el-input>
13 |       </el-form-item>
14 |       <el-form-item style="width: 100%">
15 |         <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
16 |       </el-form-item>
17 |     </el-form>
18 |   </body>
19 | </template>
20 | 
21 | <script>
22 |     export default {
23 |         name: 'Login',
24 |         data () {
25 |             return {
26 |                 loginForm: {
27 |                     username: 'admin',
28 |                     password: '123456'
29 |                 },
30 |                 responseResult: []
31 |             }
32 |         },
33 |         methods: {
34 |             login () {
35 |                 var _this = this
36 |                 this.$axios
37 |                     .post('/login', {
38 |                         username: this.loginForm.username,
39 |                         password: this.loginForm.password
40 |                     })
41 |                     .then(successResponse => {
42 |                         if (successResponse.data.code === 200) {
43 |                             // var data = this.loginForm
44 |                             _this.$store.commit('login', _this.loginForm)
45 |                             var path = this.$route.query.redirect
46 |                             this.$router.replace({path: path === '/' || path === undefined ? '/index' : path})
47 |                         }
48 |                     })
49 |                     .catch(failResponse => {
50 |                     })
51 |             }
52 |         }
53 |     }
54 | </script>
55 | 
56 | <style>
57 |   .login-container {
58 |     border-radius: 15px;
59 |     background-clip: padding-box;
60 |     margin: 90px auto;
61 |     width: 350px;
62 |     padding: 35px 35px 15px 35px;
63 |     background: #fff;
64 |     border: 1px solid #eaeaea;
65 |     box-shadow: 0 0 25px #cac6c6;
66 |   }
67 | 
68 |   .login_title {
69 |     margin: 0px auto 40px auto;
70 |     text-align: center;
71 |     color: #505458;
72 |   }
73 |   #poster {
74 |     background:url("../assets/loginbg.jpg") no-repeat;
75 |     background-position: center;
76 |     height: 100%;
77 |     width: 100%;
78 |     background-size: cover;
79 |     position: fixed;
80 |   }
81 |   body{
82 |     margin: 0px;
83 |   }
84 | </style>
85 | 


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