Vue3学习笔记！

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API，作者是尤雨溪。

官网：http://cn.vuejs.org/

仓库：https://github.com/vuejs

文档与资源大全：https://vue3js.cn/

第一个Vue程序

1、安装Node.js

2、安装Vue-cli

如果之前安装过Vue2，需要把Vue2卸载。

1
npm uninstall vue-cli -g

安装最新版本的vue-cli

1
npm i -g @vue/cli

查看版本号

1
vue -v

3、创建Vue3.0项目

1
vue create 项目名称

4、运行项目

使用cd命令进入项目，然后运行

1
npm run serve

在浏览器中输入http://localhost:8080查看

5、使用图形化界面创建项目

1
vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

在这里插入图片描述

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|-dist                          -- 生成打包后文件
|-node_modules                  -- 项目依赖包的目录
|-public                        -- 项目公用文件
	|--favicon.ico              	-- 网站地址栏前面的小图标
	|--index.html                  -- 项目的默认首页，Vue的组件需要挂载到这个文件上
|-src                           -- 源文件目录，程序员主要工作的地方
	|-api                           -- 与后端交互使用相关方法和配置
	|-assets                   		-- 静态文件目录，图片图标、样式，比如网站logo
	|-components                	-- Vue3.x的自定义组件目录
	|-router                    	-- vue-router相关配置
	|--utils                    	-- 通用工具包
	|--views                    	-- 页面
	|--App.vue                  	-- 项目的根组件，单页应用都需要的
	|--main.css                	-- 一般项目的通用CSS样式写在这里，main.js引入
	|--main.js                  	-- 项目入口文件，SPA单页应用都需要入口文件
|--.gitignore                   -- git的管理配置文件，设置那些目录或文件不管理
|--package-lock.json           -- 项目包的锁定文件，用于防止包版本不一样导致的错误
|--package.json                -- 项目配置文件，包管理、项目名称、版本和命令

使用Vite构建第一个Vue程序

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

Vite官网：https://vitejs.cn

  • Vite是Vue团队打造的新一代前端构建工具。
  • 优势：
    • 开发环境中，无需打包操作，可快速的冷启动。
    • 轻量快速的热重载（HMR）。
    • 真正的按需编译，不再等待整个应用编译完成。
1
2
3
4
5
6
7
8
## 创建工程
npm init vite-app yk_vue3
## 进入工程目录
cd yk_vue3
## 安装依赖
npm install
## 运行
npm run dev

API风格

Vue的组件可以按两种不同的风格书写：选项式 API 和组合式 API。

选项式 API (Options API)：

使用选项式 API，可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。

选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件监听器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组合式 API (Composition API)：

通过组合式 API，可以使用导入的 API 函数来描述组件逻辑。

在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。

这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，可以更简洁地使用组合式 API。

比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

下面是使用了组合式 API 与 <script setup> 改造后和上面的模板完全一样的组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
    <div>
        <button type="button" @click="increment()">count is : {{count}}</button>
    </div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
  name: 'Hello',
  setup () {
    const count = ref(0)

    function increment () {
      count.value++
    }

    onMounted(() => {
      console.log(count)
    })

    return { count, increment }
  }
}

</script>
<style scoped>
    button{
        font-weight: bold;
    }
</style>

使用VS Code 集成开发工具（IDE）

安装插件:

Vue 3 Snippets:

  • 用于vue3的智能代码提示，语法高亮、智能感知、Emmet等。
  • 替代Vetur插件，Vetur在vue2时期比较流行。

Volar：

  • 语法高亮、智能感知、Emmet等。

插件ESLint：

  • 检查代码是否符合规范。

Prettier:

  • 代码格式化。

在浏览器中直接使用Vue3.0

1、通过 CDN 使用 Vue

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

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>vue3介绍</title>
  </head>

  <body>
    <div id="app1">{{message}}</div>
    <div id="app2">
      <span v-bind:title="message"> 把鼠标放到这里试试 </span>
    </div>
    <script src="js/vue3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      const { createApp } = Vue;

      //vue应用对象
      var app2 = createApp({
        data() {
          return {
            message: "Hello Vue3!",
          };
        },
      }).mount("#app1");

      //绑定属性
      var app2 = createApp({
        data() {
          return {
            message: "页面加载时间是：" + new Date().toLocaleString(),
          };
        },
      }).mount("#app2");
    </script>
  </body>
</html>

Vue Devtools

当使用 Vue 时，推荐同时在你的浏览器上安装 Vue Devtools，它允许你在一个更加友善的界面中审查和调试你的 Vue 应用。

Vue Devtools是一个内嵌在Google Chrome浏览器中的插件，用于更好的调试Vue应用程序。

源码：https://github.com/vuejs/vue-devtools#vue-devtools

https://github.com/vuejs/devtools/releases/download/v6.1.3/devtools-chrome.zip

下载后解压，在chrome地址栏中输入：chrome://extensions/

直接将crx文件插入浏览器，确认就安装成功了。

插件会自动检测当前是否使用了vue，如果使用了图标会亮起，在开发者工具中有一个调试界面。

在这里插入图片描述