結論、これをすればイイ感じになる。
$ npm install -g @vue/cli
$ vue create app
とりあえずnodejsを入れる。
npmを更新する
$ npm install -g npm
vue cliを入れる
$ npm install -g @vue/cli
vue create する。するとpresetを選べるので、全部自分で選ぶことにする
$ vue create app
Vue CLI v4.5.11
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features
いろいろなれないワードがあるけれど、とりあえず全部有効にしても問題はない
? 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 Testing
バージョンを選ぶ。現段階においては2.xのほうがよさそうな気もする。
? Choose a version of Vue.js that you want to start the project with
❯ 2.x
3.x (Preview)
このあたりはそのままエンター。デフォルトは大文字のほう。
? Use class-style component syntax? (Y/n)
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
これはvue routerのhistory modeを使うか、という設定。サーバの設定が必要なのでいったんnにしたほうがいいかも？
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
CSSプリプロセッサの設定。dart-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の設定。Airbnbの設定が結構いいと聞いた覚えがあるのでそれを使うのがよさそう。
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
❯ ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
Lintをいつするか。好みで。
? Pick additional lint features:
❯◉ Lint on save
◉ Lint and fix on commit
テスト。Jestのほうがいいらしい？
? Pick a unit testing solution: (Use arrow keys)
Mocha + Chai
❯ Jest
E2EはCypressがいいと聞いた覚えがある。
? Pick an E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only)
Nightwatch (WebDriver-based)
WebdriverIO (WebDriver/DevTools based)
設定をどこに置くかは、個別の設定ファイルにしたほうがいいんじゃないかな。見通しがよくなりそう。
? 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.11
✨ Creating project in /tmp/app.
⚙️ Installing CLI plugins. This might take a while...
次にvuetifyをいれる。これはマテリアルデザインが適用されたコンポーネントを導入するやつでお手軽にUIが決まる
https://vuetifyjs.com/getting-started/installation/
$ vue add vuetify
フォントの読み込みをindex.htmlにいれるのを忘れない。
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
アプリケーションを立ち上げるには npm run serve する。コードのビルドが走って、自動的にhttpサーバが立ち上がる。ホットリロードも付いているので、このままソースを更新すれば表示しているブラウザを更新せずともイイ感じに変わってくれる。
$ npm run serve
これでスタートアップは終わり。
あとは雰囲気で書いたり、いろいろ調べながらやっていけばできるような気がする。先人たちがたくさんいるので、ひどく詰まることはあんまりないと思う。
- vue.js: https://vuejs.org/v2/guide/
- vue-router: https://router.vuejs.org/
- vuex: https://vuex.vuejs.org/
- vue-property-decorator: https://github.com/kaorun343/vue-property-decorator
- vuetify: https://vuetifyjs.com/