🔰はじめての方へ
はじめての方へ
はじめての方へ
サイト作成
サイト作成
Wordpress編集お役立ち情報
Wordpress編集お役立ち情報
Wordpressの作成方法
Wordpressの作成方法

vue.js はじめかたメモ

記事内に広告が含まれています。
スポンサーリンク

環境作り

① node.js ダウンロード

詳しくは下記記事参照

node.js インストール方法／Windows
① Node.jsの公式ウェブサイトにアクセス ② LTSをダウンロード ③ ダウンロードされたファイルをダブルクリックしてインストール インストーラーの指示に従ってインストール※ 英語ででてくるが、特に設定は変えなくていい ④ 再起動 ⑤...
mapletc.net

② VSCode起動

③ 表示→ターミナル を開いて「npm create vue@latest」と入力

④ Ok to proceed? (y) とでてくるため、「ｙ」と入力

⑤? Project name: » vue-project とでてくる
　任意の名前を決める
　そのままでもOK

⑥ ? Add TypeScript? » No / Yes　
　タイプスクリプトを加えますか？とでてくる（JavaScriptに型をつけたもの）
　no　でOK
　←→で変更

⑦ Add JSX Support? » No / Yes
　HTMLをJavaScriptのように書くような記法
　no　でOK

⑧ Add Vue Router for Single Page Application development? » No / Yes
　より複雑なものをつくるもの
　no　でOK

⑨ Add Pinia for state management? » No / Yes
　状態管理をするためのもの
　no　でOK

⑩ Add Vitest for Unit Testing? » No / Yes　
　テスト
　no　でOK

⑪ Add an End-to-End Testing Solution?
　何個か選択肢出てくる
　no　でOK

⑫ Add ESLint for code quality? » No / Yes
　コードの品質を保つもの
　yesがいい

⑬ Add Prettier for code formatting? » No / Yes
　コードをきれいに整える
　yesがいい

⑭ Add Vue DevTools 7 extension for debugging? (experimental) » No / Yes
　デバックしやすくするためのツール
　どっちでもいい

フォルダがインストールされる！

フォルダの中身の説明

VSCodeで作成したファイルを上のタブ「ファイル」→「フォルダを開く」で開く

※ GitHubで記録していきたい人は、
　先ほど作成したvueフォルダを、GitHubリポジトリを作成しその中に入れると記録できるからわかりやすい！

GitHubの中にいれると、「node_modules」などが薄い文字になるが、これはGitHubでプッシュすると中身が多くなってしまうため、除外されるようになっているらしい。

「git ignore」というファイルの中に、あらかじめ除外するファイルが書いてある

「package.json」

① package.json の中身は、インストールしないと実行されない

　「npm install」とターミナルで入力

　新しいフォルダ「node_modules」ファイル「package-lock.json」が作られる

② package.json の中身

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },

上記の中身は、「npm run ○○」で実行される

・「npm run dev」　

　vite コマンドが実行
　開発用のサーバーを起動させる

　そこにでてくるURL（http://localhost:○○○）を見ながら開発

　止めたい場合はコントロール＋C

・「npm run build」

　リリースするときに使用する「dist」 フォルダが作られる

　公開するサービスに渡すことでリリースすることができる

・「npm run preview」

　「dist」 フォルダが正しく動いているか確かめるもの

　そこにでてくるURLをみると本番の中身が動いているかみれる

　コントロールCで終了

・「npm run lint」

　コードが正しくかけているかチェックしてくれて修正してくれる

・「npm run format」

　上記に似ている

「src」フォルダ

頻繁に使用する

viteによる変換する処理が行われる

「public」フォルダ

操作してほしくない

リリースするときに使用することが多い

「.vscode」フォルダ

「extensions.json」ファイル

お勧めの拡張機能が記載されている

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

拡張機能①「”Vue.volar”,」

　もっとも重要

　これがないと.vueファイルを正しく認識してくれない（白色のコードのまま）

拡張機能②「”dbaeumer.vscode-eslint”,」

　JavaScriptに存在しないコードを記載している場合、赤い波線で教えてくれる

  拡張機能③  「”esbenp.prettier-vscode”」

　右クリックでドキュメントのフォーマット2個目をクリック

選択するときれいにフォーマットされるようになる

「settings.json」ファイル

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

拡張機能② ③ の設定が書かれている

"editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },

→上記コードは、拡張機能②「”dbaeumer.vscode-eslint”,」の設定

　・保存すると正しい記載に自動で直してくれる

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"

→上記コードは、拡張機能③  「”esbenp.prettier-vscode”」の設定

　・右クリックでドキュメントのフォーマット１個目をクリックしたらすぐに“esbenp.prettier-vscode”を実行できる
　・ファイルの保存時に自動に行われるようにする

「.eslintrc.cjs」ファイル

‘plugin:vue/vue3-essential　を

‘plugin:vue/vue3-recommended にする

eslint　がVue.jsのコードに対して厳しいルールでエラーを出してくれる！

参考にした動画

とても分かりやすいです！！！

コメント