vue學習（二）模板頁配置(bootstrap)

1、替換我們的顯示頁面

      刪除components下的所有文件，新建模板頁文件夾 layout。

　　

//Layout.vue
<template>
    <div>
        <header>header</header>
        <content>content</content>
        <footer>footer</footer>
    </div>
</template>

　　先增加簡單內容，到這一步，發現項目是會報錯的，跑不起來。

　　我們先把默認項目沒用的東西刪除掉，把App.vue文件代碼調整如下：

//App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "app"
};
</script>

　　入口只有一個空的視圖，下面所有的內容都基友這個空窗口展示。

　　在page文件夾下增加index.vue和login.vue

//index.vue
<template>
  <div>index page</div>
</template>

//login.vue
<template>
    <div>login page</div>
</template>

　　先寫上這些代碼，我們后面再豐富我們的內容。

　 調整router路由文件

　　現在，如果你運行還是會出錯。因為我們還沒有配置路由。

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index'
import Login from '@/page/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Index
    }, {
      path: '/login',
      component: Login
    }
  ]
})

　　默認，我們的首頁，就是我們的 Index 頁

　　好了，我們現在可以跑起來試試了，應該是沒有任何問題了，運行結果出現如下：

　　

　　好像是只顯示了模板頁的內容。

　　我們需要的是，中間內容根據路由來變化，這時候我們需要返回 Layout.vue

　 配置Layout.vue

 　   刪除  <content>content</content> 這一段代碼

　　新增動態內容配置，如下：

　　

//Layout.vue
<template>
    <div>
        <header>header</header>
        <div class="container">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <footer>footer</footer>
    </div>
</template>

　　運行，OK：

　　

2、引用、配置Bootstrap

     安裝jquery

npm install jquery

　　打開build文件夾下的webpack.base.conf.js 
　　頭部添加代碼：

   const webpack = require("webpack");

　　module.exports 中添加代碼：

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],

　　在入口文件main.js中加入代碼：

   import $ from 'jquery' ;

　　我們在index.vue下添加代碼，測試jquery：

<template>
    <div>index page</div>
</template>
<script>
$(function() {
  alert(111);
});
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

　  安裝bootstrap

　　  如下：

   npm i bootstrap

　　 全局引用，在入口文件main.js中加入代碼：

  import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

  import '../node_modules/bootstrap/dist/js/bootstrap.min'

　　這時可能會報錯

This dependency was not found:

* popper.js in ./node_modules/bootstrap/dist/js/bootstrap.min.js

To install it, you can run: npm install --save popper.js

　　因為bootstrap.js不僅依賴jquery還有popper.js，安裝popper.js:

　 npm i popper.js

　　同時在webpack.base.conf.js加入》》》Popper: [‘popper.js’, ‘default’],

plugins: [
    new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:"jquery",
      "windows.jQuery":"jquery",
      Popper: ['popper.js', 'default'],
    })
  ],

　　測試bootstrap：

//index.vue
<template>
    <div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-danger">Left</button>
            <button type="button" class="btn btn-success">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>
</template>

　   結果：

 

好了，下一步我們開始選擇一個bootstrap模型引入。