最近、vue プロジェクト (vue2 を使用) で、composition-api を使用してコードを記述したところ、vscode 構成にいくつかの小さな穴があることがわかりました.記録すると、将来のクエリに便利です。同じツールを使用して構成するパートナー。
結合された API 構成
- コンポジション API のダウンロード アドレスをダウンロード
- main.js ファイルで導入
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
実際、今のところcomposition-apiはvueでも普通に使えますが、一般的な書き方は公式サイト通りに書けるとのことで、アドレスを添付しておきます。
ただ、この書き方はあまり好きではないので、以下の公式サイトのサンプルコードを見てください。
setup(props) {
const {
user } = toRefs(props)
const {
repositories, getUserRepositories } = useUserRepositories(user)
const {
searchQuery,
repositoriesMatchingSearchQuery
} = useRepositoryNameSearch(repositories)
const {
filters,
updateFilters,
filteredRepositories
} = useRepositoryFilters(repositoriesMatchingSearchQuery)
return {
// 因为我们并不关心未经过滤的仓库
// 我们可以在 `repositories` 名称下暴露过滤后的结果
repositories: filteredRepositories,
getUserRepositories,
searchQuery,
filters,
updateFilters
}
}
書き込み方法を使うときはsetup、それを使う必要がありますreturn. 使用すればするほど、returnコンテンツが長くなります. 大きなファイルに追いつくと、リターンの長さがイライラするのに十分です (結局、私は肉眼で見ました）
したがって、次のような書き方を使用するのが好きです -単一ファイル コンポーネント スクリプトのセットアップ
スクリプト セットアップは、単一ファイル コンポーネント (SFC) で合成 API を使用するためのコンパイル時の構文糖衣です。通常のスクリプト構文と比較して、より多くの利点があります
この構文を使用するにはsetup、scriptコード ブロックに追加します。
<script setup>
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
</script>
retrunだから書く必要はない
単一ファイル コンポーネントの構成ドキュメント
- composition-api をダウンロードし、main.js ファイルに導入します。これは上記の操作と同じです。
- Download unplugin-vue2-script-setup, download address unplugin-vue2-script-setup
注:npm i -D unplugin-vue2-script-setupこのインストールは、独自のプロジェクトのパッケージングに依存します.devDependencies本番環境で package.json の依存関係をnpm i unplugin-vue2-script-setupインストールしない場合は、依存関係は真ん中にありますdependencies。 webpack.config.jsでコンパイルされたコンテンツを構成します。
module.exports = {
/* ... */
plugins: [
require('unplugin-vue2-script-setup/webpack')(),
]
}
注:私のプロジェクトはパッケージングに webpack を使用しています. この場所の構成方法は、あなた自身のプロジェクトのパッケージングに依存します. 異なるパッケージング構成方法はunplugin-vue2-script-setupドキュメントに明確に書かれています.
dependenciesプロジェクトの構成が完了したら、vscode の構成を開始します. vscode を使用するには、@vue/runtime-dom をインストールする必要があります.
npm i -D @vue/runtime-dom
-
vscode エクステンション センターに Volar プラグインをインストールします。
注: Volar プラグインと Vetur プラグインは競合するため、2 つのプラグインは互いに無効にする必要があります。 -
グローバルファイル
tsconfig.jsonのコンテンツを構成する
// tsconfig.json
{
"compilerOptions": {
"types": [
"unplugin-vue2-script-setup/types"
]
},
"vueCompilerOptions": {
"experimentalCompatMode": 2 // vue2 的框架需要加这个配置
}
}
プロジェクトにファイルがない場合はtsconfig.json、プロジェクトの最外層にファイルを追加してみてください.
7. それでも使用する場合は、それに応じて構成するESLint必要があります:eslintrc.js
module.exports = {
// .....
globals: {
defineProps: 'readonly',
defineEmits: 'readonly'
},
}
**注:** 現在、私はdefinePropsと のメソッドのみを使用defineEmitsしており、2 種類しか定義していません. さらにメソッドがある場合は、それらも定義する必要があります. 詳細については、ドキュメント 8 を参照してください. eslint -
plugin- vue プラグインはバージョン 8 以降を使用しています。私は 8.2.0 を使用しています。
"eslint-plugin-vue": "^8.2.0"
上記の構成の後、コードを楽しく書くことができます~~、私の友人に役立つことを願っています.