vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ
最終更新日: Update!!
過去記事「vue-cliの導入から新規でVue.jsのプロジェクト作成とビルド方法まとめ」ではVue CLIを使ったVue.jsのプロジェクト作成の流れをまとめていましたが、Vue CLIのバージョンが2系の内容になっていました。この記事を作成している現在では、Vue CLIのバージョンが3系がメジャーであるということで、今回は2系から3系への移行と、バージョン3系での新規プロジェクト作成の流れもまとめていきたいと思います。
上記以外にもpackage.jsonや.gitignoreなどの設定ファイルが含まれ、また、ビルドを行うとdistフォルダが生成され、その中にはコンパイルされたファイルが出力されます。
今後、Vue CLIも3系がメジャーになってくるのですが、プロジェクトによっては2系という場合もあるかと思います。使用するコマンドも微妙に異なっているので、そこだけ注意すれば移行のハードルも低いかと思います。より詳しくはこちらの書籍がとても参考になるのでオススメです! (参考にさせて頂いたサイト) Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)
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.02系と同じく、まずはプロジェクトディレクトリまで移動し、下記コマンドでプロジェクトを作成します。コマンドが「create」に変わっている点に注意します。そしてプロジェクト名を指定します。
$ cd プロジェクトディレクトリ $ vue create [PROJECT_NAME]例としては下記のようにプロジェクト名に任意の名前をつけておきます。
$ vue create vue_sample2系の時のように初期設定を進めていきます。まずは接続方法の確認、そのまま「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 StylusLinterの設定を行います、TypeScriptを使用する場合にはTSLintを選択します。そうでない場合にはESLintのものを選択しておきます。
? Pick a linter / formatter config: > TSLint ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + PrettierLintを実行するタイミングの追加設定です。保存時の実行とコミット時の実行を選択できます。両方ともチェックを入れておくことも可能です。
? 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 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経由でインストールしたプロジェクトのモジュールを管理するファイル |
本番環境へのデプロイ用にソースファイルをビルド
ソースコードをコンパイルするビルド作業を行なっていきます。下記コマンドを叩くだけでビルドが始まりますのでしばらく待ちます。$ 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にアップデート)
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories