Шаблон Vue + Bootstrap

Я хотел использовать vue и bootstrap для первого запуска веб-фреймворка, но мне не удалось найти несколько примеров. Поэтому я сделал один сам.

# install vue-cli
$ npm install --global vue-cli
# init project
$ vue init webpack vue-bootstrap-template
? Project name erc20-contract
? Project description vue+bootstrap template
? Author chang <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
$ cd vue-bootstrap-template
$ npm run dev

открыть http://локальный:8080

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

изменить App.vue. Добавьте навигационную панель начальной загрузки.

<template>
  <div id="app">
    <header class="app-header">
      <nav class="navbar navbar-expand-sm navbar-dark bg-dark"  style="margin-bottom: 20px">
        <a class="navbar-brand" href="#">
          <img src="./assets/logo.png" width="30" height="30" alt="">
          Test
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav mr-auto" >
            <li class="nav-item">
              <router-link class="nav-link" exact-active-class="active" to="/">Home</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" active-class="active" to="/about">About</router-link>
            </li>
          </ul>  
        </div>
      </nav>
    </header>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

изменил index.js, добавил про маршрут.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

теперь страница выглядит так.

теперь установите пакеты начальной загрузки и зависимости.

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

измените App.vue, добавьте импорт начальной загрузки.

<script>
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.min.js'
export default {
  name: 'App'
}
</script>

теперь на странице отображается красивая навигационная панель начальной загрузки.

О.vue, добавление карты.

<template>
  <div class="about">
  <div class="card border-primary mb-3">
    <div class="card-header">About</div>
    <div class="card-body text-secondary">
      <h5 class="card-title">Vue+Bootrap Templete</h5>
      <p class="card-text">
       This project using Vue, Bootstrap, web3,<br/>
       Some real working project based on this templete is <a href="https://github.com/lcw99/contract-manager">here</a>
      </p>
    </div>
  </div>  
  </div>
</template>
<script>
export default {
  name: 'About'
}
</script>

о странице.

для производства,

NODE_ENV=production npm run build
cp -R dist/ /path/to/production/site

Вот и все. Исходный код этой статьи находится здесь.