vue.js

vue.jsの開発は通常xxx.jsのファイルを作ったり、それをhtmlヘッダで呼び出したりみたいなそういうことはやりません。vue.js自体がフレームワークみたいなものなので、それなりの手続きを踏んで要領よくやります。そういうわけで開発環境の構築をpythonとかphpなみにやっておく必要があります。

vue.jsの開発準備をする

いろいろと使うのでnode.jsは必須です。私個人としてはanyenvからnodenvを使ってnode.jsをバージョンごとに切り分けています。anyenvやnodenvの使い方はここでは割愛しますが、非常に便利なので環境構築しておくとよいです。

• Local PCの開発環境はanyenvを使う
• anyenv + nodenv で指定バージョンのnode.jsを使う

$ node -v
v18.3.0

$ npm -v
8.11.0

node.jsが使えるようになったらvue-cliをインストールします。vue.jsの開発で使うツールコマンドだと思えばよいと思います。

$ npm install -g @vue/cli
$ vue --version
@vue/cli 5.0.4

で、OKです。vueコマンドが動かない場合は、たいていパスが通ってないことが原因なので.zshrcなどでパスを通しておきます。既存のexportがあればそれに追記しておけばよいです。

vue開発の雛形作成

$ vue create vue

なんか勝手にyarnがインストールされますね。yarnはローカルのビルトインサーバーを立ててくれたりする便利なツールです。

$ cd vue
$ yarn serve

デフォルトだと、
App running at:

• Local: http://localhost:8080/
• Network: http://192.168.11.16:8080/

で、アクセスできるようになります。vue.jsの初期画面が表示されれば開発の準備は整いました。これから開発するときは毎回このコマンドを叩きます。

Gitで管理

vue-cliのプロジェクトの.gitignoreファイルの雛形は、

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

これを使えばよいと思います。

moduleの追加

scssとか入れ忘れたら後から追加できます。

$ npm install --save sass-loader node-sass

• 作りながら学ぶVue.js パート１【開発環境構築
• 作りながら学ぶVue.js パート２【vueファイルの構成】