ユーザ用ツール

サイト用ツール


vue

Vue.js

  • 公式 1)
  • 『The Progressive JavaScript Framework』
  • JavaScriptのフレームワークの1つ

インストール

  1. npmをインストールする
  2. Vueをインストールする
    • npm install -g @vue/cli
  3. 下記コマンドでプロジェクトを作成する
    • vue create <PROJECT_NAME>
    • オプションを選択していき、それに応じてプロジェクトが作成される
    • 各オプションについては次サイトをよく参照する 2)
    • 現在のディレクトリでプロジェクトが作成されるので、1つ上のディレクトリで作成するとよい

参考 3) 4)

Tips

NODE_ENV を変更したい

  • デフォルトでは下記になっている
    • vue-cli-service serve のとき development
    • vue-cli-service test:unit のとき test
    • vue-cli-service buildvue-cli-service test:e2e のとき production
  • モードを指定することができる
    • vue-cli-service build –mode development

参考 5)

本番環境のみ適応したい内容がある

if (process.env.NODE_ENV === 'production') {
  // 処理
}

アクセスするとNotFoundになる

  • サーバの設定によって、「そんなファイルない」と怒られることがある
  • .htaccessファイルを置くと治ったりする 6)
    • Apache、Nginxによって設定が異なる 7)
1)
『Vue.js』, https://jp.vuejs.org/index.html, 2022-02-04
2)
『Vue CLIでvue create実行時の各オプションは何を意味しているのか?どれを選ぶべきか?』, Proぐらし(プロぐらし), https://prograshi.com/language/vue-js/vue-create-options-in-vue-cli/, 2022-02-04
3)
Vue.jsについての基礎(インストール), Qiita, https://qiita.com/watataku8911/items/26f2ce546fcd562e4b46, 2021/05/27
4)
Vue.js を vue-cli を使ってシンプルにはじめてみる, Qiita, https://qiita.com/567000/items/dde495d6a8ad1c25fa43, 2021/05/27
5)
『Modes and Environment Variables』, Vue CLI, https://cli.vuejs.org/guide/mode-and-env.html#modes, 2022-02-05
6)
【Vue.js】URLに直接アクセスすると404 Not Foundになる問題の解消方法, Qiita, https://qiita.com/sskre/items/3e30eb5ead0db2a61652, 2021/06/29
7)
HTML5 History Mode, Vue Router, https://router.vuejs.org/guide/essentials/history-mode.html, 2021/06/29
vue.txt · 最終更新: 2022/02/05 10:45 by ponzu