Vueプロジェクト作成方法と自動整形lint設定方法  - vue ui 使用 

## 前提
- node.js 8.9以上がインストールされていること
- nodeのバージョン指定がされていること
    -  (node -v と打ったら v8.12.0 などと出てきたらok)

上記がわからない場合
-> node.js のインストール方法等は[こちら](https://qiita.com/ymo2525/private/9544ca3bd79deb58e638)


## vue cliを使えるようにする(インストールしていない場合)
* npmでインストールする場合

```
$ npm install -g @vue/cli
```

* yarnでインストールする場合

```
$ yarn global add @vue/cli
```

(これは一回やればok)
バージョンあげるときはupgrade

```
$ yarn upgrade @vue/cli
```


## vue-cliでプロジェクト作成
vue uiでプロジェクトを作成する方法

```
$ vue ui  (vue create)
```

でGUIでvue-cliが立ち上がる。

![スクリーンショット 2018-10-29 17.36.26.png](https://qiita-image-store.s3.amazonaws.com/0/185414/1bfeebd4-076f-90d7-ec59-1c3bad052f41.png)
Home(Vueプロジェクトマネージャー)で作成を押す。

![スクリーンショット 2018-10-29 17.37.33.png](https://qiita-image-store.s3.amazonaws.com/0/185414/268f193e-8195-59ec-19a5-7711f8e72b6d.png)

次へ

![スクリーンショット 2018-10-29 17.37.45.png](https://qiita-image-store.s3.amazonaws.com/0/185414/d39a099e-0e72-be28-f0da-75da19292da5.png)
詳細の設定。
簡単に設定する場合はデフォルトでもいいが、今回は手動を選択。

![スクリーンショット 2018-10-29 17.38.10.png](https://qiita-image-store.s3.amazonaws.com/0/185414/1b5ff2f7-c0ac-5865-e8ab-c09ce0c0fa6d.png)
ONにすると機能追加されることになる。

![スクリーンショット 2018-10-29 17.38.39.png](https://qiita-image-store.s3.amazonaws.com/0/185414/5779c439-b6f6-42db-91cc-ddb52f81a16a.png)
CSSプリプロセッサの選択とLintの設定。

終わったら「プロジェクトを作成する」を押す。

コンソールが動くと思うので、 

![スクリーンショット 2018-10-29 18.35.19.png](https://qiita-image-store.s3.amazonaws.com/0/185414/a68d99ee-3d48-5e21-6cd0-df714e6e8b97.png)
が出たら成功。



## 保存する際に勝手に lint --fix する設定
vue.config.js を作成。

```vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .options({
        fix: true,
      })
  },
}
```

詳細設定
package.json または .eslintrc.js に設定。

```json:package.json
    "rules": {
      "no-console": 0,
      "prettier/prettier": [
        "error",
        {
          "semi": false,
          "trailingComma": "all",
          "singleQuote": true
        }
      ]
    },
```

"no-console" =>  0にすると、console.logの使用を許可する設定になる。


```vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}
```

はcssを自動的に読み込む設定も追加できる。
[https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders](https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders)
を参考

## 注意
eslint-loaderのバージョンによってlintが動かない場合がある。
その場合は、eslint-loaderのバージョンを変更。
yarn.lockファイルの `eslint-loader@^2.0.0:`  の項目のところを全部**削除**

```yarn.lock
eslint-loader@^2.0.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.1.1.tgz*****
  integrity *****
  dependencies:
    loader-fs-cache "^1.0.0"
    loader-utils "^1.0.2"
    object-assign "^4.0.1"
    object-hash "^1.1.4"
    rimraf "^2.6.1"
```

 `"@vue/cli-plugin-eslint@^3.0.5":` の中の
 `eslint-loader "^2.0.0"` を `eslint-loader "2.1.0"` に書き換えて (^を削除)

```diff:yarn.lock
"@vue/cli-plugin-eslint@^3.0.4":
  version "3.0.5"
  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-3.0.5.tgz#******"
  integrity sha512*****
  dependencies:
    "@vue/cli-shared-utils" "^3.0.5"
    babel-eslint "^8.2.5"
    eslint "^4.19.1"
-   eslint-loader "^2.0.0"   //ここの行を書き換え  
+   eslint-loader "2.1.0"
    eslint-plugin-vue "^4.5.0"
```


```
$ yarn
```
実行後

```yarn.lock
eslint-loader@2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.1.0.tgz#*****"
  integrity sha*******
  dependencies:
    loader-fs-cache "^1.0.0"
    loader-utils "^1.0.2"
    object-assign "^4.0.1"
    object-hash "^1.1.4"
    rimraf "^2.6.1"
```
になればok。