VUEプロジェクト構成関連レコード
4104 ワード
以下の構成はいずれもVUE cli 3に基づいて構築されたアプリケーションである
構成リファレンス
パス別名の構成
components、styleなどのさまざまな一般的なパスを別名に構成することができ、参照するときに便利です.
プロジェクトルートディレクトリにvueを新規作成します.config.jsプロファイル、内容は以下の通り、
構成が完了したら、プロジェクトで使用します.
js,vue:
css:
書き換えを要求する
発行されたリクエストをエージェントで書き換えるか、
以上の構成は、要求urlに
スタイル構成
stylusはCSSプリプロセッサで、CSSをより楽しくやっつけるのに役立ちます.
インストール
使用
参照
対応するファイル名は
css:
js:
スタイルラベルでの使用
Eslint構成
ESLintは主にコードチェックに使用され、
package.jsonのデフォルト設定:
ルールはrulesフィールドに書かれており、ルール値は'error''off''warn'とすることができます.
共通ルール、完全なルールの参照
構成リファレンス
パス別名の構成
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.json
のeslintConfig
フィールドで構成できます.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
}