前面一句安装过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
