Vue js 3と爆速コンパイラviteでフロント開発する話です。
npm install -g @vue/cli
以下はnpmを使いたい人は適宜置き換えてください。
yarn create vite-app {プロジェクト名}
cd {プロジェクト名}
yarn
vite-appの部分は固定です。createコマンドが参照するリポジトリを設定するそうです。
上記で導入は完了です。
yarn dev
でwebが起動します。驚くほど早いです。
表示されるように http://localhost:3000 にアクセスするとvuejsのデモページが表示されると思います。
すぐにでもこのまま開発に入れます。
sassも利用できるようにします。
yarn add -D sass
settings.jsonというファイルを作って設定を置きます。
{
"vetur.validation.template": false,
"eslint.validate": ["javascript", "javascriptreact", "vue"]
}
整形周りのツールをインストールします。
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-vue@next
設定ファイルを作ります。このへんは好みで選択します。
yarn eslint --init
そしたら.eslintrc.{選んだ拡張子}
でファイルができると思います。
以下はjsを選んだものとして書きます。
サンプルです。適宜変更してください。
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
//"eslint:recommended",
//"plugin:vue/essential"
"plugin:vue/vue3-recommended",
"prettier",
"prettier/vue"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
"indent": ["error", 2]
}
};
package.jsonのscriptsに
"scripts": {
"dev": "vite",
"lint": "eslint .",
"build": "vite build"
},
のように追加
これでyarn lintと打つとチェックが走ります。
–fixオプションもつければ警告程度なら勝手に補正してくれます。