Vue (Vue3) 入门 （学习笔记）

有过一点点 Vue2 的经验，准备系统学习一下 Vue，以最新的 Vue3 为准，记录一下 Vue 的学习笔记，也希望对其他人有帮助。

文章目录

• 安装、使用
• • 当做一个类库（library）使用
  • 当做框架使用
• Vue 实战
• 福利: Vue - Cheat Sheet

安装、使用

使用 Vue 一般有 2 中方式，一种是把它当做一个类库（library）使用，一种是当做框架使用，整个项目可以称作为 Vue 项目。

当做一个类库（library）使用

<script src="https://unpkg.com/[email protected]"></script>

在 HTML 中，引入 Vue 的核心库文件，然后把 Vue 当做一个模板引擎，数据绑定引擎来使用。还有一种应用，就是测试一些 vue 的语法、行为等，创建一个 html 文件，映入 vue.js，然后测试一些语法等东西。

当做框架使用

当做框架使用，整个项目可以称作为 Vue 项目，按照 Vue 的要求组织项目文件结构。对应大中型项目来说，必然要使用射中方式，下文也将以这种使用方式为主。

安装 vue3

使用 npm 或者 yarn 安装。

另外，Vue3 新引入了一个 Vite，是一个 Vue3 的在开发模式下，快速打包、运行的客户端工具，现在还处于 RC 阶段。这个也许是 Vue 今后必备的客户端辅助工具，但是因为还不是很完善，所以仍然推荐使用 VueCLI。

# 安装 Vue CLI
npm install -g @vue/cli

# 创建Vue3的项目 (e.g. vue3)
vue create vue3

创建 Vue3 的项目,推荐使用手工选择功能(Manually select features)模式。选择这个模式后，可以选择是否使用 typescript, router, vues, unit testing, e2e testing 等。

1. typescript, 看个人爱好和项目需要了。typescript 是趋势，vue3 也开始用 typescript 重写了，但感觉 vue 对 typescript 的支持还是有待完善。
2. Router，这个选上吧，必然会用到
3. Vuex。用于状态管理（state management）， 有人说 vue3 新引入的 reactivity 可以代替这个东西。
4. Linter/ Formatter: 这个用于规范代码，建议选上。
5. 其他选项，看个人爱好和项目需求吧。

运行、发布

# 运行 （可以监控文件修改，自动刷新客户端）
npm run serve

# 打包发布。（默认发布到dist目录下）
npm run build

Vue 实战

了解过一些 Vue 的基本概念后，推荐那几个小项目练练手。推荐这个 https://public.vuejsworkshops.com/， 有 4 个练习的小项目，一步一步都有讲解。并且是基于 Codesandbox （在线开发、预览），直接上手实现，免去 vue 的安装、配置等操作。

1. https://public.vuejsworkshops.com/guide/landing/， 将 Vue 作为一个类库（library）使用。
2. https://public.vuejsworkshops.com/guide/todos/， 一个 Vue 项目，实现一个很流行的 TODO 应用的实践。
3. https://public.vuejsworkshops.com/guide/podcasts/， 稍高级的一些 Vue 的实践，包括路由（Vue-Router), 基于 axios 的 REST 的调用，以及大型项目中必须的状态管理-Vuex。
4. https://public.vuejsworkshops.com/guide/vuelidate/, 基于 vuelidate library，实现表单（FORM）的客户端验证。

福利: Vue - Cheat Sheet

短小精悍的 Vue 的总结(Cheat Sheet)：

1. Vue: https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf
2. Vue3: https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf