Skip to content

Commit 7819cb1

Browse files
luo0412luo0412
committed
Initial commit
0 parents  commit 7819cb1

36 files changed

+11342
-0
lines changed

‎.browserslistrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not ie <= 8

‎.env.development‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# just a flag
2+
ENV = 'development'
3+
4+
# Base api
5+
# VUE_APP_BASE_API = '/api'
6+
VUE_APP_BASE_API = '/dev-api'
7+
8+
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
9+
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
10+
# It only does one thing by converting all import() to require().
11+
# This configuration can significantly increase the speed of hot updates,
12+
# when you have a large number of pages.
13+
# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
14+
15+
# iview-admin需要这个配置 ========
16+
VUE_CLI_BABEL_TRANSPILE_MODULES = true

‎.env.production‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# just a flag
2+
ENV = 'production'
3+
4+
# Base api
5+
VUE_APP_BASE_API = '/prod-api'

‎.eslintrc.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true,
5+
browser: true,
6+
es6: true,
7+
},
8+
extends: [
9+
'plugin:vue/essential'
10+
// 是个讲究人的话还是加上规则校验吧!! 然而我喜欢浪~~
11+
// , '@vue/standard'
12+
// , '@vue/prettier'
13+
],
14+
// vue-element-admin的校验规则
15+
// https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js
16+
// extends: ['plugin:vue/recommended', 'eslint:recommended'],
17+
rules: {
18+
// allow async-await
19+
'generator-star-spacing': 'off',
20+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
21+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
22+
// iview-admin放宽条件 ===========
23+
'vue/no-parsing-error': [2, {
24+
'x-invalid-end-tag': false
25+
}],
26+
'no-undef': 'off',
27+
'camelcase': 'off'
28+
29+
// 'prettier/prettier': [
30+
// 'error',
31+
// {
32+
// semi: false,
33+
// singleQuote: true
34+
// }
35+
// ]
36+
},
37+
parserOptions: {
38+
parser: 'babel-eslint'
39+
}
40+
};

‎.gitignore‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.DS_Store
2+
node_modules/
3+
/dist/
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
/test/unit/coverage/
8+
9+
# Editor directories and files
10+
.idea
11+
.vscode
12+
*.suo
13+
*.ntvs*
14+
*.njsproj
15+
*.sln

‎README.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# README
2+
3+
基于vue-cli3的pages简单配置一下
4+
5+
积攒业务代码, 仅学习测试用, 不建议用到生产环境
6+
7+
# 使用
8+
9+
- nodejs: v12.13.0
10+
- 目录结构参考: https://github.com/PanJiaChen/vue-element-admin
11+
12+
# 优化措施
13+
14+
- dynamic-import-node??
15+
16+
```js
17+
module.exports = {
18+
presets: ["@vue/app"],
19+
plugins: [
20+
["dynamic-import-node"]
21+
]
22+
};
23+
```
24+
25+
# TODO
26+
27+
- 不同项目/页面 --> 处理各自静态资源路径/@alias別名
28+
- mock功能配置(目前仅vue-element-admin用到)
29+
- 将vue-element-admin在src下的代码解耦
30+
31+
```
32+
使用^/router
33+
使用^/api
34+
使用^/store
35+
使用^/settings
36+
的代码部分
37+
```
38+
39+
# FAQ
40+
41+
- 与template-cdn.html混用, 会导致打包内容有误 --> 默认视图不用cdn, 需要cdn时覆盖template-cdn.html
42+
- Antd is not defined 解决办法
43+
- https://blog.csdn.net/qq_39990827/article/details/90700077
44+
45+
```
46+
配置babel-plugin-import按需加载后 --> 全局导入就会失败
47+
还原babel.config.js的相关配置, 暂时全局导入
48+
49+
希望全局导入和按需加载可以分页面支持...
50+
```
51+
52+
- 多页面拆分失效 --> 打包页面空白?? @todo
53+
54+
```js
55+
// @FIXME 多页面拆分出问题 ??
56+
// config
57+
// .when(process.env.NODE_ENV !== 'development',
58+
// config => {
59+
// config
60+
// .optimization.splitChunks({
61+
// chunks: 'all',
62+
// cacheGroups: {
63+
// libs: {
64+
// name: 'chunk-libs',
65+
// test: /[\\/]node_modules[\\/]/,
66+
// priority: 10,
67+
// chunks: 'initial' // only package third parties that are initially dependent
68+
// },
69+
// elementUI: {
70+
// name: 'chunk-elementUI', // split elementUI into a single package
71+
// priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
72+
// },
73+
// commons: {
74+
// name: 'chunk-commons',
75+
// test: path.resolve(__dirname, 'src/components'),
76+
// minChunks: 3, // minimum common number
77+
// priority: 5,
78+
// reuseExistingChunk: true
79+
// }
80+
// }
81+
// })
82+
// config.optimization.runtimeChunk('single')
83+
// }
84+
// )
85+
```
86+
87+
88+
89+

