vue-cli如何引入bootstrap工具的方法

本文介绍了vue-cli如何引入bootstrap工具的方法，分享给大家，也给自己留个笔记。

以下操作以正常安装node环境为前提。

1.引入jq：

在npm控制台中，进入项目目录，然后输入指令npm install jquery --save-dev（npm换成cnpm更好，国内环境下使用cnpm下载速度更快）。

2.修改build目录下的webpack.base.conf.js配置文件：

1）加入webpack对象：var webpack=require('webpack');

2）在module.exports里面加入以下配置：

plugins: [ 

 　　　　new webpack.ProvidePlugin({ 

 　　　　　　$:"jquery", 

　　　　　　 jQuery:"jquery", 

　　　　　　 "windows.jQuery":"jquery" 

　　　　 }) 

　　]

3）在入口文件main.js中加入：import jquery from 'jquery'

3.引入bootstrap：

1）修改webpack.base.conf.js文件：

alias: { 

　　　　 'vue$': 'vue/dist/vue.esm.js', 

　　　　 '@': resolve('src'), 

　　　　 'assets': path.resolve(__dirname, '../src/assets'), 

　　　　 'jquery': "jquery/src/jquery" 

　　 }

2）在入口文件main.js中加入：

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

3）在assets文件目录中拷贝bootstrap各种文件：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue-cli快速构建项目以及引入bootstrap、jq

    详解vue-cli快速构建项目以及引入bootstrap、jq

    vue-cli脚手架工具快速构建项目架构: ..首先默认了有已经安装了node... npm install -g vue-cli                   全局安装vue-cli vue init webpack cnm                  生成项目名为cnm的的项目模板,cnm自定义 npm install                                   到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖 此时文件夹目录应该是这样 然后

  • Vue Cli与BootStrap结合实现表格分页功能

    1.首先需要在vue-cli项目中配置bootstrap,jquery 2. 然后新建vue文件,如index.vue,index.vue内容如下: 3.配置路由即可运行实现. <template> <div class="tTable container body-content"> <div class="form-group"> <div class="form-group"> <div

  • windows下vue-cli导入bootstrap样式

    windows下vue-cli导入bootstrap样式

    1.先安装好vue-cli,如果还没有安装好的可以参考:<windows下vue-cli及webpack 构建网站(一)环境安装> 2.安装好之后Vue的欢迎界面,我们要做个例子导入bootstrap的样式,就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧,打开Src文件夹下面的components组件目录,然后打开 Hello.vue文件,把 <h1>{{ msg }}</h1> <h2>Essential Links</h2&

  • 详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    1.先安装好vue-cli,如果还没有安装好的可以参考:<windows下vue-cli及webpack 构建网站(一)环境安装> 2.安装好之后Vue的欢迎界面,我们要做个例子导入bootstrap的样式,就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧,打开Src文件夹下面的components组件目录,然后打开 Hello.vue文件,把 <h1>{{ msg }}</h1> <h2>Essential Links</h2&

  • vue-cli+webpack在生成的项目中使用bootstrap实例代码

    vue-cli+webpack在生成的项目中使用bootstrap实例代码

    在html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目(名字任意) vue init webpack vuestrap 在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意). ? Project name v

  • vue-cli如何引入bootstrap工具的方法

    vue-cli如何引入bootstrap工具的方法

    本文介绍了vue-cli如何引入bootstrap工具的方法,分享给大家,也给自己留个笔记. 以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快). 2.修改build目录下的webpack.base.conf.js配置文件: 1)加入webpack对象:var webpack=require('webpack'); 2)在mod

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue cli webpack中使用sass的方法

    1:安装依赖 npm install sass-loader node-sass --save-dev 2:html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid $h

  • vue element项目引入icon图标的方法

    为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的

  • Vue页面中引入img图片的方法

    我们在学习html的时候,图片标签<img>引入图片 <img src="../assets/images/avatar.png" width="100%"> 但是这样会有2个弊端: 因为采用绝对路径引入,所以如果后面这张图片移动了目录,就需要修改代src里的路径 如果这张图片在同一页面内有多个地方要使用到,就需要引入多次,而且图片移动了目录,这么多地方都要修改src路径 怎么办?使用动态路径import.require 首先讲讲这两个兄弟,

  • 代替Vue Cli的全新脚手架工具create vue示例解析

    目录 前言 npm init npx 源码 主流程入口 获取参数 对话选项 默认值 emptyDir函数 模板写入 简述 快照 总结 前言 美国时间 2021 年 10 月 7 日早晨,Vue 团队等主要贡献者举办了一个 Vue Contributor Days 在线会议,蒋豪群(知乎胖茶,Vue.js 官方团队成员,Vue-CLI 核心开发),在会上公开了create-vue,一个全新的脚手架工具. create-vue 使用 npm init vue 一行命令就能快速的创建基于Vite的Vu

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法（css、js、less）

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • node.js与vue cli脚手架的下载安装配置方法记录

    node.js与vue cli脚手架的下载安装配置方法记录

    目录 一.node.js安装以及环境配置 1.下载vue.js 2.安装node.js 3.检查node程序是否安装成功 4.更改默认路径 5.添加环境变量 5.测试安装是否成功 二.安装vue-cli脚手架 1.检查node环境是否安装好 2.更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm 3.开始安装vue-cli 4.生成项目 5.打包上线 总结 一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en

  • Vue项目如何引入bootstrap、elementUI、echarts

    引入bootstrap 安装依赖包 cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev 全局引入 在项目中根目录下的main.js中添加如下代码: import 'bootstrap' import $ from 'jquery' 在vue文件中引用 <script> import 'bootstrap/dist/css/bootstrap.min.

  • VUE项目中引入JS文件的方法总结

    目录 1.在index.html页面使用script标签引入 2.在main.js中使用window.moduleName 使用 3.手动添加export 4. 使用import方式,把需要的js库中的方法挂载到全局 补充:Vue3如何引用全局JS文件 总结 在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址.这样引入后的内容是全局的,可以在所有地方使用. <!D

随机推荐