dm建站系统,东莞建站模板代理,平陆网站建设,做学校网站素材图片摘要
Vue3的组合式API大大减少了代码量#xff0c;以及使用也方便了很多#xff0c;本案例使用Vite创建一个Vue3示例#xff0c;简单介绍Vue3的组合式API使用以及父传子组件传参示例。
创建Vue3项目
1、首先要安装 Node.js 下载地址#xff1a;https://nodejs.org/en/do…摘要
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 -registryhttps://registry.npm.taobao.org安装完成后使用 cnpm 去创建 Vue 项目。输入以下命令
cnpm create vuelatest然后就会让你选择各种选项大多数是选择否或者全部选择否。执行完成后就会让你按顺序执行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 axiosIndex.vue
templatediv classcontainerimg srchttps://pic.rmb.bdstatic.com/bjh/485143c0324905053289d1cdf74ff9933901.png classtopimg /ulli v-for(item,index) in data :keyitem.mid v-ifdataDatacard :worditem.word :rawhotitem.raw_hot :xuhaoindex //lidiv v-else classloading{{ loading }}/div/ul/div
/templatescript setup// 引入ref和onMountedimport { ref,onMounted } from vue;// 引入axiosimport axios from axios;// 引入组件import Datacard from ./Datacard.vue;// 创建响应式的变量初始值设置为nullconst data ref(null);// 还没加载到数据就使用这个变量const loading ref(加载中...);// 请求接口获取数据const getData async () {try {const response await axios.get(https://demo.likeyunba.com/getSinawbHotSearch/);// 接口返回ok1就是成功获取到数据if(response.data.ok 1) {data.value response.data.data.realtime;}else{loading.value 加载数据失败;}} catch (error) {loading.value 加载数据失败;}};// 组件挂载后自动加载onMounted(() {getData();});
/scriptstyle 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 :hrefhttps://s.weibo.com/weibo?q%23 word %23t31band_rank1Refertop targetblankspan classword {{ xuhao1 }} . {{ word }} /span/aspan classraw_hot{{ rawhot }}/span
/templatescript setup// 接收参数defineProps({word: String,rawhot: Number,xuhao: Number})
/scriptApp.vue
最后在 App.vue 中引入 Index 组件
templateIndex /
/templatescript setupimport 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:urlimport { 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
