vue-cli + webpack

关于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));
}

修改的代码不是很多,但是却为多页应用提供了强大的构建支持。欢迎大家使用,也希望大家多多交流。

vue-cli + webpack的更多相关文章

  1. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  2. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  3. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  4. vue cli 3 & webpack-merge & webpack 3 & bug

    vue cli 3 & webpack-merge & webpack & bug bug webpack-merge & bug webpack-merge ??? ...

  5. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  6. 手把手教你如何安装使用webpack vue cli

    1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...

  7. Vue.js——webpack

    Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...

  8. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  9. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  10. @Vue/Cli 3 Invalid Host header 检测关闭

    Invalid Host header 在本地开发等一般情况下,无论是 local,还是 ip,或者是 0.0.0.0,在 cli 中都默认为合法的,但是有些场景可能会被不支持,比如远程开发,或者是云 ...

随机推荐

  1. 【排障】nginx在reload时候报错invalid PID number

    nginx在reload时候报错invalid PID number nginx重新加载配置文件时候报错,提示无效的PID: 解决的办法有二: 第一种思路是因为是加载配置文件报的错,所以用-c 选项指 ...

  2. [原] Unity下的ElectroServer的连接

    ES的版本是5.4.1,示例目录下code_examples\ConnectAndLoginManually是Unity的连接和登录代码. 除了host和port需要指定,在连接时需要指定连接方式,如 ...

  3. ajax 跨域的几种方式

    网络上跨域的文章大多一样,这里我写下,巩固下自己的知识,顺便做个记录 什么是跨域 这里简单拿百度的网址做个例子:http://www.baidu.com:80 (默认都是80端口.可省略) http ...

  4. hive与hbase集成

    http://blog.csdn.net/vah101/article/details/22597341 这篇文章最初是基于介绍HIVE-705.这个功能允许Hive QL命令访问HBase表,进行读 ...

  5. .Net Core 学习 (1) - ASP.NET Core 总览

    什么是ASP.NET 1.0 开源 - GitHub 跨平台 - 支持Windows, Mac, Linux 从底层进行了优化 - 使用最小开销的模块化组件 - 给与了开发人员很大的灵活性 为什么要使 ...

  6. SQL Server 2012 内存管理 (memory management) 改进

    SQL Server 2012 的内存管理和以前的版本相比,有以下的一些变化. 一.内存分配器的变化 SQL Server 2012以前的版本,比如SQL Server 2008 R2等, 有sing ...

  7. JNI的一些使用

    1.简介 Java Native Interface(JNI) 有时候我们必须要调用本地代码c/c++来克服java中的内存管理和性能限制.java支持通过Java Native Interface( ...

  8. 获取或设置checkbox radio select的值

    单选: 获取值:$("input[name='rdo']:checked").val(); 设置值:$("input[name='rdo'][value='3']&quo ...

  9. Easyui tabs的herf和content属性

    在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ ...

  10. Java实现HTML代码生成PDF文档

    1.IText实现html2pdf,速度快,纠错能力差,支持中文(要求HTML使用unicode编码),但中支持一种中文字体,开源. 2.Flying Sauser实现html2pdf,纠错能力差,支 ...