ゴールデンウィークなので何か触ってみようと思い立ち、
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をつけないわけ を参考にさせていただきました。
私自身初学者に近いため、「○○はこうやればできる」などあれば遠慮なくご指摘いただきたいです。
環境準備手順
- フォルダを作成する。
例：C:\vuestudy - コマンドプロンプトを起動する。
- コマンドプロンプトで作成したフォルダに移動する。
例：cd C:\vuestudy - package.jsonを作成するために、npm init をして適当な情報を入力する。
例：C:\vuestudy> npm init - Vue-cliを取得する。
npm install @vue/cli - Quasar CLIを取得する。
npm install @quasar/cli - package.jsonのscripts部分を以下のように編集する。
package.json
"scripts":{"test":"echo \"Error: no test specified\"&& exit 1", ← 「,」を追記"vue":"vue",← ここ追記"quasar":"quasar"← ここ追記},動作確認
vue/cli
- コマンドプロンプトを起動する。
- コマンドプロンプトで作成したフォルダに移動する。
例：C:\vuestudy - Vue-cliでひな形を作成する。
npm run vue create sample - vue-cliからの質問は規定値でOK。
- vue-cliからの指示にしたがって、ひな形を実行して動作確認する。
quasar/cli
- コマンドプロンプトを起動する。
- コマンドプロンプトで作成したフォルダに移動する。
例：C:\vuestudy - Quasar Cliでひな形を作成する。
npm run quasar create quasample - Quasar Cliからの質問は適宜設定でOK。
環境によってはWarningなど出るかもしれませんが、本記事ではその点の解決策は割愛します - Quasar Cliから生成されたひな形のpackage.jsonのscripts部分を以下のように編集する。
生成されたひな形プロジェクトのpackage.json
"scripts":{"lint":"eslint --ext .js,.ts,.vue --ignore-path .gitignore ./","test":"echo \"No test specified\"&& exit 0","quasar":"quasar" ← ここ追記},- Quasar Cli公式の実行コマンドを実行して、ひな形の動作確認する。
触れてみた感想
- warningなど表示されている箇所があるので、調べて解消していきたい。
- npm機能が豊富なので、これから始める人は難しいと感じるかもしれない。
- Qiitaをはじめ、情報収集をするが古くなっている情報が多くある。
- まずは試してみることが必要。
- Google翻訳 様様m(_ _)m