2、vue怎么支持less,jquery!

首先我们cmd 命令进入项目的目录!

image.png

然后执行命令

npm i less less-loader -S

注意一定要在项目目录执行!

然后打开build下的webpack.base.conf.js文件!

找到为module的rules添加如下配置:

{
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      },

配置图!

image.png

然后在/src/main.js中,加入

var Less = require('Less');

image.png

然后引入即可!


<style scoped  lang='less'>
h1, h2 {
  font-weight: normal;
  span{
    color:red
  }
}
</style>

还可以用

<style scoped  lang='less'>
@import './index.less'; //引入全局less文件
</style>

试下吧!

1.安装jquery 
npm install jquery --save-dev


2.build/webpack.base.conf.js中, 
导入:

var webpack = require('webpack');


在module.exports = { 内输入

plugins: [ 
new webpack.ProvidePlugin({ 
$:"jquery", 
jQuery:"jquery", 
"window.jQuery":"jquery" 
}) 
]

image.png
3.vue文件中无需导入,可直接使用$和jQuery


写的好!

微信扫一扫赏大洋