lavavel+Vue.js個人開発：Vue.jsの環境構築手順【Vue CLI+bootstrap4】

laravel+Vue.jsで個人開発をしています。
今回、個人開発でVue CLIを利用したVue.js開発環境の構築をしたので、その手順を記録します。

【バージョン条件】
laravel:7.0
vue:2.6.11
bootstrap:4.5.0

前提条件

今回はパッケージ管理としてyarnを利用しました。
yarnを利用するためにはnode.jsとnpmがすでにインストールされている必要があったので確認。

コンソールで

node -v 
npm -v

と入力し、バージョンが表示されたらすでにインストールされています。
いつインストールしたか覚えてませんが、知らぬ間に入っていました笑

※もしインストールしていない場合は、node.js、npmの順番にインストールすれば大丈夫です。
インストール方法は調べてば分かりやすい記事がたくさんあります。

yarnインストール

yarnをインストールします。

brew install yarn

※npmも同様にパッケージ管理ソフトなので必ずしもyarnをインストールする必要はないそうです。

インストールが完了したら、yarnのパスを通します。（どのフォルダにいてもyarnコマンドが使えるようにする）

export PATH="$PATH:`yarn global bin`"

どこのフォルダでもいいのでyarnのバージョンを確認するコマンドを打ちます。

yarn -v

バージョンか表示されれば、インストール＆パスを通す作業は完了です。

Vue CLIをインストール

Vue CLI使ってVue.jsを使うってどうやってどういうこと？
と思うかもしれません。私がそうでした。

「そもそもVue CLIって何者よ？」

これに関しては、実際にやってみないと掴みにくいと思いますが、僕なりのイメージをお伝えします。

Vue.jsを使おうと思ったら実はとても簡単です。

Jqueryのように、scriptタグで下記のcdnを読み込むことで、普通にhtmlファイルで使うことができます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue.jsの理解をする上では、まずはhtmlファイルに部分的にVue.jsを使ってみるという手順の方がいいかもしれません。

しかし、Vue.jsはJavaScriptのフレームワークです。
フレームワークというのは、プログラミング開発をより効率的に行うことができる「工作キット」のような存在です。

Vue.jsで効率よく開発するための「工作キット」を準備してくれる存在、それが「Vue CLI」ということ。

つまりは、Vue CLIを使うことでVue.jsの開発で役に立つライブラリ等を勝手に準備してくれる訳ですね。

参考までに公式の文章を和訳したものを載せておきます。

【引用】
Vue CLIは、Vueエコシステムの標準的なツールベースラインになることを目指しています。これにより、さまざまなビルドツールが適切なデフォルトとスムーズに連動し、構成に数日費やす代わりにアプリの作成に集中できます。

前置きが長くなりましたが、インストール手順はとても簡単でした。

npm install -g @vue/cli

もしくは

yarn global add @vue/cli

でインストール可能です。

インストールが完了したら、早速Vue CLIでプロジェクトを作成してみます。

Vue CLIでプロジェクト作成

プロジェクトを作りたいフォルダ内で下記コマンドを実行。
※インストールが完了するとプロジェクト名で指定した名前のフォルダが出来上がります。

vue create プロジェクト名

インストールが開始すると、色々設定条件について質問されます。

? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

ここは、Vue CLIを勉強するだけなら「 default（babel, eslint） 」を選択するのが無難らしいですが、、、

私はbootstrapをscssを通して使いたかったため、下記のように細かく自分で設定していきました。
設定についてはこちらの記事を参考にしました。

【Vue.js】Vue-CLI(4.1.1)でSCSSを読み込む手順

以下僕が今回の環境構築で設定した内容です。

? Check the features needed for your project: 
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

scssを使うためにはCSS Pre-processorsにチェックする必要があるそうです。
TypeScriptとRouter、Vuexも同時に勉強したいと思っていたのでチェックしました。

? Use class-style component syntax? (Y/n) Y

