前面一句安裝過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啦
現(xiàn)在到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