windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
来源:互联网 发布:运动员直播软件 编辑:程序博客网 时间:2024/04/29 15:00
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" target="_blank">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> <br> <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" 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="#">{{ 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="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">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="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav></template>这时候运行vue 显示的页面变成:
现在我们加入的bootstrap导航代码已经可以显示出来了,但是有点丑,是因为我们还没把bootstrap的CSS文件加载过来,接下来我们就是要导入CSS文件和JS文件了。
3、下载Bootstrap文件包,然后把css、js、fonts三个文件夹复制到vue项目的src\assets目录下。
4、让vue支持jquery需要先安装jquery插件,通过cmd命令进入项目文件夹,然后运行 cnpm install jquery --save-dev 安装插件
接着分别运行
cnpm install style-loader --save-devcnpm install css-loader --save-devcnpm install file-loader --save-dev安装支持css的插件。
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
如果提示错误
说明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及webpack 构建网站(二)导入bootstrap样式
- windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- windows下vue-cli及webpack 构建网站(一)环境安装
- windows下vue-cli及webpack 构建网站(三)使用组件
- Mac下用vue-cli+webpack+bootstrap实现一个todolist(二)
- webpack构建vue-cli环境
- 如何在vue-cli+webpack构建的项目引入jquery和bootstrap
- vue-cli+webpack 的项目中怎么导入bootstrap与jquery
- 基于vue-cli的Webpack构建
- vue-cli下bootstrap配置
- Mac下用vue-cli+webpack+bootstrap实现一个todo-list(一)
- vue-cli 快速构建vue应用,实现webpack打包
- Vue-cli+router+webpack
- webpack与vue-cli
- vue-cli + webpack + vue-router
- windows/mac 使用webpack构建vue项目
- 从MVC到前后端分离(Rest框架搭建)
- Android CountDownTimer带有动画的倒计时
- 带你玩转Visual Studio——调用约定__cdecl、__stdcall和__fastcall
- Spring读书笔记-----Spring的Bean之设置Bean值
- Variable Naming Rules in C++
- windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
- 搜狗搜微信链接为什么老是失效?
- 10上机练习2
- AsyncTask和Handler对比
- 使用Canvas绘制各种图形
- jsp 页面的提交方式
- linux egrep 查询文件内容
- css之float详解
- 10 LIKE