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'