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各种文件:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
详解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或者命令窗口初始化安装依赖 此时文件夹目录应该是这样 然后
-
详解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&
-
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&
-
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
-
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工具的方法,分享给大家,也给自己留个笔记. 以下操作以正常安装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.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安装以及环境配置 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
随机推荐
- 深入理解AngularJS中的ng-bind-html指令
- OBLOG4.0 OBLOG4.5漏洞利用分析
- Lua中算术运算符的使用示例
- flex 调试无法正常启动原因分析及解决方法
- Java指定保留小数位数的方法
- Java中对象序列化与反序列化详解
- Oracle 细粒度审计(FGA)初步认识
- Python开发如何在ubuntu 15.10 上配置vim
- php动态实现表格跨行跨列实现代码
- 在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
- python进阶教程之模块(module)介绍
- C#使用IHttpModule接口修改http输出的方法
- Android微信端的下拉刷新功能
- 发布三个ajax相关的函数,包括无刷新提交表单等
- 用vbs实现不死帐号的代码
- 访问asp页面出现出现“请求的资源在使用中”的解决办法
- Bootstrap免费字体和图标网站(值得收藏)
- javascript实现div的拖动并调整大小类似qq空间个性编辑模块
- WinForm单例窗体用法实例
- 详解Android权限管理之Android 6.0运行时权限及解决办法