争怎路由网：是一个主要分享无线路由器安装设置经验的网站，汇总WiFi常见问题的解决方法。

vue中引入bootstrap的详细图文详细教程（步骤）

时间：2024/5/26作者：未知来源：争怎路由网人气：

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于vue中引入bootstrap的详细教程（步骤），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。

1、引入jquery

2、引入bootstrap（相关免费视频课程推荐：bootstrap教程）

阅读本文前，应该能够搭建环境，使用vue-cli进行项目的创建，可以参考文章：

http://www.php.cn/js-tutorial-411565.html

好，下面上货。

1、首先按照上面文章中的内容，新建一个vue工程。

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

3、在webpack.base.conf.js中添加如下内容：

var webpack = require('webpack')

和

// 增加一个
pluginsplugins: [  
new webpack.ProvidePlugin({    
$: "jquery",    
jQuery: "jquery"  
})],
添加完成后，文件内容如下：
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  
关键词：vue中引入bootstrap的详细图文详细教程（步骤）



Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明：本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除，敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版