本脚手架并且适当简化了一些功能（删除了测试库） 并引入了外部mock和axios两个常用库可以灵活配置。 这里写一下说明文件和心得体会

配置功能

最基本的功能为webpack3+Vue2的基础上引入了外部组件库elementUI 其实也可以灵活修改为别的，css的支持仅引入了less和sass，相信这两者用的人也是最多的。还有一点是针对多页面也引入了vue-router, 也就是说这个多页面仓库也可以当单页面来搞起。
加入的axios库是本地业务所需，这个可以在生成脚手架时不选择，但这个作为Vue的推荐库，建议尽量用这个，坑比较少。

  1. Vue2
  2. Webpack3
  3. ElementUI
  4. Eslint(eslint-config-vue default)
  5. Postcss(autoprefixer default)
  6. Less
  7. Sass
  8. VueRouter
  9. mock.js
  10. axios

使用方法

相信看到这篇文章的人对vue-cli的使用比较熟练了，有需要补课的小伙伴戳这里

1
2
3
4
$ npm install -g vue-cli
$ vue init wlx200510/vue-multiple-pages-cli new_project
$ cd new_project
$ npm install

开发流程：

1
2
# serve with hot reload at localhost:8060
$ npm run dev

打包流程

1
2
$ npm run build
$ node server.js #listen 2333 port

文件架构

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
├── build
│   ├── build.js # build entry
│   ├── utils.js # tool funcs
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
│
├── config
│   ├── index.js  # config index settings
│   ├── dev.env.js # dev env
│   └── prod.env.js # prod build env
│
├── src  # main folder
│   ├── assets  # common assets folder
│   │   ├── img
│   │   │   └── logo.png
│   │   ├── js
│   │   └── css
│   ├── components # common components folder
│   │   └── modal.vue
│   └── pages  # pages
│       ├── user  # user part (folder name can be customized)
│       │   ├── login # login.html (folder name can be customized)
│       │   │   ├── app.js   # entry js (file name can't be customized unless you change the webpack.config.js)
│       │   │   ├── app.vue  # login vue (file name can be customized)
│       │   │   └── app.html # template html (file name can't be customized unless you change the webpack.config.js)
│       │   └── index # index.html
│       │       ├── app.js
│       │       ├── app.html
│       │       └── app.vue
│       └── customer # customer part (folder name can be customized)
│           └── home # home.html
│               ├── app.html
│               ├── app.js
│               ├── app.vue
│               ├── mock
│               │   └── index.js # mock.js to mock API
│               ├── router
│               │   └── index.js # vue-router use example
│               └── selfComponents
│                   └── notFound.vue # components example with vue-router
├── LICENSE
├── .babelrc          # babel config (es2015 default)
├── .eslintrc.js      # eslint config (eslint-config-vue default)
├── server.js         # port 2333
├── package.json
├── postcss.config.js # postcss (autoprefixer default)
├── webpack.config.js
└── README.md

具体细节

本仓库的具体地址
多页面入口的设置是参照element-starter来做的，特点是文件目录结构一定是要遵循上述规定，具体参考github中的README文档
项目的配置细节大部分都在config目录下，熟悉vue-cli/webpack模板的应该都很容易看懂，因为只多了一项openPage其余基本相同

编写模板体会

  1. 通过双大括号来处理文本的渲染。
  2. 编写meta.js用于用户生成项目前的交互和提示。
  3. webpack生成两份分别用于开发环境和打包环境的架构设计很合理。
  4. 配置文件单独列出，所有的配置与具体的webpack.conf文件解耦。
  5. 最难处理的莫过于文件路径问题，这个需要多次尝试，有耐心才行。