详解vue-cli + webpack 多页面实例应用


Posted in Javascript onApril 25, 2017

关于vue.js

vue.js是一套构建用户界面的 轻型的渐进式前端框架。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。使用vue可以给你的开发带来极致的编程体验。

关于vue-cli

Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

疑问

vue-cli主要是用于构建单页应用的脚手架,但是现实项目中,大部分项目都是多页的,怎么样可以很好的利用这一套官方配置呢?我在网上找了一下, 几乎找不到vue多页应用实例,所以才有基于vue-cli生成的单页应用进行改造。

代码地址:

Github:https://github.com/breezefeng/vue-cli-multipage

使用方法

# install dependencies
npm install

# serve with hot reload at localhost:8080/module/index.html
npm run dev

# build for production with minification
npm run build

目录结构

vue-cli-multipage
 |---build
 |---config
 |---src
  |---assets
   |---img 图片文件
   |---css 样式文件
   |---font 字体文件   
  |---components 组件
   |---Button.vue 按钮组件
   |---Hello.vue
  |---module
   |---index 首页模块
    |---index.html
    |---index.js
    |---App.vue
   |---detail 详情页模块
    |---detail.html
    |---detail.js
    |---App.vue

从目录结构上,各种组件、页面模块、资源等都按类新建了文件夹,方便我们储存文件。

其实我们所有的文件,最主要都是放在module文件夹里,以文件夹名为html的名称。

例如:

|---index 首页模块
 |---index.html
 |---index.js
 |---App.vue

此时我们访问的链接是:http://localhost:8080/module/index.html

这里一定要注意,在module里下级文件夹里需要将html,js,vue template 都统一放在当前文件夹里,当然你也可以继续放其他的资源,例如css、图片、组件等,webpack会打包到当前页面里。

如果项目不需要这个页面了,可以把这个文件夹直接删除掉,干净利落,干活也开心。

像以前传统的开发项目,所有的图片都习惯放在images里,当项目有改动时,有些图片等资源用不上了,但还占着坑位,导致项目越来越大,虽然现在的硬件容量大到惊人,但我们应该还是要养到一个良好的习惯。

组件的使用

组件(Component)是 vue.js 最强大的功能之一,当你发现使用组件可以减少造轮子里,你会深深的爱上它。

我们的组件都是放在components目录下的,调用组件的方法也很简单。

import Hello from 'components/Hello'

然后记得在*.vue注册导入的组件,要不然会无法使用。

import Hello from 'components/Hello'

export default {
 name: 'app',
 components: {
  //在这里注册组件,不然无法使用
  Hello
 }
}

构建代码说明

那我们使用的是vue-cli的手脚架,用过vue-cli的同学都知道构建代码是放在根目录build下,vue多页面主要修改了这三个JS文件:webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。

/**
**  [webpack.base.conf.js]这里主要列出相关代码的修改点,具体代码请看build/webpack.base.conf.js
*/
var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件

module.exports = {
 entry: entries,
 ....
}

function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
 });

 return entries;
}
/**
**  [webpack.prod.conf.js]这里主要列出相关代码的修改点,具体代码请看build/webpack.base.prod.js
*/
function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
 });
 return entries;
}

var pages = getEntry('./src/module/**/*.html');

for (var pathname in pages) {
 // 配置生成的html文件,定义路径等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname],  // 模板路径
  inject: true,       // js插入位置
  minify: {
   //removeComments: true,
   //collapseWhitespace: true,
   //removeAttributeQuotes: true
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
 };

 if (pathname in module.exports.entry) {
  conf.chunks = ['manifest', 'vendor', pathname];
  conf.hash = true;
 }

 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

修改的代码不是很多,但是却为多页应用提供了强大的构建支持。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
javascript中indexOf技术详解
May 07 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
基于Vue实现timepicker
Apr 25 #Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 #Javascript
详解Angular 4.x 动态创建组件
Apr 25 #Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 #Javascript
Angular 4.x 动态创建表单实例
Apr 25 #Javascript
AngularJS动态菜单操作指令
Apr 25 #Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 #Javascript
You might like
文件上传的实现
2006/10/09 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
进阶之初探nodeJS
2017/01/24 NodeJs
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python实现定时任务
2017/02/08 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python中np是做什么的
2020/07/21 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
计算机专业自荐信
2014/05/24 职场文书
美食节策划方案
2014/05/26 职场文书
自查自纠工作总结
2014/10/15 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python