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

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

cnpm create vue@latest

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

cd 项目名
npm install
npm run dev

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

cd 项目名
cnpm install
cnpm run dev

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

在浏览器访问：

http://localhost:5173/

就会打开 Vue 项目：

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

上代码

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

新建 Index.vue 文件

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

import Datacard from './Datacard.vue';

引入了组件。

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

cnpm install axios

Index.vue

<template>
	<div class="container">
		<img src="https://pic.rmb.bdstatic.com/bjh/485143c0324905053289d1cdf74ff9933901.png" class="topimg" />
		<ul>
			<li v-for="(item,index) in data" :key="item.mid" v-if="data">
				<Datacard :word="item.word" :rawhot="item.raw_hot" :xuhao="index" />
			</li>
			<div v-else class="loading">{{ loading }}</div>
		</ul>
	</div>
</template>

<script setup>

	// 引入ref和onMounted
	import { ref,onMounted } from 'vue';

	// 引入axios
	import axios from 'axios';

	// 引入组件
	import Datacard from './Datacard.vue';

	// 创建响应式的变量初始值设置为null
	const data = ref(null);

	// 还没加载到数据就使用这个变量
	const loading = ref('加载中...');

	// 请求接口获取数据
	const getData = async () => {
		try {
			const response = await axios.get('https://demo.likeyunba.com/getSinawbHotSearch/');

			// 接口返回ok=1就是成功获取到数据
			if(response.data.ok == 1) {
				data.value = response.data.data.realtime;
			}else{
				loading.value = '加载数据失败！';
			}
			
		} catch (error) {
			loading.value = '加载数据失败！';
		}
	};

	// 组件挂载后自动加载
	onMounted(() => {
		getData();
	});
</script>

<style scope>
	*{
		padding: 0;
		margin: 0;
		list-style: none;
		-webkit-tap-highlight-color:rgba(255,0,0,0);
	}

	body {
		background: #FF8200;
	}

	.container .topimg {
		display: block;
		width: calc(100% - 20px);
		border-radius: 20px;
		margin: 0 auto 20px;
	}

	.container ul li {
		padding: 8px;
		border-bottom: 1px solid #eee;
		display: flex;
	}

	.container ul li .word {
		flex: 1;
		font-size: 15px;
	}

	.container ul li .raw_hot {
		flex: 1;
		text-align: right;
		font-size: 15px;
		color: #999;
	}

	.container ul li a {
		text-decoration: none;
		color: #666;
	}

	.container ul li a:hover {
		color: #FF8200;
	}

	.container .loading {
		text-align: center;
		margin: 20px;
	}

	/* PC 设备 - 最小宽度为 1024px */
	@media screen and (min-width: 1024px) {
	    .container {
			width: 800px;
			margin: 30px auto 100px;
			background: #fff;
			padding: 20px;
			border-radius: 20px;
		}
	}

	/* 平板设备 - 宽度在 768px 到 1023px 之间 */
	@media screen and (min-width: 768px) and (max-width: 1023px) {
	    .container {
			width: 600px;
			margin: 30px auto 100px;
			background: #fff;
			padding: 20px;
			border-radius: 20px;
		}
	}

	/* 手机设备 - 最大宽度为 767px */
	@media screen and (max-width: 767px) {
	    .container {
			width: calc(95% - 40px);
			margin: 30px auto 100px;
			background: #fff;
			padding: 20px;
			border-radius: 20px;
		}
	}

</style>

新建 Datacard.vue 文件

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

<template>

	<!-- 渲染参数 -->
	<a :href="'https://s.weibo.com/weibo?q=%23' + word + '%23&t=31&band_rank=1&Refer=top'" target="blank">
		<span class="word"> {{ xuhao+1 }} . {{ word }} </span>
	</a>
	<span class="raw_hot">{{ rawhot }}</span>
</template>

<script setup>

	// 接收参数
	defineProps({
		word: String,
		rawhot: Number,
		xuhao: Number
	})
</script>

App.vue

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

<template>
  <Index />
</template>

<script setup>
  import Index from './components/Index.vue'
</script>

最终的代码结构：

打包上线

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

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

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

完整代码：

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))
    }
  }
})

打包命令：

cnpm run build

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

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

在线演示

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

作者

TANKING