Vue3学习笔记-安装使用

208 阅读2分钟

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单,本教程基于 Vue 3.0.5 版本测试。

安装、使用

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

当做一个类库(library)使用

<script src="https://unpkg.com/vue@next"></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 等。

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

运行、发布

# 运行 (可以监控文件修改,自动刷新客户端)
npm run serve

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

在学习Vue3之前还是要熟悉前端的三架马车

  • HTML
  • CSS
  • JavaScript 准备好后试下第一个实例吧!
Vue 3.0 实例
<div id="hello-vue" class="demo"> {{ message }} </div>

参考资料:

官方网站:v3.vuejs.org/

中文文档: v3.cn.vuejs.org/guide/intro…

Webpack 入门教程:www.runoob.com/w3cnote/web…