项目地址:https://pan.baidu.com/s/1c1Dflp2

使用前提:安装nodejs环境,webpack的配置官网的例子跟着跑一遍,会vue开发

研究webpack+vue研究了一个多星期了,走了很多坑,现在在下面写一下那些年的那些坑。

项目文件夹解释:compaent文件夹是通用的vue组件存放的地方,image文件夹是图片存放地址,professional文件夹是业务文件存放地址  

搭建前必看:我们搭建前在网上找了很多的资料,觉得这篇是不错的对搭建WV环境有好处的:http://www.cnblogs.com/linfangshuhellowored/p/5657285.html

坑1:webpack+vue(以下简称WV)的项目结构

  在使用WV框架之前,我使用的项目结构是普通的那种就是所有的css在一个文件夹 所有的js在一个文件夹 所有的图片在一个文件夹 所有的html在一个文件夹,在WV框架下我的结构是业务主导型 简单来说就是整个项目有一个base.css, 然后vue.js作为base.js,然后其他所有的页面通用型的vue组件合并文一个js文件叫做compaent,这三个文件是每一个html必须引用的 他们直接放在文件的根目录下,然后业务js,业务css,业务html放在同一个文件夹里面。

坑2:多入口

  好像网上好多例子都是但入口,后来找到一些是实现多入口的,但是我们的html文件是几十个总不能一个一个写吧,所以找了一个方法,这个getEntry里面通过nodejs的path模块和glob模块匹配目录下所有的指定文件,这样就省事多了(如果听不懂我在说什么 这个说的比较好:http://www.cnblogs.com/legu/p/5741116.html)

坑3:css分离

  使用es6的写法后,我们页面的css一般都是这种姿势引人用的 var detailsCSS = require('../app/details.css') ,这个时候如果直接打包的话 会把details.css直接打包到页面里,如果有用学想分离的话,可以使用extract-text-webpack-plugin插件,使用方式参考我的代码啊,

坑4:提取公共js

  我们用vue和vue组件 肯定要在页面js里面引入这些js吧 如:import Vue from 'vue',import detailbtn from './components/detailbtn', 如果我们什么都不做直接就打包最后的结果就是每个业务js里面都会包含vue.js的源码 和vue组件的源码,这应该不是我们要的效果吧,我们要的是vue分离出来,vue组件分离出来,我们使用CommonsChunkPlugin插件:他的使用我可以参开这个:http://blog.csdn.net/github_26672553/article/details/52280655

坑5:版本号控制

  清除缓存肯定要用版本号啊,我们分离了css肯定要在页面单独用link方式引入啊,分离了js肯定要script方式单独引入啊,可以使用这个插件:html-webpack-plugin 他的用法是生成html文件,主要是他可以参照模板来生成,而且还支持添加script方式引入js,想想一下:如果我们获取到我们所有的目录html 然后用这个插件对我们所有的html统一处理一下,批量引入分离的js文件 在引入的时候支持hash控制,参考:http://www.cnblogs.com/wonyun/p/6030090.html

坑6:图片资源打包

  图片资源打包其实很简单,只是本身的打包不支持html里面引入的图片 ,这个时候我们用html-withimg-loader插件啊,(全局搜索我的webconfig文件 搜html-withimg-loader)需要安装url-loader插件和html-withimg-loader插件

vue坑的更多相关文章

  1. vue 坑之 vuex requires a Promise polyfill in this browser

    android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1 ...

  2. vue坑 - vue安装vue-cli报错coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)或者说不支

    $ npm install -g vue-cli npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to ...

  3. 每天一点点之vue框架开发 - vue坑-This relative module was not found

    94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...

  4. vue 坑 checked 和v-model共用

    input type=checkbox 当使用v-model绑定某个变量了 ,只能通过绑定的这个变量来控制改input的value, 当:checked同时存在时 后者将无效: html <in ...

  5. 每天一点点之vue框架开发 - vue坑-input 的checked渲染问题

    选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中 ...

  6. 使用VUE框架搭建项目基本步骤

    ps:初入Vue坑的小伙伴们,对于独立做一个项目可能不清楚需要使用哪些资源,这篇随笔希望对大家有所帮助. 第一步:参照vue的官方文档,建立一个vue的项目 # 全局安装 vue-cli $ npm ...

  7. 《论vue在前后端分离项目中的实践之年终总结》

    我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...

  8. uni-app开发踩坑记录

    大部分问题是我在h5端看不到而在android.iOS平台上暴露出来的,不包含小程序 1.:class="['defaultStyle', dynamicStyle]" 不支持直接 ...

  9. vue+ vue-router + webpack 踩坑之旅

    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...

随机推荐

  1. 机器学习:模型泛化(LASSO 回归)

    一.基础理解 LASSO 回归(Least Absolute Shrinkage and Selection Operator Regression)是模型正则化的一定方式: 功能:与岭回归一样,解决 ...

  2. java中try{}catch{}和finally{}的执行顺序问题

     今天我给大家讲解一下java的的错误和异常处理机制以及相关异常的执行顺序问题.如有不足的地方,欢迎批评指正~ 1.首相简单介绍一下java中的错误(Error)和异常(Exception) 错误和异 ...

  3. Git 之Windows环境下学习系列

    Git .SVN .TFS   相同点 不同点 Git     版本控制 优点: 分布式版本控制.无需联网就能版本提交 开源 缺点 入门学习难度高 SVN   优点: 集中式版本控制. 个人开源 缺点 ...

  4. 2015.7.17 case when then else end用法Oralcle与SQLserver一致

    SELECT CASE airway_point_type_id WHEN 1 THEN 'VOR' WHEN 2 THEN 'VOR/DME' WHEN 3 THEN 'NDB' WHEN 10 T ...

  5. delphi 在线程中运行控制台命令(console)

    在编程开发的时候,我们时常会调用windows本身的功能,如:检测网络通断,连接无线wifi等. 虽然,用 windows api 操作可以完美地完成这些操作,但是,函数参数太难了.令人望而生畏,不是 ...

  6. 10-14C#基础--语句(switch....case和for...循环)

    10-14C#基础--语句(2) 一.课前作业:“跟电脑猜拳” 二.switch(定义的变量,参数值)......case.... 注:switch...case大多用于值类型的判断,这里不同于if表 ...

  7. C++深度解析教程学习笔记(2)C++中的引用

    1.C++中的引用 (1)变量名的回顾 ①变量是一段实际连续存储空间的别名,程序中通过变量来申请并命名存储空间 ②通过变量的名字可以使用存储空间.(变量的名字就是变量的值,&变量名是取地址操作 ...

  8. 【Android 多媒体应用】使用 VideoView 播放视频

    1.MainActivity.java import android.os.Bundle; import android.support.v7.app.AppCompatActivity; impor ...

  9. js中的控制结构for-in语句

    var arr=['赵','钱','孙','李']; for(var i=0;i<arr.length;i++){ console.log(arr[i]); } var obj={ name:' ...

  10. 【摘自张宴的"实战:Nginx"】try_files指令

    语法:try_files param1 [param2...paramN] fallback 默认值:none 使用环境: location 该指令用于告诉nginx测试每个文件是否存在,并且使用首先 ...