‎__demo/cdn/cdn.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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><%= htmlWebpackPlugin.options.title %></title>
9+
10+
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
11+
<link href="https://cdn.bootcss.com/tailwindcss/0.7.3/utilities.min.css" rel="stylesheet">
12+
<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
13+
14+
<!--[if lt IE 9]>
15+
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
16+
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
17+
<![endif]-->
18+
19+
</head>
20+
<body>
21+
22+
<noscript>
23+
<strong>We're sorry but multi-pages doesn't work properly without JavaScript
24+
enabled. Please enable it to continue.</strong>
25+
</noscript>
26+
27+
<% if (htmlWebpackPlugin.options._browserPage && NODE_ENV != 'production') { %>
28+
<ul>
29+
<% for(var i=0; i< htmlWebpackPlugin.options._browserPage.length; i++) {%>
30+
<li>
31+
<a href='<%= htmlWebpackPlugin.options._browserPage[i] %>'>
32+
<%= htmlWebpackPlugin.options._browserPage[i] %>
33+
</a>
34+
</li>
35+
<% } %>
36+
</ul>
37+
38+
<hr />
39+
<% } %>
40+
41+
<div id="app"></div>
42+
<!-- built files will be auto injected -->
43+
44+
<!-- jQuery =========== -->
45+
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
46+
47+
<!-- Vue ============== -->
48+
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
49+
<!--<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>-->
50+
<!--<script src="https://cdn.bootcss.com/vue/2.6.10/vue.esm.js"></script>-->
51+
<!--<script src="https://cdn.bootcss.com/vue/2.6.10/vue.esm.browser.min.js"></script>-->
52+
<!-- Vue Runtime ====== -->
53+
<!--<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.esm.js"></script>-->
54+
<!--<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script>-->
55+
56+
<!-- Element UI ======= -->
57+
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
58+
<script src="https://cdn.bootcss.com/element-ui/2.8.2/locale/zh-CN.min.js"></script>
59+
60+
<script>
61+
Vue.config.productionTip = false
62+
</script>
63+
64+
</body>
65+
</html>

‎__demo/cdn/cdn.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
const App = {
2+
template: `
3+
4+
<el-table
5+
:data="tableData"
6+
style="width: 100%">
7+
<el-table-column
8+
prop="date"
9+
label="日期cdn"
10+
width="150">
11+
</el-table-column>
12+
<el-table-column label="配送信息">
13+
<el-table-column
14+
prop="name"
15+
label="姓名"
16+
width="120">
17+
</el-table-column>
18+
<el-table-column label="地址">
19+
<el-table-column
20+
prop="province"
21+
label="省份"
22+
width="120">
23+
</el-table-column>
24+
<el-table-column
25+
prop="city"
26+
label="市区"
27+
width="120">
28+
</el-table-column>
29+
<el-table-column
30+
prop="address"
31+
label="地址"
32+
width="300">
33+
</el-table-column>
34+
<el-table-column
35+
prop="zip"
36+
label="邮编"
37+
width="120">
38+
</el-table-column>
39+
</el-table-column>
40+
</el-table-column>
41+
</el-table>
42+
43+
`,
44+
data() {
45+
return {
46+
tableData: [{
47+
date: '2016-05-03',
48+
name: '王小虎-cdn',
49+
province: '上海',
50+
city: '普陀区',
51+
address: '上海市普陀区金沙江路 1518 弄',
52+
zip: 200333
53+
}, {
54+
date: '2016-05-02',
55+
name: '王小虎',
56+
province: '上海',
57+
city: '普陀区',
58+
address: '上海市普陀区金沙江路 1518 弄',
59+
zip: 200333
60+
}, {
61+
date: '2016-05-04',
62+
name: '王小虎',
63+
province: '上海',
64+
city: '普陀区',
65+
address: '上海市普陀区金沙江路 1518 弄',
66+
zip: 200333
67+
}, {
68+
date: '2016-05-01',
69+
name: '王小虎',
70+
province: '上海',
71+
city: '普陀区',
72+
address: '上海市普陀区金沙江路 1518 弄',
73+
zip: 200333
74+
}, {
75+
date: '2016-05-08',
76+
name: '王小虎',
77+
province: '上海',
78+
city: '普陀区',
79+
address: '上海市普陀区金沙江路 1518 弄',
80+
zip: 200333
81+
}, {
82+
date: '2016-05-06',
83+
name: '王小虎',
84+
province: '上海',
85+
city: '普陀区',
86+
address: '上海市普陀区金沙江路 1518 弄',
87+
zip: 200333
88+
}, {
89+
date: '2016-05-07',
90+
name: '王小虎',
91+
province: '上海',
92+
city: '普陀区',
93+
address: '上海市普陀区金沙江路 1518 弄',
94+
zip: 200333
95+
}]
96+
}
97+
},
98+
computed: {
99+
100+
},
101+
methods: {
102+
103+
},
104+
}
105+
106+
107+
new Vue({
108+
el: '#app',
109+
render: h => h(App)
110+
})

‎__demo/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Vue from 'vue'
2+
3+
const App = {
4+
template: `
5+
6+
<div>
7+
<span>count is {{ count }}</span>
8+
<span>plusOne is {{ plusOne }}</span>
9+
<button type="primary" @click="increment">count++</button>
10+
</div>
11+
12+
`,
13+
data() {
14+
return {
15+
count: 0,
16+
}
17+
},
18+
computed: {
19+
plusOne: function () {
20+
return this.count + 1
21+
},
22+
},
23+
methods: {
24+
increment() {
25+
this.count++
26+
},
27+
},
28+
}
29+
30+
Vue.config.productionTip = false
31+
32+
new Vue({
33+
el: '#app',
34+
render: h => h(App)
35+
})

0 commit comments

Comments
 (0)