npm -g install しないでVue.jsとQuasarに触ってみた

ゴールデンウィークなので何か触ってみようと思い立ち、
Vue.js とQuasarを使ってみることとしました。

対象となる方

• npm install でGlobalがグチャグチャになっている方
• vueやquasar初学者の方
• 何か始めたい方
• お暇のある方
• npmやvueなどでメンターになっても良いと思っている方

触れる前の環境

• Windows 10
• npm 6.9.0

できるだけ、npm -g installしたくない

諸般の事情でvueなどいろんな物が既にGlobalに取得されているため、
その環境を壊したくないのです。

@DeployCat さんの　僕がnpm installに-gをつけないわけ 　を参考にさせていただきました。

私自身初学者に近いため、「○○はこうやればできる」などあれば遠慮なくご指摘いただきたいです。

環境準備手順

1. フォルダを作成する。例：C:\vuestudy
2. コマンドプロンプトを起動する。
3. コマンドプロンプトで作成したフォルダに移動する。例：cd C:\vuestudy
4. package.jsonを作成するために、npm init をして適当な情報を入力する。 例：C:\vuestudy> npm init
5. Vue-cliを取得する。 npm install @vue/cli
6. Quasar CLIを取得する。 npm install @quasar/cli
7. package.jsonのscripts部分を以下のように編集する。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",　←　「,」を追記
    "vue": "vue", ←　ここ追記
    "quasar": "quasar" ←　ここ追記
  },

動作確認

vue/cli

1. コマンドプロンプトを起動する。
2. コマンドプロンプトで作成したフォルダに移動する。例：C:\vuestudy
3. Vue-cliでひな形を作成する。 npm run vue create sample
4. vue-cliからの質問は規定値でOK。
5. vue-cliからの指示にしたがって、ひな形を実行して動作確認する。

quasar/cli

1. コマンドプロンプトを起動する。
2. コマンドプロンプトで作成したフォルダに移動する。例：C:\vuestudy
3. Quasar Cliでひな形を作成する。 npm run quasar create quasample
4. Quasar Cliからの質問は適宜設定でOK。
   環境によってはWarningなど出るかもしれませんが、本記事ではその点の解決策は割愛します
5. Quasar Cliから生成されたひな形のpackage.jsonのscripts部分を以下のように編集する。

  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore ./",
    "test": "echo \"No test specified\" && exit 0",
    "quasar": "quasar"　　←　ここ追記
  },

1. Quasar Cliから生成されたひな形フォルダに移動し、以下のコマンドを発行して動作確認する。

npm run quasar dev

触れてみた感想

• warningなど表示されている箇所があるので、調べて解消していきたい。
• npm機能が豊富なので、これから始める人は難しいと感じるかもしれない。
• Qiitaをはじめ、情報収集をするが古くなっている情報が多くある。
• まずは試してみることが必要。
• Google翻訳　様様m(_ _)m