【Vue CLI】5分で作る！最軽量の開発環境！

プロジェクトごとにVue CLIを導入するのが嫌

Vue CLIってすごく便利だけど、毎回コマンド叩いてプロジェクト作成するのって面倒。
コマンド打つだけならまだしも、大量のnode_moduleが毎回インストールされてしまう。
プロジェクトごとにnode_moduleが生成されるのって容量的にもストレス。

複数のプロジェクトを作る時に、一式のnode_moduleを使い回す方法を見つけたので紹介します。

普通にVue CLIを導入する

Node.jsとnpmを使用できる環境なら、すぐにインストールできる。

◆ Vue CLIをインストール

npm install -g vue-cli

◆ Vue CLIが使用できる環境になったかどうか一応確認
　（バージョンが表示されればOK）

vue --version

◆ Vue.jsの開発環境を作成する
　※ 今回の本題は↓コレをプロジェクト作成のたびにやりたくないということ

vue init webpack vue-cli   //(「vue-cli」の部分がフォルダ名になる)

このコマンドを実行すると色々質問を聞かれるが特にこだわりがなければ全てEnterでOK。
そうすると npm installが実行され必要なモジュール一式がインストールされる。

◆ 作成されたフォルダに移動

cd vue-cli

◆ 開発用のサーバーを起動してみる

npm run dev

ターミナルに表示されたURLにアクセスし、「Welcome to Your Vue.js App」というVue.jsのデフォルトの画面が表示されれば成功。
これで、Vue.jsの開発環境はとりあえず完成した。

作りたいディレクトリ構造

ここまでは普通にVue CLIを導入しただけ。もちろんもう開発に取り掛かることはできる。
が、今回やりたいのはコレ。

ディレクトリ構造

'vue-cli'
  --'build'
  --'config'
  --'node_modules'
  --'package-lock.json'
  --'package.json'
  --'project01'
      --'src'
      --'index.html'
  --'project02'
      --'src'
      --'index.html'
  --'project03'
      --'src'
      --'index.html'

インストールしたパッケージを複数のプロジェクトで使えるようにしたい。使い回したいということだ。
調べに調べど、なかなかこの方法を書いている記事が見つからない。いや、もはや1つもなかった。

以下の手順でコレを実現することができた。

※ 「projectXX」の中に配置するsrcとindex.htmlは、とりあえずインストール時にディレクトリ直下にあるsrcとindex.htmlをそのままコピペすればOK。

◆ projectフォルダ内にsrcとindex.htmlをコピペしたら、ディレクトリ直下にある以下は邪魔なので削除

削除するファイルとフォルダ

'src'
'index.html'
'README.md'
'test'

◆ webpack.configでエントリーポイントで呼び出すパスを変更
　「context:」の部分で対象のディレクトリを指定していると思ってもらえれば分かりやすいと思う。

build　▶︎　webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../01_project/'),  // ここを変更
  entry: { ....

もう1箇所。
簡単にいうと「@」で呼び出すパスがここに定義してあるっぽい。階層がずれるのでここも変更する。

build　▶︎　webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('01_project/src'), // ここを変更
    }
  },

毎回開発するディレクトリ名に書き換える必要があるが、毎回パッケージをインストールするよりはよっぽどマシではないだろうか。

以下のコマンドを叩き直してもう一度以下を実行してみる。

npm run dev

先ほどと同じ画面が表示されれば成功！

試しにproject1のcomponentのデータを変更してみると自動的に画面がリロードされ更新される。

試しに別のプロジェクトも作ってみる

この流れでproject2を作成してみよう。
先ほど修正した以下「project1」にしていた部分を「project2」に変更すれば今度は「project2」が呼び出される。

build　▶︎　webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../02_project/'),  // ここを変更
  entry: { ....

build　▶︎　webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('02_project/src'), // ここを変更
    }
  },

この手のやり方で、ローカルに作りたいVueの開発環境を作ることができた。
開発していく中で、色々不具合が出てきてしまうかもしれないが、とりあえず 完。

ローカルに何個も何個も「node_module」一式をインストールしている方、ぜひこの方法お試しあれ！