vue中引入bootstrap的詳細(xì)教程（步驟）

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:29:59

vue中引入bootstrap的詳細(xì)教程（步驟）

vue中引入bootstrap的詳細(xì)教程（步驟）:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于vue中引入bootstrap的詳細(xì)教程（步驟），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。想要在vue中引入bootstrap，引入的時候需要按照如下的步驟進(jìn)行。1、引入jquery2、引入bootstrap（相關(guān)免費(fèi)視

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue中引入bootstrap的詳細(xì)教程（步驟）:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于vue中引入bootstrap的詳細(xì)教程（步驟），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。想要在vue中引入bootstrap，引入的時候需要按照如下的步驟進(jìn)行。1、引入jquery2、引入bootstrap（相關(guān)免費(fèi)視

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于vue中引入bootstrap的詳細(xì)教程（步驟），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

想要在vue中引入bootstrap，引入的時候需要按照如下的步驟進(jìn)行。

1、引入jquery

2、引入bootstrap（相關(guān)免費(fèi)視頻課程推薦：bootstrap教程）

閱讀本文前，應(yīng)該能夠搭建環(huán)境，使用vue-cli進(jìn)行項(xiàng)目的創(chuàng)建，可以參考文章：

http://www.gxlcms.com/js-tutorial-411565.html

好，下面上貨。

1、首先按照上面文章中的內(nèi)容，新建一個vue工程。

2、使用命令npm install jquery --save-dev 引入jquery。

3、在webpack.base.conf.js中添加如下內(nèi)容：

var webpack = require('webpack')

和

// 增加一個
pluginsplugins: [ 
new webpack.ProvidePlugin({ 
$: "jquery", 
jQuery: "jquery" 
})],

添加完成后，文件內(nèi)容如下：

var path = require('path')
var fs = require('fs')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve(dir) {
 return fs.realpathSync(__dirname + '/' + path.join('..', dir))
}
module.exports = {
 entry: {
 app: './src/main.js'
 },
 output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
 ? config.build.assetsPublicPath
 : config.dev.assetsPublicPath
 },
 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
 'vue$': 'vue/dist/vue.esm.js',
 '@': resolve('src'),
 },
 symlinks: false
 },
 module: {
 rules: [
 {
 test: /\.vue$/,
 loader: 'vue-loader',
 options: vueLoaderConfig
 },
 {
 test: /\.js$/,
 loader: 'babel-loader',
 include: [resolve('src'), resolve('test')]
 },
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
 limit: 10000,
 name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
 },
 {
 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
 loader: 'url-loader',
 options: {
 limit: 10000,
 name: utils.assetsPath('media/[name].[hash:7].[ext]')
 }
 },
 {
 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 loader: 'url-loader',
 options: {
 limit: 10000,
 name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 }
 }
 ]
 },
 // 增加一個plugins
 plugins: [
 new webpack.ProvidePlugin({
 $: "jquery",
 jQuery: "jquery"
 })
 ],
}

4、在main.js中添加內(nèi)容

import $ from 'jquery'

添加完成后，可以在home.vue中嘗試jquery是否好用。

5、修改home.vue的內(nèi)容，一個是嘗試添加bootstrap的代碼，還有事驗(yàn)證jquery的代碼

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h2>Essential Links</h2>
 <ul>
 <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
 <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
 <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
 <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
 <br>
 <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
 </ul>
 <h2>Ecosystem</h2>
 <ul>
 <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
 <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
 <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
 <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
 </ul>
 <div class="btn-group" role="group" aria-label="...">
 <button type="button" class="btn btn-default">Left</button>
 <button type="button" class="btn btn-default">Middle</button>
 <button type="button" class="btn btn-default">Right</button>
 </div>
 <div id="cc">cc</div>
 </div>
</template>
 
<script>
 $(function () {
 alert(123);
 });
 export default {
 name: 'hello',
 data () {
 return {
 msg: 'Welcome to Your Vue.js App'
 }
 }
 }
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 h1, h2 {
 font-weight: normal;
 }
 
 ul {
 list-style-type: none;
 padding: 0;
 }
 
 li {
 display: inline-block;
 margin: 0 10px;
 }
 
 a {
 color: #42b983;
 }
</style>

這樣，使用npm run dev后，能夠在界面上看到，彈出alert，就證明jquery引入成功了。

6、安裝bootstrap，使用命令npm install bootstrap --save-dev

7、安裝成功后，能夠在package.json文件夾中看到bootstrap這個模塊。這時候需要在main.js中添加如下內(nèi)容：

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

添加完成后，重新啟動程序，npm run dev。就能看到界面中的按鈕已經(jīng)是bootstrap的按鈕組了。

最后，附上整個main.js文件的內(nèi)容：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: {App}
})

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue中引入bootstrap的詳細(xì)教程（步驟）

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：步驟使用 VUE

熱門焦點(diǎn)

vue中引入bootstrap的詳細(xì)教程（步驟）

vue中引入bootstrap的詳細(xì)教程（步驟）

vue中引入bootstrap的詳細(xì)教程（步驟）

最新推薦

猜你喜歡

熱門推薦