Vue 2 全家桶 | 任先生的笔记库

欢迎来到《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非单页面模板" // 模板的描述
  }
}