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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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 header函数分析详解
2011/08/06 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP输出日历表代码实例
2015/03/27 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
php实现简单四则运算器
2020/11/29 PHP
验证手机号码的JS方法分享
2013/09/10 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
React如何避免重渲染
2018/04/10 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
python中元类用法实例
2014/10/10 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
团队精神演讲稿
2013/12/31 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
学生个人评语大全
2015/01/04 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技