前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >类webpack模板的多页Vue项目模板

类webpack模板的多页Vue项目模板

作者头像
卡少
发布2018-05-16 10:33:57
2K0
发布2018-05-16 10:33:57
举报
文章被收录于专栏:卡少编程之旅

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

配置功能

最基本的功能为webpack3+Vue2的基础上引入了外部组件库elementUI 其实也可以灵活修改为别的,css的支持仅引入了lesssass,相信这两者用的人也是最多的。还有一点是针对多页面也引入了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的使用比较熟练了,有需要补课的小伙伴戳这里

代码语言:javascript
复制
$ npm install -g vue-cli
$ vue init wlx200510/vue-multiple-pages-cli new_project
$ cd new_project
$ npm install

开发流程:

代码语言:javascript
复制
# serve with hot reload at localhost:8060
$ npm run dev

打包流程

代码语言:javascript
复制
$ npm run build
$ node server.js #listen 2333 port

文件架构

代码语言:javascript
复制
├── 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. 最难处理的莫过于文件路径问题,这个需要多次尝试,有耐心才行。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 配置功能
  • 使用方法
  • 文件架构
  • 具体细节
  • 编写模板体会
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档