「クラススタイルのコンポーネント構文を使用しますか？」ということで、よく理解していませんが使ってみたいのでYes。
TypeScriptを使うとコンポーネントをクラススタイルで書くことができるそうです。

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n) Y

TypeScriptを使うための設定でyesを選択。

? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) Y

※Vue routerはこれから勉強しますので、学習を追えたら更新します。
公式サイト
https://router.vuejs.org/ja/guide/essentials/history-mode.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus 

これが今回の本当の目的。
過去にnode-sassを使って、bootstrapを使った経験があり馴染みがあったのでnode-sassの方を選択。

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
  TSLint (deprecated) 

ESLintは記述したコードが構文にあっているかチェックをしてくれるライブラリ。
とりあえずエラーを防止できればいいので「ESLint with error prevention only」を選択。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i1
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

こちらも学習次第更新します。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

「Babel、ESLintなどの設定をどこに配置するか」という質問ですが、設定するなら個別ファイルに設定したいので、「In dedicated config files」を選択。

? Save this as a preset for future projects? (y/N) N

この質問は、今回の設定を次回以降、選択肢として保存しておくかどうかなので、今回はnoを選択。

7割方理解していませんが、とりあえずだいたいYesで設定。
※今後更新していきます。

🎉  Successfully created project moma_front.
👉  Get started with the following commands:

moma_frontは今回の僕のプロジェクト名です。

以上でVue CLIのインストールは終了。

BootStrap4をインストール

まず、作成したプロジェクトのフォルダ内に移動します。

cd プロジェクト名

続いてBootStrap4をインストールします。

yarn add bootstrap

BootStrapで使う可能性のあるライブラリも同時にインストール

yarn add jquery
yarn add popper.js

bootstrapの一部の機能でpopper.jsが必要らしく、そのpopper.jsを動かすためにjqueryが必要らしいです。
間違っていたらすみません、、、

インストールできたら、src/assetsの下にcsccフォルダを作成します。

※Vue CLIで大量のフォルダが生成されていますが、その中にsrc/assetsがあります。

csccフォルダを作成したらその中にmain.scssを作成

main.scss内で下記コードを記入

@import '../../../node_modules/bootstrap/scss/bootstrap.scss'

bootstrap.scssを読み込んでいます。

続いて、変数定義・mixinなど直接スタイル定義しないscssファイルをまとめるためのprepends.scssをsrc/assets/sassの中に作成。

ルートディレクトリ直下にvue.config.jsを作成

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "./src/assets/sass/prepends.scss";'
      }
    }
  }
};

以上でscssの準備はとりあえず完了。

※理解が浅いのでまた勉強したら更新します。

main.tsに下記コードを追記します。

require('@/assets/sass/main.scss')

この状態でyarn buildをするとエラーが出ました。。。
どうやら、TypeScriptでrequierはデフォルトでは使えないらしく、@types/nodeをインストールする必要があります。

yarn add @types/node

-追記-

import './assets/sass/main.scss'

基本的にTypeScriptではrequierは使わないのが一般的とのこで、上記のようにimportを使えば問題なく動作しました。

これでようやく環境構築が終了です。

あとは

yarn serve

と入力し、サーバーを立ち上げます。

  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://192.168.10.7:8081/

上記のように表示されるのでLocalで表示されているURLをコピーしてお好きなブラウザで表示します。

試しにApp.vueのtemplateタグ内を下記のコードに変更

<template>
   <div>
      <button class="btn btn-info my-3">ボタン</button> 
   </di>
</template>

↓bootstrapで指定したbuttonが表示されたので、一応使えていることを確認。

以上で、Vue CLIにbootstrapをscssで使うための環境構築が完了です。

調べたろことVueには、bootstrapをより簡略化して記述することができるbootstrap-vueがあるそうです。
環境構築後、Vue.jsでbootstrapを使う方法について再度調べていたら見つけました。

導入次第、本記事も更新したいと思います！

今回の環境構築は、僕にとっても初めてのVue/CLI+bootstrapの環境構築だったため、もし間違っている点や、もっとこうした方がいいとう所がありましたがご指摘いただけると嬉しいです。