這個插件基于最新的 Vue3 的 API 添加了 Code Snippets。
插件的 Snippets 如下表格所示，比如你可以鍵入 reactive 然後按上下鍵選中 reactive 再按 Enter 鍵，就輸入了const data = reactive({...})了。
Vue3 Snippets源碼
Vue3 Snippets下載下傳
This extension adds Vue3 Code Snippets into Visual Studio Code.
Including most of the API of Vue3. You can type <code>reactive</code>, choose <code>reactive</code>, and press ENTER, then <code>const data = reactive({...})</code> appear on the screen.
插件的 Snippets 如下表格所示，比如你可以鍵入 <code>reactive</code> 然後按上下鍵選中 <code>reactive</code> 再按 Enter 鍵，就輸入了<code>const data = reactive({...})</code>了。
Prefix
JavaScript Snippet Content
<code>import</code>
<code>import {...} from "@vue/composition-api"</code>
<code>import {...} from 'vue'</code>
<code>newVue</code>
<code>newVue({...})</code>
<code>createComponent</code>
<code>createComponent({...})</code>
<code>export</code>
<code>export default { ... }</code>
<code>setup</code>
<code>setup(${...}) {...}</code>
<code>reactive</code>
<code>const data = reactive({...})</code>
<code>watch</code>
<code>watch(..., ...)</code>
<code>watchFn</code>
<code>watch(() => {...})</code>
<code>computed</code>
<code>computed(() => { get: () => {...}, set: () => {...}})</code>
<code>toRefs</code>
<code>toRefs(...)</code>
<code>ref</code>
<code>ref(...)</code>
<code>props</code>
<code>props(...)</code>
<code>onBeforeMount</code>
<code>onBeforeMount(...)</code>
<code>onMounted</code>
<code>onMounted(...)</code>
<code>onBeforeUpdate</code>
<code>onBeforeUpdate(...)</code>
<code>onUpdated</code>
<code>onUpdated(...)</code>
<code>onBeforeUnmount</code>
<code>onBeforeUnmount(...)</code>
<code>onUnmounted</code>
<code>onUnmounted(...)</code>
<code>onErrorCaptured</code>
<code>onErrorCaptured(...)</code>
Vue Composition API
<code>@vue/composition-api</code> 使開發者們可以在 <code>Vue 2.x</code> 中使用 <code>Vue 3.0</code> 引入的基于函數的邏輯複用機制。
English Version
Installation / 安裝
Usage / 使用
TypeScript
TSX
Limitations / 限制
API
Changelog / 更改日志
npm
yarn
CDN
By using the global variable window.vueCompositionApi.
通過全局變量 <code>window.vueCompositionApi</code> 來使用。
You must install @vue/composition-api via Vue.use() before using other APIs:
在使用任何 <code>@vue/composition-api</code> 提供的能力前，必須先通過 <code>Vue.use()</code> 進行安裝:
After installing the plugin you can use the Composition API to compose your component.
安裝插件後，您就可以使用新的 Composition API 來開發元件了。
This plugin requires TypeScript version >3.5.1. If you are using <code>vetur</code>, make sure to set <code>vetur.useWorkspaceDependencies</code> to <code>true</code>.
To let TypeScript properly infer types inside Vue component options, you need to define components with <code>createComponent</code>:
請使用最新版的 TypeScript，如果你使用了 <code>vetur</code>，請将 <code>vetur.useWorkspaceDependencies</code> 設為 <code>true</code>。
為了讓 TypeScript 正确的推導類型，我們必須使用 <code>createComponent</code> 來定義元件:
🚀 An Example Repository with TS and TSX support is provided to help you start.
To support TSX, create a declaration file with following content in your project.
🚀 這裡有一個配置好 TS/TSX 支援的示例倉庫來幫助你快速開始.
要支援 TSX，請建立一個類型定義檔案并提供正确的 JSX 定義。内容如下：
<code>Unwrap</code> is not working with Array index.
數組索引屬性無法進行自動的<code>Unwrap</code>:
This is an limitation of using <code>Vue.observable</code> in Vue 2.
此行為與 Vue 2 中的 <code>Vue.observable</code> 一緻
Vue 3 will return an new proxy object.
Vue 3 中會傳回一個新的的代理對象.
<code>onTrack</code> and <code>onTrigger</code> are not available in WatchOptions.
不支援 <code>onTrack</code> 和 <code>onTrigger</code> 選項。
✅ Support ❌ Not Supported
✅ String ref && return it from <code>setup()</code>:
✅ String ref && return it from <code>setup()</code> && Render Function / JSX:
❌ Function ref:
❌ Render Function / JSX in <code>setup()</code>:
If you really want to use template refs in this case, you can access <code>vm.$refs</code> via <code>SetupContext.refs</code>.
如果你依然選擇在 <code>setup()</code> 中寫 <code>render</code> 函數，那麼你可以使用 <code>SetupContext.refs</code> 來通路模闆引用，它等價于 Vue 2.x 中的 <code>this.$refs</code>:
⚠️ Warning: The <code>SetupContext.refs</code> won't exist in <code>Vue 3.0</code>. <code>@vue/composition-api</code> provide it as a workaround here.
⚠️ 警告: <code>SetupContext.refs</code> 并不屬于 <code>Vue 3.0</code> 的一部分, <code>@vue/composition-api</code> 将其曝光在 <code>SetupContext</code> 中隻是臨時提供一種變通方案。
You may also need to augment the <code>SetupContext</code> when working with TypeScript:
如果項目使用了 TypeScript，你還需要擴充 <code>SetupContext</code> 類型:
Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the onServerPrefetch lifecycle hook that allows you to use the serverPrefetch hook found in the classic API.
如果文章和筆記能帶您一絲幫助或者啟發，請不要吝啬你的贊和 Star，你的肯定是我前進的最大動力😁
https://github.com/Wscats/vue-cli
更多内容請關注：https://github.com/Wscats