自己参考两个仓库撸的通用的vue2.0+elementUI+多页面模板

2018-01-12 admin

A modern Vue.js multiple pages cli which uses Vue 2, Webpack3, and Element-UI

Features

  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

Get Started

Init Project

$ npm install -g vue-cli
$ vue init wlx200510/vue-multiple-pages-cli new_project
$ cd new_project
$ npm install

Dev

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

visit http://localhost:8060/user/login.html

visit http://localhost:8060/user/index.html

visit http://localhost:8060/customer/index.html

Build

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

visit http://localhost:2333/user/login.html

visit http://localhost:2333/user/index.html

visit http://localhost:2333/customer/index.html

Root Folder Structure

├── 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

Dist Folder Structure

├── assets
│   ├── css
│   │   ├── customer
│   │   │   ├── home.css
│   │   │   └── home.css.map
│   │   ├── user
│   │   │   ├── index.css
│   │   │   ├── index.css.map
│   │   │   ├── login.css
│   │   │   └── login.css.map
│   │   ├── vendors.css
│   │   └── vendors.css.map
│   └── js
│       ├── customer
│       │   └── home.js
│       ├── user
│       │   ├── index.js
│       │   └── login.js
│       └── vendors.js
├── b02bdc1b846fd65473922f5f62832108.ttf
├── customer
│   └── home.html
├── logo.png
└── user
    ├── index.html
    └── login.html

How The Multiple Page Works ?(Assumed that you have the basic knowlege of webpack)

  1. Firstly, we need to get the entries and chunks

    • The constant entries is an Object type, it’s prop is the chunk and it’s value is the relative path of the entry js file
    • The constant chunks is an Array type for the CommonsChunkPlugin

    This step needs a package called: glob

    const entries = {}
    const chunks = []
    glob.sync('./src/pages/**/app.js').forEach(path => {
      // Get all the entry js files and forEach them
    
      const chunk = path.split('./src/pages/')[1].split('/app.js')[0]
      // E.g, chunk = 'user/index' path = './src/pages/user/index/app.js'
    
      entries[chunk] = path
      // Now we got the entries
    
      chunks.push(chunk)
      // Then, we collect the chunks for CommonsChunkPlugin
    })
    // ...
    const config = {
      entry: entries, // The constant entries is used here
      plugins: [
        new CommonsChunkPlugin({
          name: 'vendors',
          filename: 'assets/js/vendors.js',
          chunks: chunks, // The constant chunks is used here
          minChunks: chunks.length
        })
        // ...
      ],
    }
    
  2. Then,combine the html template file with the right chunk

The second step,we use the webpack plugin: html-webpack-plugin

// ...
const config = {
  // ...
}
// ...
glob.sync('./src/pages/**/app.html').forEach(path => {
  // Get all the html template files and forEach them
  // E.g, path = './src/pages/user/index/app.html'

  const chunk = path.split('./src/pages/')[1].split('/app.html')[0]
  // E,g. the chunk will be 'user/login'

  const filename = chunk + '.html'
  // E.g, the html filename will be 'user/index.html' in the 'dist' folder

  const htmlConf = {
    filename: filename,
    template: path,
    inject: 'body',
    favicon: './src/assets/img/logo.png',
    hash: process.env.NODE_ENV === 'production',
    chunks: ['vendors', chunk]
  }
  config.plugins.push(new HtmlWebpackPlugin(htmlConf))
})

I base on vuejs-templates/webpack to edit the vue-multiple-pages scaffold, if you are familiar with vue-cli’s webpack scaffold. it is easy to use this with some special features.

License

MIT

[转载]原文链接:https://github.com/wlx200510/vue-multiple-pages-cli

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-5769.html

文章标题:自己参考两个仓库撸的通用的vue2.0+elementUI+多页面模板

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
回到顶部