vue.js+webpack 全局vue中怎么引用并全局使用jquery

webpack中引用bootstrap问题
本人刚开始接触webpack正在尝试使用webpack如何使用第三方库,已经用npm安装了各种加载器和库,配置完之后却发现完全没效果,webpack.config.js文件如下,有无大神教一下我怎么引入bootstrap?var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
index : './src/js/index.js',
vendors: ['jquery','bootstrap']
path: './dist',
filename: "bundle.js",
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
new monsChunkPlugin('vendors', 'vendors.js'),
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml" }
};请问应该如何配置?是我打开方式有问题吗
我是在main.js中使用es6语法类似下面这样直接引入:import './common/css/style.css';
你还没有登录,请先登录或注册慕课网帐号
页面直接引入 没必要用webpack引入 我建议你jquery 也在页面引入
你还没有登录,请先登录或注册慕课网帐号
12428人关注
27255人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2Vue + webpack 项目实践 - 囧克斯
Vue + webpack 项目实践
最近在内部项目中做了一些基于 vue + webpack 的尝试,在小范围和同事们探讨之后,还是蛮多同学认可和喜欢的,所以通过 blog 分享给更多人。
首先,我会先简单介绍一下 vue 和 webpack:
(当然如果你已经比较熟悉它们的话前两个部分可以直接跳过)
是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” 。如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用。废话不多说,来看几个例子:
&script src="vue.js"&&/script&
&div id="demo"&
{{message}}
&input v-model="message"&
var vm = new Vue({
el: '#demo',
message: 'Hello Vue.js!'
首先,代码分两部分,一部分是 html,同时也是视图模板,里面包含一个值为 message 的文本何一个相同值的输入框;另一部分是 script,它创建了一个 vm 对象,其中绑定的 dom 结点是 #demo,绑定的数据是 {message: 'Hello Vue.js'},最终页面的显示效果就是一段 Hello Vue.js 文本加一个含相同文字的输入框,更关键的是,由于数据是双向绑定的,所以我们修改文本框内文本的同时,第一段文本和被绑定的数据的 message 字段的值都会同步更新——而这底层的复杂逻辑,Vue.js 已经全部帮你做好了。
再多介绍一点
我们还可以加入更多的 directive,比如:
&script src="vue.js"&&/script&
&div id="demo2"&
&img title="{{name}}" alt="{{name}}" v-attr="src: url"&
&input v-model="name"&
&input v-model="url"&
var vm = new Vue({
el: '#demo2',
name: 'taobao',
url: '/favicon.ico'
这里的视图模板加入了一个 &img& 标签,同时我们看到了 2 个特性的值都写作了 {{name}}。这样的话,图片的 title 和 alt 特性值就都会被绑定为字符串 'taobao'。
如果想绑定的特性是像 img[src] 这样的不能在 html 中随意初始化的 (可能默认会产生预期外的网络请求),没关系,有 v-attr="src: url" 这样的写法,把被绑定的数据里的 url 同步过来。
没有介绍到的功能还有很多,推荐大家来我(发起并)翻译的
web 组件化
最后要介绍 Vue.js 对于 web 组件化开发的思考和设计
如果我们要开发更大型的网页或 web 应用,web 组件化的思维是非常重要的,这也是今天整个前端社区长久不衰的话题。
Vue.js 设计了一个 *.vue 格式的文件,令每一个组件的样式、模板和脚本集合成了一整个文件, 每个文件就是一个组件,同时还包含了组件之间的依赖关系,麻雀虽小五脏俱全,整个组件从外观到结构到特性再到依赖关系都一览无余 :
并且支持预编译各种方言:
这样再大的系统、在复杂的界面,也可以用这样的方式庖丁解牛。当然这种组件的写法是需要编译工具才能最终在浏览器端工作的,下面会提到一个基于 webpack 的具体方案。
从功能角度,template, directive, data-binding, components 各种实用功能都齐全,而 filter, computed var, var watcher, custom event 这样的高级功能也都洋溢着作者的巧思;从开发体验角度,这些设计几乎是完全自然的,没有刻意设计过或欠考虑的感觉,只有个别不得已的地方带了自己框架专属的 v- 前缀。从性能、体积角度评估,Vue.js 也非常有竞争力!
介绍 webpack
是另一个近期发现的好东西。它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
举个例子,现在有个脚本主文件 app.js 依赖了另一个脚本 module.js
var module = require('./module.js')
... module.x ...
// module.js
exports.x = ...
则通过 webpack app.js bundle.js 命令,可以把 app.js 和 module.js 打包在一起并保存到 bundle.js
同时 webpack 提供了强大的 loader 机制和 plugin 机制,loader 机制支持载入各种各样的静态资源,不只是 js 脚本、连 html, css, images 等各种资源都有相应的 loader 来做依赖管理和打包;而 plugin 则可以对整个 webpack 的流程进行一定的控制。
比如在安装并配置了 css-loader 和 style-loader 之后,就可以通过 require('./bootstrap.css') 这样的方式给网页载入一份样式表。非常方便。
webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document”的脚本、把图片转换成一个图片地址的 js 变量或 base64 编码等),然后用 CommonJS 的机制管理起来。一开始对于这种技术形态我个人还是不太喜欢的,不过随着不断的实践和体验,也逐渐习惯并认同了。
最后,对于之前提到的 Vue.js,作者也提供了一个叫做 vue-loader 的 ,可以把 *.vue 文件转换成 webpack 包,和整个打包过程融合起来。所以有了 Vue.js、webpack 和 vue-loader,我们自然就可以把它们组合在一起试试看!
项目实践流程
回到正题。今天要分享的是,是基于上面两个东西:Vue.js 和 webpack,以及把它们串联起来的 vue-loader
Vue.js 的作者以及提供了一个基于它们三者的 (链接已失效)。而我们的例子会更贴近实际工作的场景,同时和团队之前总结出来的项目特点和项目流程相吻合。
目录结构设计
&components& 组件目录,一个组件一个 .vue 文件
&lib& 如果实在有不能算组件,但也不来自外部 (tnpm) 的代码,可以放在这里
&src& 主应用/页面相关文件
app.html 主 html
app.vue 主 vue
app.js 通常做的事情只是 var Vue = require('vue'); new Vue(require('./app.vue'))
&dist& (ignored)
&node_modules& (ignored)
gulpfile.js 设计项目打包/监听等任务
package.json 记录项目基本信息,包括模块依赖关系
README.md 项目基本介绍
通过 gulpfile.js 我们可以设计整套基于 webpack 的打包/监听/调试的任务
包的官方文档里推荐的写法是这样的:
var gulp = require('gulp');
var webpack = require('gulp-webpack');
var named = require('vinyl-named');
gulp.task('default', function() {
return gulp.src(['src/app.js', 'test/test.js'])
.pipe(named())
.pipe(webpack())
.pipe(gulp.dest('dist/'));
我们对这个文件稍加修改,首先加入 vue-loader
tnpm install vue-loader --save
.pipe(webpack({
loaders: [
{ test: /\.vue$/, loader: 'vue'}
其次,把要打包的文件列表从 gulp.src(...) 中抽出来,方便将来维护,也有机会把这个信息共享到别的任务
var appList = ['main', 'sub1', 'sub2']
gulp.task('default', function() {
return gulp.src(mapFiles(appList, 'js'))
* @private
function mapFiles(list, extname) {
return list.map(function (app) {return 'src/' + app + '.' + extname})
现在运行 gulp 命令,相应的文件应该就打包好并生成在了 dist 目录下。然后我们在 src/*.html 中加入对这些生成好的 js 文件的引入:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Main&/title&
&div id="app"&&/div&
&script src="../dist/main.js"&&/script&
用浏览器打开 src/main.html 这时页面已经可以正常工作了
监听更加简单,只要在刚才 webpack(opt) 的参数中加入 watch: true 就可以了。
.pipe(webpack({
loaders: [
{ test: /\.vue$/, loader: 'vue'}
watch: true
当然最好把打包和监听设计成两个任务,分别起名为 bundle 和 watch:
gulp.task('bundle', function() {
return gulp.src(mapFiles(appList, 'js'))
.pipe(named())
.pipe(webpack(getConfig()))
.pipe(gulp.dest('dist/'))
gulp.task('watch', function() {
return gulp.src(mapFiles(appList, 'js'))
.pipe(named())
.pipe(webpack(getConfig({watch: true})))
.pipe(gulp.dest('dist/'))
* @private
function getConfig(opt) {
var config = {
loaders: [
{ test: /\.vue$/, loader: 'vue'}
if (!opt) {
return config
for (var i in opt) {
config[i] = opt
return config
现在你可以不必每次修改文件之后都运行 gulp bundle 才能看到最新的效果,每次改动之后直接刷新浏览器即可。
打包好的代码已经不那么易读了,直接在这样的代码上调试还是不那么方便的。这个时候,webpack + vue 有另外一个现成的东西:source map 支持。为 webpack 加入这个配置字段 devtool: 'source-map':
var config = {
loaders: [
{ test: /.vue$/, loader: 'vue'}
devtool: 'source-map'
再次运行 gulp bundle 或 gulp watch 试试看,是不是开发者工具里 debug 的时候,可以追踪断点到源代码了呢:)
完整的 javascript 代码如下:
var gulp = require('gulp')
var webpack = require('gulp-webpack')
var named = require('vinyl-named')
var appList = ['main']
gulp.task('default', ['bundle'], function() {
console.log('done')
gulp.task('bundle', function() {
return gulp.src(mapFiles(appList, 'js'))
.pipe(named())
.pipe(webpack(getConfig()))
.pipe(gulp.dest('dist/'))
gulp.task('watch', function() {
return gulp.src(mapFiles(appList, 'js'))
.pipe(named())
.pipe(webpack(getConfig({watch: true})))
.pipe(gulp.dest('dist/'))
* @private
function getConfig(opt) {
var config = {
loaders: [
{ test: /\.vue$/, loader: 'vue'}
devtool: 'source-map'
if (!opt) {
return config
for (var i in opt) {
config[i] = opt[i]
return config
* @private
function mapFiles(list, extname) {
return list.map(function (app) {return 'src/' + app + '.' + extname})
最后,杜拉拉不如紫罗兰
做出一个 vue + webpack 的 generator,把这样的项目体验分享给更多的人。目前我基于团队内部在使用的轻量级脚手架工具写了一份名叫 just-vue 的 generator,目前这个 generator 还在小范围试用当中,待比较成熟之后,再分享出来
其实上面提到的 just-vue 脚手架已经远不止文章中介绍的东西了, 我们在业务落地的“最后一公里”做了更多的沉淀和积累,比如自动图片上传与画质处理、rem单位自动换算、服务端/客户端/数据埋点接口的梳理与整合、自动化 htmlone 打包与 awp 发布等等。它们为支持业务的开发者提供了更简单高效的工作体验。 篇幅有限,更多内容我也希望将来有机会再多分享出来。
最后再次希望大家如果有兴趣的话可以来玩一下,无线前端组内的同学我都愿意提供一对一入门指导:)
Just Vue!
添加新评论 &
: 挺有意思的
: 线下 - 囧克斯
[url=http://www.ghu92s3x9bj7p5a2ag8726x4n...
: vue官方github仓库切换branch就能看到了!
: @9aoyang谢谢,已经修正了
: 我们刚出了课程,欢迎大家帮忙瞅瞅。vue.js 2:
: "学者爱上命令行"的“学者”是不是应该改为“学着”
: 说的很好~
: 大牛犀利,言语中,作者对技术的荒蛮生长的各方面东西,保持谨慎接受。
: 我来了。温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
"dependencies": {
"admin-lte": "*",
"jquery":"^2.2.3",
"axios": "*",
"font-awesome": "*",
"vue": "^2.3.3",
"vue-router": "^2.3.1"
},2.修改 &build/webpack.base.conf.js<font color="#c7254e"
face="Source Code Pro, Consolas, Menlo, Monaco, Courier New, monospace"
>加入以下内容:var webpack = require('webpack')//这样就可以正确的使用jQuery了// 增加一个pluginsplugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
],如图plugins 位置&3. 在 main.js 中 引入即可import 'jquery/dist/jquery.min.js'import 'admin-lte/bootstrap/js/bootstrap.min.js'import 'admin-lte/plugins/fastclick/fastclick.js'import 'admin-lte/dist/js/app.min.js'import 'admin-lte/dist/js/demo.js'
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件',
blogAbstract:'参考自:
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人:
{list a as x}
{if !!b&&b.length>0}
他们还推荐了:
{list b as y}
转载记录:
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}本文介绍完成了后,引入的实践步骤。
由于slick依赖于jQuery,因此要先引入jQuery。
先看一下工程的结构。
1. 使用expose-loader引入jQuery
按照,引用全局的jQuery,识别$和jQuery变量。
注:此处的i是install的简写
npm i expose-loader --save
npm i jQuery --save
(2)在main.js中引入
import 'expose-loader?$!jquery'
(3)修改配置文件
修改在build文件夹下的webpack.base.conf.js文件。
注:官方提供的以下方式报错:
test: require.resolve('jquery'),
loader: 'expose-loader',
options: 'jQuery'
loader: 'expose-loader',
options: '$'
尝试这种方式有效。
test: require.resolve('jquery'),
loader: 'expose-loader?jQuery!expose-loader?$'
完成后,我们发现在浏览器的console中,分别输入window.$和window.jQuery已经有值了。表明jQuery已经引入成功。
2. 引入slick
在main.js中引入slick,请正确书写路径。
import './lib/slick.js'
本文已收录于以下专栏:
相关文章推荐
正文1.安装jquery依赖npm install jquery --save2.修改两处配置文件module.exports = {
// 其他代码...
resolve: {
1. 文件目录
build/webpack.base.conf.js
2. 修改位置:
var webpack = require(&#39;webpack&#39;)11plugins: [
程序员升职加薪指南!还缺一个“证”!
CSDN出品策划程序员9月规划,专为码农的升职加薪保驾护航,程序员的捷径,你get到了吗?听说阅读了这篇文章的人,都已实现了小梦想~快来揭秘!
s1: 安装依赖&#160;
npm install jquery --save-dev
s2:配置webpack.base.conf.js
* jquery 引入s...
1&首先安装nodejs 版本5.0以上
node -v &#160;(测试安装好了没有--安装好了就不用安装了)
**可以依赖淘宝镜像(如果需要就安装)
npm install cnpm -g --regis...
原文链接:/pandabunny/p/5417938.html
感谢这位哥们儿的无私分享
在vue-cli 生成的工程中引入jquery...
写个插件文档:/guide/plugins.html1.在components 目录下新建一个validate.js:export default{
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)

我要回帖

更多关于 vue main.js 全局变量 的文章

 

随机推荐