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

最新推荐文章于 2025-06-02 09:18:03 发布

原创

最新推荐文章于 2025-06-02 09:18:03 发布 · 2.2w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue #wabpack #bootstrap

本文介绍了在Windows下利用vue-cli构建网站时，如何导入并使用Bootstrap样式。首先确保安装好vue-cli，然后替换Vue欢迎页面为Bootstrap导航。接着将Bootstrap的css、js、fonts文件放入srcassets目录。通过npm安装jquery，并修改webpack配置以支持外部CSS和JS。最后，在main.js中引入jQuery和Bootstrap.js，解决可能的格式检查错误，重启服务后，成功实现Bootstrap导航的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"></s