File tree Expand file tree Collapse file tree 1 file changed +49
-2
lines changed Expand file tree Collapse file tree 1 file changed +49
-2
lines changed Original file line number Diff line number Diff line change 1
1
# multiple-pages
2
2
3
- > A Vue.js project
3
+ > 基于vue-cli的vue多页面配置模板
4
4
5
5
## Build Setup
6
6
7
7
``` bash
8
8
# install dependencies
9
9
npm install
10
10
11
- # serve with hot reload at localhost:8080
11
+ # serve with hot reload at localhost:8181
12
12
npm run dev
13
13
14
14
# build for production with minification
@@ -17,5 +17,52 @@ npm run build
17
17
# build for production and view the bundle analyzer report
18
18
npm run build --report
19
19
```
20
+ ## 如何使用
21
+
22
+ 项目根目录pages中添加对应页面的js 和 vue文件
23
+
24
+
25
+ 在app.json中添加对应的页面配置 (例子在app.json中)
26
+ ``` javascript
27
+ {
28
+ " pages" : [ // 页面文件数组
29
+ {
30
+ " entry" : " about" , // 入口文件名称
31
+ " title" : " 关于" , // 该页面的标题
32
+ " cdn" : { // 该页面的需要加载的cdn
33
+ " js" : [
34
+
35
+ ]
36
+ }
37
+ },{
38
+ " entry" : " home" ,
39
+ " title" : " 首页" ,
40
+ " cdn" : {}
41
+ },{
42
+ " entry" : " index" ,
43
+ " title" : " 主页" ,
44
+ " cdn" : {}
45
+ }
46
+ ],
47
+ " basePath" : " ./src/pages/" , // pages文件夹的相对路径
48
+ " cdn" : { // 每个页面都需要加载的cdn
49
+ " js" : [
50
+ " https://cdn.bootcss.com/vue/2.5.2/vue.min.js" ,
51
+ " https://cdn.bootcss.com/element-ui/2.1.0/index.js"
52
+ ],
53
+ " css" : [
54
+ " https://cdn.bootcss.com/element-ui/2.1.0/theme-chalk/index.css"
55
+ ]
56
+ },
57
+ " externals" : { // 打包的时候需要排除的项目依赖
58
+ " vue" : " Vue" ,
59
+ " element-ui" : " ElementUI"
60
+ }
61
+
62
+ }
63
+ ```
64
+
65
+ ## 参考文章
66
+ 《用 cooking 搭建一个多页面易配置的 Vue 2 项目(进阶篇)》(https://zhuanlan.zhihu.com/p/22610408 )
20
67
21
68
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 ) .
You can’t perform that action at this time.
0 commit comments