0%

Programmingプログラミングナレッジ

Posted:2019.03.12

vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ

過去記事「vue-cliの導入から新規でVue.jsのプロジェクト作成とビルド方法まとめ」ではVue CLIを使ったVue.jsのプロジェクト作成の流れをまとめていましたが、Vue CLIのバージョンが2系の内容になっていました。この記事を作成している現在では、Vue CLIのバージョンが3系がメジャーであるということで、今回は2系から3系への移行と、バージョン3系での新規プロジェクト作成の流れもまとめていきたいと思います。

 

vue-cli 3系への移行および環境構築

まず、すでにグローバルにインストールされているバージョン2系のvue-cliを下記コマンドでアンインストールしていきます。そして、再びvue-cliをグローバルにインストールするのですが、3系ではパッケージ名が「@vue/cli」となっているので、それでインストールしていきます。

$ npm uninstall -g vue-cli
$ npm install -g @vue/cli

+ @vue/cli@3.5.0
added 748 packages from 522 contributors in 25.322s

 

インストールが完了したら、念の為バージョンを確認して3系の表記が出ていればOKです。引き続いて新規のVue.jsプロジェクトを作成していきます。

$ vue --version
3.5.0

 

2系と同じく、まずはプロジェクトディレクトリまで移動し、下記コマンドでプロジェクトを作成します。コマンドが「create」に変わっている点に注意します。そしてプロジェクト名を指定します。

$ cd プロジェクトディレクトリ
$ vue create [PROJECT_NAME]

 

例としては下記のようにプロジェクト名に任意の名前をつけておきます。

$ vue create vue_sample

 

2系の時のように初期設定を進めていきます。まずは接続方法の確認、そのまま「Y」で先に進めていきます。

? Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation?

 

Vueプロジェクトのデフォルト設定が続きます、まずはプリセットのパッケージを選択、デフォルトではbabelとESlintが入る設定で、手動にするといろんなパッケージを選択できます。

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features

 

手動での選択をすると、対象のパッケージがリストで表示されるので、必要に合わせてチェックを入れていきます。スペースキーで項目にチェックが入ります。3系からはTypeScriptやSassなどのいろんな拡張機能が追加されているので項目も増えています。

? 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

 

ケースに応じて下記の質問が続きます。まずはクラス属性で記述するかどうかの確認です。必要に応じて「Y」「n」で選択します。

? Use class-style component syntax?

 

自動検出されたポリフィルに対して、TypeScriptと合わせてbabelを使用するかの確認です。基本的にはYで進めていきます。

? Use Babel alongside TypeScript for auto-detected polyfills?

 

Vue Routerのヒストリーモードを採用するかの確認です。基本的にはYで進めていきます。

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

 

CSSのプリプロフェッサーにどれを使うかの確認です。好みに合わせて選択します。ただ、node-sassを使う場合にはnode.jsに依存するので注意が必要です。

? 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

 

Linterの設定を行います、TypeScriptを使用する場合にはTSLintを選択します。そうでない場合にはESLintのものを選択しておきます。

? Pick a linter / formatter config:
> TSLint
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

 

Lintを実行するタイミングの追加設定です。保存時の実行とコミット時の実行を選択できます。両方ともチェックを入れておくことも可能です。

? Pick additional lint features:
>○ Lint on save
 ○ Lint and fix on commit

 

単体テストツールの設定です、必要に応じて設定します。

? Pick a unit testing solution:
  Mocha + Chai
> Jest

 

続いてE2Eテストツールの設定です、こちらも必要に応じて設定します。

? Pick a E2E testing solution:
  Cypress (Chrome only)
> Nightwatch (Selenium-based)

 

各種設定の内容をどのファイルで管理するかの選択です。こちらも必要に合わせて設定します。

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
  In dedicated config files
> In package.json

 

これらの設定をプリセットとして保存するかの確認です。こちらも必要に合わせて選択します。

