VUEプロジェクト構成関連レコード

4104 ワード

以下の構成はいずれもVUE cli 3に基づいて構築されたアプリケーションである
構成リファレンス
パス別名の構成
components、styleなどのさまざまな一般的なパスを別名に構成することができ、参照するときに便利です.
プロジェクトルートディレクトリにvueを新規作成します.config.jsプロファイル、内容は以下の通り、aliasで別名構成、keyで別名、valueで対応するパス、@でルートディレクトリを表す
// vue.config.js
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                'styles': '@/assets/styles',
                'components': '@/components',
            },
        },
    },
}

構成が完了したら、プロジェクトで使用します.
js,vue:
import componentA from '~components/componentA'

css:
@import "~styles/someStyle.css"

書き換えを要求する
発行されたリクエストをエージェントで書き換えるか、vue.config.jsファイルに追加できます.
// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                pathRewrite: {'^/api' : '/another_url'}
            }
        }
    }
}

以上の構成は、要求urlに/apiがある場合、/api/another_urlに置き換えることを示す
スタイル構成
stylusはCSSプリプロセッサで、CSSをより楽しくやっつけるのに役立ちます.
インストール
npm install -D stylus stylus-loader

使用
参照
対応するファイル名はstylです
css:
@import "~styles/mixins.styl"

js:
import "~styles/mixins.styl"

スタイルラベルでの使用


Eslint構成
ESLintは主にコードチェックに使用され、.eslintrcまたはpackage.jsoneslintConfigフィールドで構成できます.
package.jsonのデフォルト設定:
{
    "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "rules": {
          "no-console": "off",
          "indent": [
            "warn",
            4
          ],
          "quotes": [
            "warn",
            "single"
          ]
        },
        "parserOptions": {
          "parser": "babel-eslint"
        }
  },
}

ルールはrulesフィールドに書かれており、ルール値は'error''off''warn'とすることができます.
rules: {
    "   ": [   ,     ]
}

共通ルール、完全なルールの参照
'rules': {
    // no-var
    'no-var': 'error',
    //       var        
    'init-declarations': 2,
    //        
    'quotes': ['error', 'single'],
    //              ASI
    'semi': ['error', 'never'],
    //         
    'no-extra-semi': 'error',
    //            
    'linebreak-style': ['error', 'unix'],
    //   2 
    'indent': ['error', 2, {'SwitchCase': 1}],
    //                (,  ), never  :[     ]        ,always  :[     ]        
    'array-bracket-spacing': [2, 'never'],
    //                       
    'block-scoped-var': 0,
    // if while function    {   if    ,java  。
    'brace-style': [2, '1tbs', {'allowSingleLine': true}],
    //        
    'camelcase': 2,
    //               , never  :        , always  :        , 
    'comma-dangle': [2, 'never'],
    //          
    'comma-spacing': [2, {'before': false, 'after': true}],
    //                 
    'comma-style': [2, 'last'],
    //     
    'complexity': [2, 9],
    //           ,[     ]         ,      never, always
    'computed-property-spacing': [2, 'never'],
    // TODO             ,TypeScript   ,   
    // 'consistent-return': 0
  }