VueCLI3導入方法

自身のメモ用に記録しておきます。

VueCLIのインストール

//オプショングローバルをつける
npm install -g @vue/cli

vue -v
@vue/cli 4.4.6

プロジェクトの作成

vue create traning-vue.js
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? No

//今回はdefaultを選択
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? No

Vue CLI v4.4.6
✨  Creating project in /Users/XXXX/training-vue.js
⚙️  Installing CLI plugins. This might take a while...

アプリケーションの起動

//開発環境のサーバーを立ち上げる
cd training-vue.js
npm run serve

packeage.json

{
  "name": "training-vue.js",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    //ここ
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

ビルド

npm run build

本番環境用に最適化された、distディレクトリが作成される。