Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Vue CLI 3: Bootstrap 4が加えられたプロジェクトを簡単につくる

More than 1 year has passed since last update.

Vue CLIは、Vue.jsによるアプリケーションをつくるための、コマンドラインインタフェース(CLI)にもとづく開発ツールです(「Vue CLI 3入門 01: Vue CLIとは」参照)。2018年7月16日にv3.0.0-rc.5が公開されました。さらに、Bootstrap-Vueを使うと、Bootstrap 4が加えられたプロジェクトのひな形を簡単につくれます(図001)。

図001■Bootstrap-Vueサイト

qiita_07_001_001.png

Vue CLI 3をインストールする

まず、Vue CLI 3をグローバルにインストールします(「Vue CLI 3入門 02: インストールする」参照)。v3.0.0-rc.5はリリース前(Release Candidate)の最終段階です。けれども、すでに前のバージョン(vue-cli)は使用が推奨されません(deprecated)。パッケージ名が@vue/cliに変わりましたので、ご注意ください。

npm install -g @vue/cli

macOSで管理者権限が求められたときは、つぎのようにsudoコマンドを添えてインストールし直してください。

sudo npm install -g @vue/cli

Bootstrap-Vueでプロジェクトをつくる

Bootstrap-Vueにはふたつのテンプレートがあります。

  • webpack-simple: 簡易なひな形でテストや小さなアプリケーションをつくる
  • webpack: 多くのオプションが備わった製品用のテンプレートでひな形をつくる

コマンドラインツールでつぎのように打ち込むと、簡易テンプレート(webpack-simple)でプロジェクト(my-project)がつくられます。テンプレートを製品用(webpack)に差し替えれば、製品用のひな形になります。

vue init bootstrap-vue/webpack-simple my-project

? Project name my-project
? Project description A Vue.js project
? Author fumio nonaka
? Use sass? Yes

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev.

メッセージに示されたとおり、ディレクトリを切り替えてインストールし、npm run devと入力すればアプリケーションがローカルサーバーで開かれます。

cd my-project
npm install
npm run dev.

これで、プロジェクト(App.vue)のテンプレートにはBootstrap 4のスタイルが使えるようになりました。たとえば「Buttons」のクラスでリンクをボタンに変えられます(図002)。

<ul>
  <li><a href="https://vuejs.org" target="_blank"
    class="btn btn-primary">Core Docs</a></li>
  <li><a href="https://forum.vuejs.org" target="_blank"
    class="btn btn-success">Forum</a></li>
  <li><a href="https://gitter.im/vuejs/vue" target="_blank"
    class="btn btn-danger">Gitter Chat</a></li>
  <li><a href="https://twitter.com/vuejs" target="_blank"
    class="btn btn-dark">Twitter</a></li>
</ul>

図002■BootstrapのButtonsのスタイルが使える

qiita_07_001_002.png

FumioNonaka
はなし家、もの書き、コード書き。詳しくはwebで。 担当講座: 電気通信大学ウェブシステムデザインプログラム「Web UI・UXプログラミング演習I・Ⅱ」 https://www.websys.edu.uec.ac.jp/ ロクナナワークショップ「Vue.js入門講座」 https://67.org/ws/workshop/detail/0136javascript.html
http://www.fumiononaka.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away