vue之js、css等静态文件的引入(vue路径篇)
1、如何引入如js,css等文件?比如我们想引入jQuery文件或者依赖 若是已下载好的jQuery文件,则这样引入。打开webpack.base.conf.js,在relove加入这段代码// 在开头引入webpack,后面的plugins那里需要var webpack = require('webpack')// resolvemodule.export...
·
1、如何引入如js,css等文件?
比如我们想引入jQuery文件或者依赖
若是已下载好的jQuery文件,则这样引入。
打开webpack.base.conf.js,在relove加入这段代码
// 在开头引入webpack,后面的plugins那里需要
var webpack = require('webpack')
// resolve
module.exports = {
// 其他代码...
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
// webpack 使用 jQuery,如果是自行下载的
// 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
// 如果使用NPM安装的jQuery
'jquery': 'jquery'
}
},
// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
// 其他代码...
}
这样子就可以正确使用jqeury了。
引入jQuery后,比如我们想要引入boostrap,在main.js文件开头加入
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'
也不一定是引入在main.js文件,也可以引入到你想要引用到的组件中。
!!!有一点需要注意的是经过尝试,要把js、css文件等放在src文件夹中。
jQuery用依赖来引入方法:
1、首先在pakage.json里加入
dependencies:{
"jquery" : "*"//*为号为最新版
}
然后在打开这个文件夹中的命令行 npm install 下载依赖。
2、在webpack.base.conf.js里加入
var webpack = require("webpack")
3、在module.exports的最后加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
4、然后重启
npm run dev
5、在main.js 引入
import $ from 'jquery'
更多推荐
已为社区贡献2条内容
所有评论(0)