vue 3 全家桶 | 任先生的笔记库

欢迎来到《vue3.0》学习部分。

官方文档

# CDN 链接示例

在项目中安装 vue.js：下载 vue.js、CDN、npm 等等

<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>

<script src="https://unpkg.com/vue@next"></script>

# 官方调试工具

Vue 的官方调试工具 Devtools (opens new window) (opens new window)(opens new window)已经集成了 Vuex、vue-router。

Devtoolsvue2 版 (opens new window)（v5）
Devtoolsvue3 版 (opens new window)（目前是 6.50）

若 Vue devtools 插件不能在浏览器正常显示故障排除 (opens new window)，大概率是：

1、配置插件权限为：允许访问文件地址、在所以网站上
2、开发环境引入了 vue.js（不要引入 vue.min.js）

# vue3 配套插件：

提示

vue3 官方描述：工具链 (opens new window)

Volar (opens new window) 取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur (opens new window)。如果你之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用它。

插件	说明
Vue Language Features (Volar✨)	vue3 语法高亮、代码格式化
TypeScript Vue Plugin (Volar✨)	支持在 TS 中 import *.vue 文件
ESLint	开发时获得规范检查器的反馈
Pretty TypeScript Errors	让 TypeScript 错误完美且易于阅读

Vue 3 Snippets	vue2、vue3 全能插件（支持非单文件 vue 代码补全）
Vue VSCode Snippets	vue2、vue3 全能插件（由 vue 名誉核心团队 Sarah Drasner 制作）

# vscode 代码片段

ren-vue3-.html

{
  "HTML5-vue3": {
    "prefix": "ren-vue3-.html", // 对应的是使用这个模板的快捷键
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "\t<head>",
      "\t\t<meta charset=\"UTF-8\" />",
      "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
      "\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />",
      "\t\t<title>Document</title>",
      "\t\t<!-- <script src=\"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js\"></script> -->",
      "\t\t<script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>",
      "\t</head>\n",
      "\t<body>",
      "\t\t<div id=\"app\"></div>\n",
      "\t\t<script>",
      "\t\t\tconst { createApp } = Vue\n",
      "\t\t\tcreateApp({",
      "\t\t\t\tdata() {",
      "\t\t\t\t\treturn {",
      "\t\t\t\t\t\t//",
      "\t\t\t\t\t}",
      "\t\t\t\t}",
      "\t\t\t}).mount('#app')",
      "\t\t</script>",
      "\t</body>",
      "</html>\n"
    ],
    "description": "lencamo自定义的vue3非单页面模板" // 模板的描述
  }
}

ren-ts-vue3

{
  "lencamo自定义的vue3+TS的.vue文件模板": {
    "prefix": "ren-ts-vue3",
    "body": [
      "<template>",
      "  <div class=\"${1:home}\">",
      "    <h2>${1:home}</h2>",
      "  </div>",
      "</template>",
      "",
      "<script setup lang=\"${2:ts}\">",
      "//$0"
      "</script>",
      "",
      "<style lang=\"${3:scss}\" scoped>",
      ".${1:home} {",
      "  //"
      "}",
      "</style>",
      ""
    ],
    "description": "lencamo自定义的vue3+TS的.vue文件模板"
  }
}

ren-pinia-.ts

{
  "lencamo自定义的 pinia 的.js文件模板": {
    "prefix": "ren-pinia-.ts",
    "body": [
      "import { defineStore } from 'pinia'",
      "",
      "const use${1:Demo}Store = defineStore('${1:Demo}', {",
      "  state: () => ({",
      "    //$2",
      "  }),",
      "  getters: {",
      "    //$3",
      "  },",
      "  actions: {",
      "    //$0",
      "  }",
      "})",
      "",
      "export default use${1:Demo}Store"
    ],
    "description": "lencamo自定义的 pinia 的.js文件模板"
  }
}