Vue3项目创建+组合式API使用+组件通信+渲染微博热搜+打包上线

摘要

Vue3的组合式API大大减少了代码量，以及使用也方便了很多，本案例使用Vite创建一个Vue3示例，简单介绍Vue3的组合式API使用以及父传子组件传参示例。

创建Vue3项目

1、首先要安装 Node.js 下载地址：https://nodejs.org/en/download
2、安装完成后，创建一个文件夹，用于创建 Vue 项目，我是在桌面创建的
3、在你创建的文件夹内的路径这一栏，输入 cmd 回车

即可进入命令行工具，然后输入以下命令，安装 cnpm ，因为是中国大陆，所以使用 cnpm 会比较快。

npm install -g cnpm -registry=https://registry.npm.taobao.org
1

安装完成后，使用 cnpm 去创建 Vue 项目。输入以下命令：

cnpm create vue@latest
1

然后就会让你选择各种选项，大多数是选择否，或者全部选择否。执行完成后，就会让你按顺序执行3次命令，分别是：

cd 项目名
npm install
npm run dev
1
2
3

因为你已经安装了 cnpm ,所以你可以后面需要使用 npm 的时候，改为 cnpm 即：

cd 项目名
cnpm install
cnpm run dev
1
2
3

执行 cnpm run dev 后，就会在你本地开启一个端口，进入到项目的运行。

在浏览器访问：

http://localhost:5173/
1

就会打开 Vue 项目：

这代表你已经成功搭建了一个 Vue3 项目并运行。

上代码

你可以将Vue项目的 view 目录删除，以及 components 里面的所有文件删除， main.css 里面的代码清空，如果你还没使用到路由，也可以将路由相关的代码注释或者删除。

新建 Index.vue 文件

这个是首页组件，这个使用了 axios 发起一个请求，获取微博热搜数据然后渲染。其中每一条的微博热搜都传给 Datacard.vue 组件进行渲染。所以这里通过：

import Datacard from './Datacard.vue';
1

引入了组件。

因为使用了 axios ，所以你要通过以下命令下载 axios

cnpm install axios
1

Index.vue

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

新建 Datacard.vue 文件

组合式API接收父类参数，使用 defineProps 即可，只需要对传过来的参数指定数据类型，然后直接在模板中使用参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

App.vue

最后在 App.vue 中引入 Index 组件

1
2
3
4
5
6
7

最终的代码结构：

打包上线

打包上线需要通过一个命令编译成浏览器可以运行的 html 代码，因为 .vue 代码是在开发的时候使用的，浏览器无法运行 .vue 文件，所以需要打包，打包就是将 .vue 文件里面的代码编译成浏览器可以解析执行的 html 代码。

在打包前，需要做一个简单的配置，如果你的代码最终会上传到服务器的根目录，无需配置，如果是上传到其他目录，例如二级目录，需要进行配置，例如二级目录名为 vue3-setup-weibo-hotserach ，在 vite.config.js 这个文件加入下面这行代码：

base: process.env.NODE_ENV === 'production' ? '/vue3-setup-weibo-hotserach/' : '/',
1

完整代码：

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/vue3-setup-weibo-hotserach/' : '/',
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

打包命令：

cnpm run build
1

执行这个命令后就会快速打包。打包完成后，会在你的项目文件夹内出现一个 dist 目录，这个目录里面的代码就是编译后的 html 代码。

将这些代码上传至服务器。

在线演示

https://demo.likeyunba.com/vue3-setup-weibo-hotserach/

作者

TANKING