①npm install boostrap@4.0.0 --save @4.0.0为版本号

②在项目的main.js中添加

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

import 'bootstrap/dist/js/bootstrap.min.js'
//这里读取是从项目下的node_modules中读取

到此,就可以在项目中使用bootstrap的东西了.

Vue项目使用bootstrap的更多相关文章

  1. vue项目引入bootstrap正确姿势

    vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...

  2. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  3. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  4. 05 vue项目01-组件关系、bootstrap

    1.django后端项目 1.项目预期 配置前端静态资源            页面展示 2.django项目代码 主url from django.contrib import admin from ...

  5. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  6. 前端学习笔记系列一：10整体移动vscode代码块、VSCode 使用 stylus，配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  7. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  8. Vue项目使用CDN优化首屏加载

    前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打 ...

  9. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

随机推荐

  1. c#中WebApi开发遇到的坑

    一.如何新建一个webApi项目 打开VS→找到解决方案→新建项目→类库或web应用程序→选择空的WebApi项目→在Global.asax文件的Application_Start方法中注册WebAp ...

  2. Excel无法打开文件xxx.xlsx，因为文件格式或文件扩展名无效。请确定文件未损坏，并且文件扩展名与文件的格式匹配

    office版本:2016 系统版本:win10 问题描述: 1.桌面新建excel表格后,打开时,提示“Excel无法打开文件xxx.xlsx,因为文件格式或文件扩展名无效.请确定文件未损坏,并且文 ...

  3. Beyond Compare相同文件为何显示差异

    原文地址: http://www.beyondcompare.cc/wenti/wenjian-chayi.html Beyond Compare是一款经典老牌且优秀的专业级文本比较工具,它可以很方便 ...

  4. STM32F103引脚功能定义

  5. Winform 图片预览列表+分页显示

    针对图片列表展示信息,一开始没有做过相关类似的功能,大多都是以表格行显示为主,所以刚开始实现这个功能的时候是懵逼的.无从下口.在网上搜索一时半会也没找到合适的解决方案.大致就是类似于下图这样,每条数据 ...

  6. Flask-Migrate

    终于到了Flask-Migrate,之前在看Flask-SQLAlchemy的时候, Flask支持 makemigration / migrate 吗? 答案在这里该诉你,如果你同时拥有两个三方组件 ...

  7. CAN双机通讯调试小结(SJA1000与MCP2515通讯)

    2011-12-07 21:36:02. 效果图: 1,51的SJA1000自收自发测试完成,见上一篇小结. 2,SJA1000自测完成后,再自测MCP2515就非常容易.主要是设置工作模式为回环模式 ...

  8. create-react-app不暴露配置设置proxy代理

    此方法可以在不暴露配置的情况下直接设置代理,非常便捷 在package.json里添加 "proxy":"http://institute.dljy.lzdev" ...

  9. React Native之遇到的问题

    问题一:使用 Android Studio 运行 React Native 新项目时,报错:Unable to load script from assets 'index.android.bundl ...

  10. js 获取屏幕或元素宽高...

    窗口相对于屏幕顶部距离 window.screenTop 窗口相对于屏幕左边距离 window.screenLeft, 屏幕分辨率的高 window.screen.height, 屏幕分辨率的宽 wi ...