今回はVue CLIを使用してVue.jsの開発環境を構築したいと思います。
環境はWindows10で進めていきます。
Vue CLIとは
Vue CLIとはVue Command Line Interfaceの略で、Vueの開発環境の構築などをコマンドラインで実行できるようにしてくれるツールです。
Vue CLIをインストールする準備
Vue CLIを使用するためにはNode.jsのバージョン8.9以上がインストールされている必要があります。
以下のサイトからインストーラをダウンロードしてインストールしてください。
また、今回はIDEとしてVisual Studio Code(VSCode)を使用していきます。同じく以下のサイトからダウンロードしてインストールしてください。
Vue CLIのインストール手順
まず、VSCodeを起動します。
今後のコマンドは全てVSCodeのターミナルから実行します。
ターミナルが表示されていない場合は、VSCodeのメニューから［View］→［Terminal］と選択してください。
次のコマンドでVue CLIのnpmパッケージをインストールします。
> npm install -g @vue/cli次のコマンドでバージョンが表示されたらインストール成功です。
> vue -V
3.5.0Vueプロジェクトの作成手順
Vueの開発環境を構築していきます。開発環境はプロジェクトという単位で一つのディレクトリ内で管理されます。
プロジェクトを作成するコマンドは次の通りです。
vue create project-nameproject-nameには好きな名前を指定してください。また、コマンドを実行したディレクトリ配下にproject-nameというディレクトリが作成されて、その中に必要なファイルが格納されます。
早速、sample-appというプロジェクトを作成してみます。プロジェクトを作成する途中でいくつか質問されるので簡単な説明をつけておきます。選択内容によって、質問される内容も変わってくると思います。
> vue create sample-app
? Please pick a preset:
> Manually select features
? デフォルトのプリセットを使用するか聞かれます。今回は手動を選択しました。とりあえず試しにプロジェクト作成するだけであれば、デフォルトでもいいと思います。
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
? プロジェクトで必要なパッケージなどをあらかじめ選択できます。ここで追加し忘れても後から追加可能です。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
>
? Routerでhistoryモードを使用するか聞かれます。今回はそのままhistoryモードとしました。
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
> Sass/SCSS (with dart-sass)
? 使用するCSSプリプロセッサーを選択します。デフォルトを選択しました。
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
? Linterの初期設定を選択します。デフォルトのままです。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Lint on save
? Lintの実行タイミングを選択します。デフォルト（保存時）です。
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
? 各種設定を個別ファイルに書き込むか？package.jsonに書き込むか？です。今回は個別にしました。
? Save this as a preset for future projects? (y/N)
? ここまでの設定を保存するかです。不要なのでデフォルト（保存しない）としました。この後インストールが実行され、次のように表示されれば完了です。
Successfully created project sample-app.
Get started with the following commands:
$ cd sample-app
$ npm run serve開発サーバの実行
インストール完了時に表示された通り、作成したプロジェクトのディレクトリへ移動して、npm run serveを実行すると開発サーバが起動します。
> cd sample-app
> npm run serve開発サーバの起動に成功すると次のように表示されるはずです。
App running at:
- Local: http://localhost:8080/
- Network: http://xxx.xxx.xxx.xxx:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.ブラウザで http://localhost:8080/ にアクセスして次のように表示されていれば完了です。お疲れさまでした！
最後に開発サーバを停止する場合は、ターミナルでCtrl + Cとしてください。
コメント