腳手架搭建的vue項目里引入jquery和bootstrap


引入jquery:

1.在cmd輸入:npm install jquery,回車,等待..

2.在webpack.base.conf.js里進行如下操作:

3.在webpack.prod.conf.js里進行如下操作:

4.在入口文件里引入:

不知道是不是jquery版本的問題,在重構以前寫的頁面時,通過在.vue文件里引入js的方式將寫好的js引入(該js文件里用了jquery插件),部分功能有問題

引入bootstrap

參照網上的方式進行了實踐,生效了。

主要在配置文件里添加了兩個配置文件,這個兩個文件一定要放在一起

1.bootstrap.config.js文件:

module.exports = {

// Default for the style loading
styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader'),

scripts: {
'transition': true,
'alert': true,
'button': true,
'carousel': true,
'collapse': true,
'dropdown': true,
'modal': true,
'tooltip': true,
'popover': true,
'scrollspy': true,
'tab': true,
'affix': true
},
styles: {
"mixins": true,

"normalize": true,
"print": true,

"scaffolding": true,
"type": true,
"code": true,
"grid": true,
"tables": true,
"forms": true,
"buttons": true,

"component-animations": true,
"glyphicons": true,
"dropdowns": true,
"button-groups": true,
"input-groups": true,
"navs": true,
"navbar": true,
"breadcrumbs": true,
"pagination": true,
"pager": true,
"labels": true,
"badges": true,
"jumbotron": true,
"thumbnails": true,
"alerts": true,
"progress-bars": true,
"media": true,
"list-group": true,
"panels": true,
"wells": true,
"close": true,

"modals": true,
"tooltip": true,
"popovers": true,
"carousel": true,

"utilities": true,
"responsive-utilities": true
}
};

2.bootstrap.strap.config.less文件(據說空的也行,沒試過):

@font-size-base: 24px;
@btn-default-color: #444;
@btn-default-bg: #eee;

3.在入口文件通過import '/path/bootstrap.min.js'的方式引入;

4.bootstrap樣式可以采取上述方式引入或者在index.html里引入;

5.其他插件也可通過import方式引入,但部分插件可能會出現問題,解決方案自行google


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM