在vue中引入jquery、css-loader、style-loader、file-loader、less-loader 环境配置

 

步骤一：安装js依赖

cnpm install jquery --save-dev

 

步骤二：安装css依赖

cnpm install style-loader --save-dev

cnpm install css-loader --save-dev

cnpm install file-loader --save-dev

 

步骤三：安装less依赖

npm install less less-loader --save

 

步骤四：修改build/webpack.base.conf.js文件

(1)在开头引入webpack（后面的plugins那里需要）

var  webpack = require('webpack')

(2)添加jquery插件，

在module.exports = {  entry: {app:'./src/main.js'}的最后面加

 plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ]

(4)配置loader加载依赖，

在修改module里面

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /\.css$/,

loader: "style-loader!css-loader",

},

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

},

注意：如果utils.js文件里面已经添加了less、css这里不用添加上面后两个test了，否则会报错！！！

(5)配置字体loader加载依赖

{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},

{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},

{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},

{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},

{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"}

步骤六：接着修改 src文件夹下面的main.js文件，打开文件之后在顶部加入

import'./assets/css/bootstrap.css'

import'./assets/js/bootstrap.min.js'

import'./assets/less/less.less'

现在就可使用less、jquery,如下图所示：