? Save this as a preset for future projects?

 

パッケージマネージャーの選択、yarnを選択してOKです。

? Pick the package manager to use when installing dependencies:
> Use Yarn
  Use NPM

 

ほどなくしてインストールとセットアップが始まります。完了までしばらく待ちましょう。終了するとローカルホストで動作確認できる開発用のコマンドが表示されます。

Installing CLI plugins. This might take a while...

〜 インストール&セットアップ 〜

Successfully created project [PROJECT_NAME].
Get started with the following commands:
 $ cd [PROJECT_NAME]
 $ yarn serve

 

これでローカルホストで確認できる環境が出来上がっていますので、表示されていた下記コマンドを実行します。そのままローカルサーバーの起動が始まり、表示確認用のURLが出ますのでブラウザで確認することができます。

$ cd [PROJECT_NAME]
$ yarn serve

INFO Starting development server...

〜 ローカルサーバー起動 〜

Compiled successfully in 3090ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.11.4:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.

 

2系と同じく、http://localhost:8080/へアクセスすると下記の画面が表示されます。

vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ

 

Vue CLI3系でのプロジェクトの基本的なフォルダ構成

Vue CLIの2系と3系では微妙にフォルダ構成が異なっていますが、おおよそ同じようなイメージができるのではないでしょうか。これも2系と同じく、プロジェクトの設定により異なるのですが、デフォルトでは下記のようになっています。

PROJECT_ROOT
  ┣ .git
  ┣ node_modules
  ┣ public
    ┗ index.html
  ┣ src
    ┣ assets
    ┣ components
    ┣ views
    ┣ App.vue
    ┣ router.js
    ┣ store.js
    ┗ main.js
  ┣ tests
  ┣ babel.config.js
  ┗ yarn.lock

 

/.git git用の設定ファイルなどが含まれる
/node_modules 各種モジュールが含まれる
/public コンパイルしない静的ファイルが含まれる
/public/index.html ベースとなるインデックスファイルのHTML
/src ビルド前のソースコードフォルダ
/src/assets 画像やCSS、その他javascriptなどの静的ファイルが含まれる
/src/components .vueの拡張子がついたコンポーネントファイルが含まれる
/src/views ルーティングに対応する個別ページのコンポーネントファイルが含まれる
/src/App.vue /public/index.htmlに出力されるvue側のインデックスファイル
/src/router.js Vue-Routerのルーティング用の設定ファイル
/src/store.js Vuexのステート管理用の設定ファイル
/src/main.js 各種ファイルをインポートして管理するエントリーポイント用ファイル
/tests 各種テストツール用設定ファイルが含まれる
/babel.config.js ビルドの設定ファイル
/yarn.lock Yarn経由でインストールしたプロジェクトのモジュールを管理するファイル

 

上記以外にもpackage.jsonや.gitignoreなどの設定ファイルが含まれ、また、ビルドを行うとdistフォルダが生成され、その中にはコンパイルされたファイルが出力されます。

 

本番環境へのデプロイ用にソースファイルをビルド

ソースコードをコンパイルするビルド作業を行なっていきます。下記コマンドを叩くだけでビルドが始まりますのでしばらく待ちます。

$ yarn build

Building for production...

〜 ソースファイルビルド 〜

DONE Build complete. The dist directory is ready to be deployed.
Done in 8.11s.

 

同階層にあるdistフォルダが生成され、cssやimgなどの静的ファイルが入ったフォルダとindex.htmlのファイルが入っているのが確認できます。あとはそれら一式を本番用ウェブサーバーにアップロードすると完了です。

 


 

今後、Vue CLIも3系がメジャーになってくるのですが、プロジェクトによっては2系という場合もあるかと思います。使用するコマンドも微妙に異なっているので、そこだけ注意すれば移行のハードルも低いかと思います。より詳しくはこちらの書籍がとても参考になるのでオススメです!

 

 

(参考にさせて頂いたサイト)
Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】