運営者情報

運営してるひと: @sters9

       

妻と猫と横浜あたりに住んでいる。最近は Go や Kubernetes や GCP をしています。 PHP や JavaScript もすこし。

プライバシーポリシー

tools.gomiba.co

アーカイブ

2021/07 (2) 2021/06 (5) 2021/05 (10) 2021/04 (1) 2021/03 (8) 2021/02 (12) 2021/01 (8)

2020/05 (2) 2020/04 (2) 2020/02 (2) 2020/01 (1)

2019/12 (3) 2019/11 (2) 2019/10 (5) 2019/09 (3) 2019/07 (6) 2019/06 (4) 2019/04 (3) 2019/01 (2)

2018/12 (6) 2018/10 (4) 2018/09 (6) 2018/08 (7) 2018/07 (16) 2018/06 (7) 2018/05 (7) 2018/04 (5) 2018/03 (3) 2018/02 (10) 2018/01 (6)

2017/12 (8) 2017/11 (6) 2017/10 (10) 2017/09 (12) 2017/08 (12) 2017/07 (3) 2017/06 (1) 2017/01 (4)

2016/12 (5) 2016/10 (3) 2016/09 (1) 2016/07 (2) 2016/06 (1) 2016/04 (1) 2016/02 (1) 2016/01 (2)

2015/12 (1) 2015/10 (1) 2015/09 (3) 2015/06 (1) 2015/01 (1)

2014/08 (2) 2014/07 (3) 2014/05 (1) 2014/01 (7)

2013/12 (2) 2013/11 (4) 2013/10 (1) 2013/09 (1) 2013/08 (3) 2013/07 (4) 2013/06 (5) 2013/05 (2) 2013/04 (7) 2013/03 (1)

0からVue.jsを始める

結論、これをすればイイ感じになる。

$ npm install -g @vue/cli 
$ vue create app

とりあえずnodejsを入れる。

https://nodejs.org/

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

これでスタートアップは終わり。

あとは雰囲気で書いたり、いろいろ調べながらやっていけばできるような気がする。先人たちがたくさんいるので、ひどく詰まることはあんまりないと思う。