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

# 动手试一试

使用原生 js、jQuery 方式、基础 vue、带 router 的 vue 等方式完成 导航栏切换 (opens new window) 的小案例(效果参考 (opens new window)

# CDN 链接示例

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

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

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

# 官方调试工具

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

Devtools旧版本 (opens new window)(v5)
Devtools最新版本 (opens new window)(目前是 6.50)

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

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

# vue2 配套插件

插件 说明
Vetur(vue2 官方) vue2 语法高亮、代码格式化
ESLint 开发时获得规范检查器的反馈
VueHelper vue2 全家桶 语法提示、代码补全(V、VR、VX、vm.等等)
Vue 3 Snippets vue2、vue3 全能插件(支持非单文件 vue 代码补全)
Vue VSCode Snippets vue2、vue3 全能插件 (由 vue 名誉核心团队 Sarah Drasner 制作)

# vscode 代码片段

ren-vue2-.html
{
  "HTML5-vue2": {
    "prefix": "ren-vue2-.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@2/dist/vue.js\"></script> -->",
      "\t\t<script src=\"https://unpkg.com/vue@2/dist/vue.js\"></script>",
      "\t</head>\n",
      "\t<body>",
      "\t\t<div id=\"app\"></div>\n",
      "\t\t<script type=\"text/JavaScript\">",
      "\t\t\tnew Vue({",
      "\t\t\t\tel: '#app',",
      "\t\t\t\tdata: {",
      "\t\t\t\t\t//",
      "\t\t\t\t},",
      "\t\t\t});",
      "\t\t</script>",
      "\t</body>",
      "</html>\n"
    ],
    "description": "lencamo自定义的vue2非单页面模板" // 模板的描述
  }
}
更新于 : 5/4/2024, 3:25:17 AM