windows下vue-cli导入bootstrap样式


Posted in Javascript onApril 25, 2017

1、先安装好vue-cli,如果还没有安装好的可以参考:《windows下vue-cli及webpack 构建网站(一)环境安装》

2、安装好之后Vue的欢迎界面,我们要做个例子导入bootstrap的样式,就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧,打开Src文件夹下面的components组件目录,然后打开 Hello.vue文件,把

<h1>{{ msg }}</h1>
  <h2>Essential Links</h2>
  <ul>
   <li><a href="https://vuejs.org" rel="external nofollow" target="_blank">Core Docs</a></li>
   <li><a href="https://forum.vuejs.org" rel="external nofollow" target="_blank">Forum</a></li>
   <li><a href="https://gitter.im/vuejs/vue" rel="external nofollow" target="_blank">Gitter Chat</a></li>
   <li><a href="https://twitter.com/vuejs" rel="external nofollow" target="_blank">Twitter</a></li>
   <br>
   <li><a href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" target="_blank">Docs for This Template</a></li>
  </ul>
  <h2>Ecosystem</h2>
  <ul>
   <li><a href="http://router.vuejs.org/" rel="external nofollow" target="_blank">vue-router</a></li>
   <li><a href="http://vuex.vuejs.org/" rel="external nofollow" target="_blank">vuex</a></li>
   <li><a href="http://vue-loader.vuejs.org/" rel="external nofollow" target="_blank">vue-loader</a></li>
   <li><a href="https://github.com/vuejs/awesome-vue" rel="external nofollow" target="_blank">awesome-vue</a></li>
  </ul>
 </div>
</template>

内容改成

<template>
 <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
   <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ msg }}</a>
   </div>

   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li class="dropdown">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
       <li class="divider"></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
       <li class="divider"></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >One more separated link</a></li>
      </ul>
     </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
     <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
     </div>
     <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li class="dropdown">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
       <li class="divider"></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
      </ul>
     </li>
    </ul>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
 </nav>
</template>

这时候运行vue 显示的页面变成:

windows下vue-cli导入bootstrap样式

现在我们加入的bootstrap导航代码已经可以显示出来了,但是有点丑,是因为我们还没把bootstrap的CSS文件加载过来,接下来我们就是要导入CSS文件和JS文件了。

3、下载Bootstrap文件包,然后把css、js、fonts三个文件夹复制到vue项目的src\assets目录下。

windows下vue-cli导入bootstrap样式

4、让vue支持jQuery需要先安装jquery插件,通过cmd命令进入项目文件夹,然后运行 cnpm install jquery --save-dev 安装插件

windows下vue-cli导入bootstrap样式

接着分别运行

cnpm install style-loader --save-dev 
cnpm install css-loader --save-dev 
cnpm install file-loader --save-dev

安装支持css的插件。

windows下vue-cli导入bootstrap样式

5、修改build文件夹下面的webpack.base.conf.js文件,让其支持外部的css和js,首先打开文件后在头部加入:

var webpack = require('webpack')

然后在

module.exports = {
 entry: {
  app: './src/main.js'
 },

后面加

plugins: [
 new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "windows.jQuery": "jquery"
 })
],


alias: {
 'vue$': 'vue/dist/vue.common.js',
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}

改成

alias: {
 'vue$': 'vue/dist/vue.common.js',
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components'),
 jquery: "jquery/src/jquery"
}

保存文件

6、接着修改 src文件夹下面的main.js文件,打开文件之后在顶部加入

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

接着保存之后重启一下服务 npm run dev

如果提示错误

windows下vue-cli导入bootstrap样式

说明bootstrap.js文件格式不匹配不能通过webpack的格式检查,这样我们就需要在webpack的配置文件里面把js文件设置成不检查格式,打开build文件夹下的webpack.base.conf.js文件,找到 preLoaders 下面的

{
 test: /\.js$/,
 loader: 'eslint',
 include: projectRoot,
 exclude: /node_modules/
}

代码,修改成

{
 test: /\.js$/,
 loader: 'eslint',
 include: projectRoot,
 exclude: [/node_modules/,/js/]
}

接着保存之后运行npm  run dev

就可以看到导航的效果出来了

windows下vue-cli导入bootstrap样式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery制作LED 时钟特效
Feb 01 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
详解webpack 热更新优化
Sep 13 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
js实现内置计时器
Dec 16 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 #Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 #Javascript
vuejs如何配置less
Apr 25 #Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 #Javascript
微信小程序中显示html格式内容的方法
Apr 25 #Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 #Javascript
详解Vue 动态添加模板的几种方法
Apr 25 #Javascript
You might like
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
js表单序列化判断空值的实例
2017/09/22 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python求crc32值的方法
2014/10/05 Python
python实现淘宝购物系统
2019/10/25 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
小结Python的反射机制
2020/09/28 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
股权收购意向书
2014/04/01 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
干部考察材料范文
2014/12/24 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Python anaconda安装库命令详解
2021/10/16 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android