Skip to content

Home

Jump to bottom
Syouhei Tanaka edited this page Jun 14, 2017 · 1 revision

Vue.jsはjQueryでゴリゴリ書くよりシンプルなコードでフロントアプリ書けそうなので気になってた。 ES6で書くのは一旦保留。Vue.jsが気になりすぎるので。

環境

環境は以下。

  • macos 10.12.4
  • Node 6.11.0
  • vue-cli Nodeの最新は8.1だけど、vue-cliの公式さんががnodeの6.xが望ましいって言ってたので。

プロジェクト作成

# vue-cli をグローバルに入れる
$ npm install -g vue-cli

# カレントディレクトリにVueプロジェクト作成　
$ vue init webpack .
? Generate project in current directory? Yes
? Project name vuesample
? Project description A Vue.js project 
? Author Syouhei Tanaka <shou.tanak@gmail.com>
? Vue build standalone
? Install vue-router? Yes # ルーターが入るらしい
? Use ESLint to lint your code? Yes # Linterが入るらしい
? Pick an ESLint preset Airbnb　# linterのpresetがstandardがAirbnbか選べたので深く考えずにAirbnbにした。人気みたいなので。
? Setup unit tests with Karma + Mocha? Yes # 単体テストのフレームワーク入れてくれるの嬉しい
? Setup e2e tests with Nightwatch? Yes # E2Eテストフレームワーク入れてくれるんか。

   vue-cli · Generated "vuesample".

   To get started:
   
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

# treeで生成されたファイルたちを確認
tree -a
.
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .git 
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prod.conf.js
│   └── webpack.test.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── Hello.vue
│   ├── main.js
│   └── router
│       └── index.js
├── static
│   └── .gitkeep
└── test
    ├── e2e
    │   ├── custom-assertions
    │   │   └── elementCount.js
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    │       └── test.js
    └── unit
        ├── .eslintrc
        ├── index.js
        ├── karma.conf.js
        └── specs
            └── Hello.spec.js

初期化してみてわかったこと

色々揃えてくれた。フルスタック感。以下のものが入りました。

  • ユニットテスト
    • Karma
    • Mocha
  • E2Eテスト
    • Nightwatch
  • ルーター
    • vue-router
  • Linter
    • Airbnbのlinter

せっかくテストフレームワーク入ったことだしテストも書きながらサンプル作っていこうかね。

Clone this wiki locally