文档章节

Vue中如何引入BootStrap?

别回头丶
 别回头丶
发布于 09/11 20:15
字数 564
阅读 20
收藏 0

Vue如何引入BootStrap?

一、安装 Node.JS

因为 Vue 依赖于 Node.JS ,所以先要安装 Node.JS (至少8.9版本)

二、安装 VueCli 工具

  • 命令窗口 输入 npm install -g @vue/cli 安装最新版 VueCli 工具
  • vue -V 可查看Vue版本
  • npm install -g @vue/cli-init 可拉取旧版本

三、创建项目

  • cd D:/VueProjects cd到所要创建的项目目录下
  • vue init webpack helloworld 创建helloworld项目
  • cd helloworld cd到项目根目录
  • npm install
  • npm start 启动项目

四、BootStrap

1、引入 Jquery

因为 BootStrap 依赖于 Jquery ,所以要想使用 BootStrap,必须先引入 Jquery

  • cd D:/VueProjects/helloworld cd到项目根目录

  • npm install jquery -S 下载jquery

  • 找到 build 目录下的 webpack.base.conf.js 文件

  • 加入以下语句:

    var webpack = require('webpack')
    和
    // 增加一个plugins
     plugins: [
       new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery"
       })
     ],
    
  • 添加后文件如下:

    'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vueLoaderConfig = require('./vue-loader.conf')
    var webpack = require('webpack')
    
    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }
    
    
    
    module.exports = {
      context: path.resolve(__dirname, '../'),
      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'),
        }
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
          },
          {
            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"
        })
      ],
      node: {
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // source contains it (although only uses it if it's native).
        setImmediate: false,
        // prevent webpack from injecting mocks to Node native modules
        // that does not make sense for the client
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
      }
    }
    
  • 再 找到 main.js 文件,加入以下语句:

    import $ from 'jquery'
    
  • 测试 Jquery 是否安装成功?

    在HelloWorld.vue中添加:

    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App HelloWorld'
        }
      },
      created(){
        console.log($)
      }
    }
    </script>
    

    启动项目

    结果:

2、引入BootStrap

  • npm install bootstrap --save-dev 下载bootstrap

  • 再找到 main.js ,添加以下语句:

    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap/dist/js/bootstrap.min.js'
    
  • 大功告成,可以愉快的在 Vue 中使用 BootStrap 了。

© 著作权归作者所有

别回头丶
粉丝 3
博文 14
码字总数 18899
作品 0
广州
程序员
私信 提问
vue组件挂载到全局方法的示例代码

在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert、modal等组件每个页面引入就得重复引入,并不像element那样可...

peakedness丶
2018/12/31
97
0
[译] 用 Flask 和 Vue.js 开发一个单页面应用

原文地址:Developing a Single Page App with Flask and Vue.js 原文作者:Michael Herman 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Mcskiller 这篇文章会一步...

Leben_Ito
2018/12/23
0
0
快速上手BootstrapVue

翻译:疯狂的技术宅 原文:blog.logrocket.com/getting-sta… Vue.js 是一个流行的 JavaScript 库,用于在短时间内开发原型。这包括用户界面、前端应用、静态网页和本机移动应用。它以易用的...

前端先锋
05/08
0
0
uniapp + bootstrapvue 移动/PC 一套搞定 (一)配置bootstrapvue

1.准备文件 自己到DCloud官网: http://dcloud.io/ 去下载官方的IDE Hbuilder,新建一个空的uniapp项目即可。 uniapp框架自带优化的vue,我们仅仅需要准备以下三个文件: //bootstrap 4 以上。...

panyunxing
07/24
136
0
10、手把手教 Vue--Mint UI 使用

PS:转载请注明出处 作者: TigerChain 地址: https://www.jianshu.com/p/db776b507065 本文出自 TigerChain 简书 手把手教 Vue 系列 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略...

TigerChain
2018/10/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
47分钟前
3
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
49分钟前
5
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
57分钟前
5
1
正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置

正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置 今天要用正则表达式实现匹配一个词出现一次或者不出现的情况,但是又不仅仅是这么简单的需求。先详细说下我这种情况吧,也许有...

Airship
今天
6
0
第八讲:asp.net C# web 读取文件

本讲主要讲解如何在asp.net页面上传文件。 首先,前台页面: 其次,后台页面: 结果: 1、前台效果: 2、后台结果:

刘日辉
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部