vue-cli中使用jq、bootstrap、less

前面一句安装过nodejs vue vue-cli
直接上手啦。

1.初始化项目

vue init webpack 项目名

2.因为bootstap是以来jq运行的。在下载一波jq

npm install jquery --save-dev

3.在初始化项目main.js中引入jq

import $ from 'jquery'

4.build中webpack.base.conf.js的顶部引入webpack

var webpack=require('webpack');

5.在build中webpack.base.conf.js的module.exports中添加

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

6.再下载一波bootstrap

npm install bootstrap@3 --save-dev

7.在main.js中引入bootstrap的css和js文件

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.min.js"

ok啦
现在到hello组件中添加试试

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

image.png

---

1.更改样式下载less

npm install less less-loader --save-dev

2.在build中webpack.base.conf.js的module.exports的module中的rules后面添加

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

然后就可以在lang中写less可以用啦～

  <div class="haha">
    123
  </div>

<style lang="less" scoped>
 .haha{
   background-color: salmon;
   font-size: 20px;
 }
</style>

image.png