详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

1、先安装好vue-cli,如果还没有安装好的可以参考:《

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

内容改成

rush:xhtml;">

这时候运行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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...