vue-cliでプロジェクトの追加、 pug, stylusを追加する

vue-vcliの作成

@vue/cliをインストール

参考 cli.vuejs.org

npm install -g @vue/cli
# OR
yarn global add @vue/cli

プロジェクトを作成

参考 cli.vuejs.org

コマンドで作成したい場合

vue create hello-world

GUIベースで作成したい場合

vue ui

を実行すると以下のような画面が開く

GUI上でもLintやTypeScriptの追加を行うことができる

pugの追加

パッケージのインストール

npm i pug pug-loader pug-plain-loader
# OR
yarn add pug pug-loader pug-plain-loader

www.npmjs.com

www.npmjs.com

www.npmjs.com

vue内の記載を変更

変更前template

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

変更後

<template lang="pug">
  #app
    img(alt="Vue logo" src="./assets/logo.png")
    HelloWorld(msg="Welcome to Your Vue.js App")
</template>

stylusの追加

パッケージのインストール

npm i stylus stylus-loader style-resources-loader
# OR
yarn add stylus stylus-loader style-resources-loader

www.npmjs.com

www.npmjs.com

https://www.npmjs.com/package/style-resources-loaderwww.npmjs.com

stylusが適応されるように変更

reset.cssなどグローバルの記載

main.jsに以下を記載

require('@/assets/stylus/main.styl') // ここは読み込みを行うファイルを指定する

stylusの変数やmixinをuveファイル内で読み込みを行う

参考 cli.vuejs.org

https://cli.vuejs.org/guide/css.html#automatic-importsの以下の部分を追記

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/imports.styl'), // ここは読み込みを行うファイルを指定する
      ],
    })
}

vue内の記載を変更

変更前

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

変更後

#app
  font-family "Avenir", Helvetica, Arial, sans-serif
  text-align center
  color #2c3e50
  margin-top 60px

lint, prettierの設定

最初の設定の部分でも入れることはできるが、後々いれたくなった時のために、念のためlintの設定についても、記載

パッケージのインストール

npm i @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue husky lint-staged prettier
# OR
yarn add @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue husky lint-staged prettier

各種ファイルの設定

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {},
}

.huskyrc

"hooks": {
  "pre-commit": "lint-staged"
} 

.prettierrc

{
  "semi": false,
  "arrowParens": "always",
  "printWidth":120,
  "tabWidth":2,
  "useTabs":false,
  "singleQuote":true,
  "proseWrap":"preserve"
} 

package.json

lintの部分のみ記載

{
  "scripts": {
      "lint": "vue-cli-service lint"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": "vue-cli-service lint"
  }
}