vue-cli

The idea behind the vue project.

1
2
3
4
5
6
7
8
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
  • Consider the version of node and the version of the NPM.
  • Consider the vue-cli version.
  • Element-ui as the best vue UI framework at present, how do you update the framework?

Vue spa architecture, code service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'admin_static',
assetsPublicPath: '/',
productionSourceMap: false,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 3000,
autoOpenBrowser: true,
assetsSubDirectory: 'admin_static',
assetsPublicPath: '/',
proxyTable: {
'/cross': {
target: 'http://test.online.oksite.com/cross',changeOrigin: true,pathRewrite: {"^/cross" : ""}
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}

How does the vue advanced cache handle?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
<div datafld="gtadmin">
<v-head></v-head>
<v-sidebar></v-sidebar>
<section>
<keep-alive include="customer,connection,personal,organum,headlines,demand,question,movie,ecology,column,knowledge,version">
<router-view></router-view>
</keep-alive>
</section>
</div>
</template>
<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
export default {
components:{
vHead, vSidebar
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
section{
margin: 0 0 15px 12.5%;
min-width: 1060px;
}
.fade-enter-active, .fade-leave-active{
transition: all .15s ease-in-out;
}
.fade-enter, .fade-leave-active{
opacity: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// in library
import Vue from 'vue'
import Router from 'vue-router'
/* 用户模块 */
import User from './user'
/* 支付模块 */
import Pay from './pay'
/* peg管理 */
import Pegmanage from './pegmanage'
/* 内容管理 */
import Content from './content'
/* 会员 */
import Member from './member'
/* 版本 */
import Version from './version'
Vue.use(Router);
export default new Router({
// mode: 'history',
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: resolve => require(['../pages/login/login.vue'], resolve, )
},
{
path: '/',
component: resolve => require(['../components/Home.vue'], resolve),
children: [
...User, ...Pay, ...Pegmanage, ...Content, ...Member, ...Version,
// 404 pages
{
path: '*',
component: resolve => require(['../components/nofind.vue'], resolve)
}
]
},
],
})
/* 支付模块 */
import Pay from './pay'
/**
* Created by okiste on 2017/7/13.
*/
export default [
//支付统计
{
path: '/payment',
component: resolve => require(['../pages/payment/payment.vue'], resolve)
},
{
path: '/withdraw',
component: resolve => require(['../pages/payment/withdraw.vue'], resolve)
},
{
path: '/feelist',
component: resolve => require(['../pages/payment/feelist.vue'], resolve)
},
]