概要
現在個人開発プロジェクトとして「IT育成カリキュラム(仮)」の構成を検討しています。
本プロジェクトの概要についてはこちらの記事を合わせてご覧ください。
その中で技術選定をしている途中ではありますが、ある程度固まってきたので備忘も兼ねて最初期のセットアップについてシェアしようと思います。
使用技術
プロジェクトのベースにVue 3.x、テンプレート構築にVue CLIを採用。
フォーマットツールでESLintとPrettierを採用しています。
選定基準は過去プロジェクトでの使用経験があり、感覚的に慣れているというシンプルな理由です。
参考文献
- https://reffect.co.jp/vue/eslint#eslintrcjs
- https://stackoverflow.com/questions/71205264/component-name-temp-should-always-be-multi-word-vue-multi-word-component-names
- https://eslint.vuejs.org/rules/multi-word-component-names.html
設定手順
node.js、npm or yarnがインストールされている前提で、Vue CLIをインストールします。
(今回はnpmコマンドベースで記載します)
npm install -g @vue/cli
インストールできているか確認、バージョンを参照します。
vue --version
ここまでできていたらプロジェクトを管理するフォルダに移動し、下記を実行します。
vue create [プロジェクト名]
ここからはVUE CLIのセットアップに移ります。
今回下記のように設定を行いました。
→自身である程度カスタムしてみたかったため、一番下を選択
→画面内リンクやフォーマッターを利用するため「Babel」「Router」「Vuex」「Linter / Formatter」を選択
→Lintのタイミングは作業時よりも任意のタイミングで行いたいため「on commit」時に設定
→Babel等各種ライブラリの設定方法。package.jsonは使いません。
ここまでうまくいけばプロジェクトが作成され、npm run serve
またはyarn serve
コマンドで
http://localhost:8080/
にローカルアプリが出力されるようになります。(デフォルトの場合)
スタイルシートの設定手順
最初のセットアップ時、デフォルトでは次のように記述されています。
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
シンプルな構成ならこのままでも構わないですが、規模が大きくなるにつれて管理が大変になってくるのでcss部分は分けたいと思います。
今回sassベースで作りたいので、下記パッケージを導入しました。
# node-sass
npm install node-sass
# sass-loader
npm install sass-loader sass webpack --save-dev
次に上記を任意のscssに移行します。
src/assets/css/style.scss
にした場合、合わせてmain.js
に下記記載します。
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 下記を追加
import "@/assets/css/style.scss";
createApp(App).use(store).use(router).mount("#app");
さらに「normalize.css」も使いたいので、パッケージからインストールしました。
npm install --save normalize.css
こちらもmain.jsに追記し、最終的には以下の形になります。
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 下記を追加
import "normalize.css/normalize.css";
import "@/assets/css/style.scss";
createApp(App).use(store).use(router).mount("#app");
Lint / Prettierのテスティング手順
今回テスティングツールにPrettierを採用していますが、.eslintrc.js
に追記することで任意のルール設定を行うことができます。
例えば「タブ2文字」「シングルクオートなし(=ダブルクオート)」「セミコロンあり」としたい場合は次のような記述になります。
rules: {
:
// 追加分
"prettier/prettier": [
"error",
{
tabWidth: 2,
singleQuote: false,
semi: true,
},
],
},
この状態で一度Lintコマンドを実行してみましょう。
npm run lint --fix
自分はここまでで「Login」というコンポーネントを追加し検証していたのですが、このようなエラーが出ていました。
1:1 error Component name "Login" should always be multi-word vue/multi-word-component-names
これはプラグイン「multi-word-component-names」によるもので、単独語はコンポーネント名に使えないというものでしたが、自由度を高めたいため公式ドキュメントで参照したignoreリストを追記してコンポーネントと連携させることで解消できました。
<script>
export default {
name: "Login",
};
</script>
rules: {
:
// 追加分
"vue/multi-word-component-names": [
"error",
{
// multi-wordでなくても問題ないコンポーネント名を追加していく
ignores: ["Login"],
},
],
},