详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
1、先安装好vue-cli，如果还没有安装好的可以参考：《》
2、安装好之后Vue的欢迎界面，我们要做个例子导入bootstrap的样式，就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧，打开Src文件夹下面的components组件目录，然后打开 Hello.vue文件，把
{{ msg }}
Essential Links
内容改成
这时候运行vue 显示的页面变成：
现在我们加入的bootstrap导航代码已经可以显示出来了，但是有点丑，是因为我们还没把bootstrap的CSS文件加载过来，接下来我们就是要导入CSS文件和js文件了。
3、下载Bootstrap文件包，然后把css、js、fonts三个文件夹复制到vue项目的src\assets目录下。
4、让vue支持jQuery需要先安装jquery插件，通过cmd命令进入项目文件夹，然后运行 cnpm install jquery --save-dev 安装插件
接着分别运行
rush:bash;">
cnpm install style-loader --save-dev
cnpm install
css-loader --save-dev
cnpm install file-loader --save-dev
安装支持css的插件。
5、修改build文件夹下面的webpack.base.conf.js文件，让其支持外部的css和js，首先打开文件后在头部加入：
rush:js;">
var webpack = require('webpack')
然后在
rush:js;">
module.exports = {
entry: {
app: './src/main.js'
},
后面加
rush:js;">
plugins: [
new webpack.ProvidePlugin({
$: "jquery",jQuery: "jquery","windows.jQuery": "jquery"
})
],
把
rush:js;">
alias: {
'vue$': 'vue/
dist/vue.common.js','src': path.resolve(__dirname,'../src'),'assets': path.resolve(__dirname,'../src/assets'),'components': path.resolve(__dirname,'../src/components')
}
改成
rush:js;">
alias: {
'vue$': 'vue/
dist/vue.common.js','../src/components'),jquery: "jquery/src/jquery"
}
保存文件
6、接着修改 src文件夹下面的main.js文件，打开文件之后在顶部加入
rush: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 下面的
rush:js;">
{
test: /\.js$/,loader: 'eslint',include: projectRoot,exclude: /node_modules/
}
代码，修改成
rush:js;">
{
test: /\.js$/,exclude: [/node_modules/,/js/]
}
接着保存之后运行npm run dev
就可以看到导航的效果出来了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/bootstrap/38555.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
