Vue CLIのインストールと使い方
Ruby on RailsやLaravelでは標準でフロントエンド開発に対応していますが、未対応のCakePHPなどでVue.jsを利用する場合は「Vue CLI」で単一ファイルコンポーネント(SFC)を用いて開発を行います。
今回はWSL2(Ubuntu18.04)で行っていますが、その他の環境で同様です。
1. Node.js & NPMのインストール
最新安定版のNode.js(+NPM)をインストールします。
// nodejs npmのインストール sudo apt install -y nodejs npm // nパッケージのインストール sudo npm install n -g // 安定版(推奨版)のnodejsをインストール sudo n stable // 古いバージョンを削除する sudo apt purge -y nodejs npm sudo apt autoremove
バージョンの確認
node -v npm -v
※安定版のバージョンはNode.js公式で確認可能です。
2. Vue CLIのインストール
sudo npm install -g @vue/cli
※Vue CLI公式の解説と同じです。
2-1. プロジェクトの生成
cd 任意のディレクトリ sudo vue create my-project
※my-projectは任意のプロジェクト名
Default ([Vue2] babel, eslint)を選択。
Use NPMを選択。
ファイル構成
src内のファイルがメインのファイルです。
src/assets/logo.png src/components/HelloWorld.vue src/App.vue src/main.js
WSL2の方で途中でエラーや停止する場合はウイルス対策ソフトを停止してから行ってください。私の場合はカスペルスキーのファイルチェックが悪さをしていました。
2-2. プロジェクトを実行する
cd my-project npm run serve
※ctrl + cでサーバーを停止できます。
2-3. コンパイル(ビルド)
プロジェクトが完成したら次のコマンドでコンパイルします。
npm run build ※distに圧縮されたファイル群が生成される
[distのディレクトリ]
distのindex.htmlの階層はトップを想定しています。そのままブラウザで開いてもエラーで何も表示されません。
正常に表示させたい場合はindex.htmlのソースコードの「/js/app...」や「/css/app...」などを「./js/app...」「./css/app...」に変更します。
3. パッケージの追加・削除
AjaxのHTTP clientライブラリの「axios」(アキシオス)を例にします。
次のコマンドを実行するとaxiosがnode_modules内にインストールされて、package.jsonのdependencies(依存関係)にaxiosが追加されます。
npm install axios
パッケージを削除する場合は次のようにします。
npm uninstall axios
4. ファイルの管理
必要なファイルは以下のディレクトリ、ファイルです。
・src ・public ・babel.config.js ・package.json
完成後はその他のファイルは削除してもOKです。特にnode_modulesは100MBぐらいあるのでディスク容量的に困る場合があります。オープンソースで公開する場合もこの4つがあれば再現可能です。
これら4つから復元する場合は4つを任意のディレクトリにコピーします。そして、npm installのコマンドで復元可能です。
// 復元 cd 任意のディレクトリ npm install // 実行する npm run serve
5. Vue CLIの設定ファイル(~/.vuerc)
sudo vi ~/.vuerc
[中身]
{
"useTaobaoRegistry": false,
"packageManager": "npm"
}
packageManagerでパッケージマネージャをyarnに変更可能です。
useTaobaoRegistryは中国のアリババグループのTAOBAOレジストリを使用するかどうかです。falseを推奨です。
関連記事
