SCSSとvue-routerの入ったプロジェクト作成について書きます。
目次
パッケージ
vue をインストールします。
$ npm install vue vue-cliプロジェクトの作成
vue create でプロジェクトを作成します。
$ vue create プロジェクト名すると、バージョンを聞かれます。マニュアルで作成します。
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features次に機能を選択します。今回必要なのはSCSSとvue-routerなので、RouterとCSS Pre-processorsを選びます。
? Check the features needed for your project:
>(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E TestingVueのバージョン。お好きな方で。
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x (Preview)ルータのhistoryモードを使うかどうか（Yesならy、Noならn）。これを有効にするとURLにハッシュが入らなくなります。詳細は以下の参考リンクを参照してください。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)SCSSを使うので選択肢の上の二つのどっちかを使います。dart-sassは@useとかが使えるやつで公式推奨（らしい）、node-sassは普及しているやつってイメージ。詳しいことは調べてみると良いと思います。（丸投げ）
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus次はESLint（静的検証ツール）。自分は一番上のエラー防止のみを選びました。ぶっちゃけて言うと、この中で分かるのがフォーマッタのprettierしかない…
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier何をしたらLintを実行させるかの候補。保存のときに実行させるのでLint on saveのみにチェックを入れます。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commitBabel や ESLintなどの設定を置く場所の設定。個別に管理したいからIn dedicated config filesにいれる。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json今回の設定を保存するかどうか。どっちでも。
? Save this as a preset for future projects? (y/N)設定を決めるとプロジェクトが作成されます。
Vue CLI v4.5.8
✨ Creating project in C:\Users\プロジェクトのディレクトリ.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
省略
🎉 Successfully created project プロジェクト名.
👉 Get started with the following commands:
$ cd プロジェクト名
$ npm run serveこれで、styleタグにSCSSは書けるし、routerでルーティングもできるようになります。これでSCSSやvue-routerを使うために四苦八苦しないで済みます。
実行（サーバー起動とか）
まず、移動する。基本的には、作成後に実行してみてと書いてある。
$ cd プロジェクト名移動したら、serveでサーバー起動、buildでdistファイルに移動する。
起動
$ npm run serveビルド
$ npm run build終わりに
意外と書く量多くて軽くなりませんでした…
参考リンク
HTML5 History モード | Vue Router
[Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する
ESLint 最初の一歩 - Qiita
Vue CLI 3 インストールからプロジェクト作成まで - Qiita
