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

蔚落 2022-12-27 04:51 170阅读 0赞

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

### 文章目录 ###

*  安装、使用
 *   *  当做一个类库（library）使用
     *  当做框架使用
     *   *  安装 vue3
         *  运行、发布
 *  Vue 实战
 *  福利: Vue - Cheat Sheet

# 安装、使用 #

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

## 当做一个类库（library）使用 ##

在 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][https_www.vuemastery.com_pdf_Vue-Essentials-Cheat-Sheet.pdf]
2.  Vue3: [https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf][https_www.vuemastery.com_pdf_Vue-3-Cheat-Sheet.pdf]

[https_www.vuemastery.com_pdf_Vue-Essentials-Cheat-Sheet.pdf]: https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf
[https_www.vuemastery.com_pdf_Vue-3-Cheat-Sheet.pdf]: https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf