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 相关文章推荐
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
js canvas实现五子棋小游戏
Jan 22 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新手上路(六)
2006/10/09 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
JavaScript 参考教程
2006/12/29 Javascript
js实现DIV的一些简单控制
2007/06/04 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
酒店周年庆活动方案
2014/08/21 职场文书
师德承诺书
2015/01/20 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技