类webpack模板的多页Vue项目模板
本脚手架并且适当简化了一些功能（删除了测试库） 并引入了外部mock和axios两个常用库可以灵活配置。 这里写一下说明文件和心得体会
配置功能
最基本的功能为webpack3+Vue2的基础上引入了外部组件库elementUI 其实也可以灵活修改为别的，css的支持仅引入了less和sass，相信这两者用的人也是最多的。还有一点是针对多页面也引入了vue-router, 也就是说这个多页面仓库也可以当单页面来搞起。
加入的axios库是本地业务所需，这个可以在生成脚手架时不选择，但这个作为Vue的推荐库，建议尽量用这个，坑比较少。
- Vue2
- Webpack3
- ElementUI
- Eslint(eslint-config-vue default)
- Postcss(autoprefixer default)
- Less
- Sass
- VueRouter
- mock.js
- axios
使用方法
相信看到这篇文章的人对vue-cli的使用比较熟练了，有需要补课的小伙伴戳这里
$ npm install -g vue-cli
$ vue init wlx200510/vue-multiple-pages-cli new_project
$ cd new_project
$ npm install开发流程：
# serve with hot reload at localhost:8060
$ npm run dev打包流程
$ npm run build
$ node server.js #listen 2333 port文件架构
├── 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其余基本相同
编写模板体会
- 通过双大括号来处理文本的渲染。
- 编写
meta.js用于用户生成项目前的交互和提示。 webpack生成两份分别用于开发环境和打包环境的架构设计很合理。- 配置文件单独列出，所有的配置与具体的
webpack.conf文件解耦。 - 最难处理的莫过于文件路径问题，这个需要多次尝试，有耐心才行。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录