Vue3.0

等技术栈实现的一款新闻资讯类App#xff0c;适合有一定Vue框架使用经验的开发者进行学习。

项目源码在文章末尾

等技术栈实现的一款新闻资讯类App适合有一定Vue框架使用经验的开发者进行学习。

项目源码在文章末尾

新闻分类首页新闻列表刷新加载最新新闻用户私信留言新闻搜索查看新闻详情

1.1

CLI脚手架工具创建项目。

在指定的硬盘下打开命令行工具并执行以下命令。

#安装脚手架

Chrome浏览器的控制台进行在浏览器中按下F12键然后单击“切换设备工具栏”进入移动端的调试界面可以选择相应的设备进行调试。

项目效果图

项目结构如图2所示其中src文件夹是项目的源文件目录src文件夹下的项目结构如图3所示。

项目结构

node_modules项目依赖管理也是本地服务器的根。

package.json项目npm配置文件。

vue.config.js项目构建配置文件

assets静态资源文件存放目。

components公共组件存放。

router路由配置文件存放。

views视图组件存放目录。

App.vue项目的根组件。

main.ts项目的入口文件。

Shims-vue.d.ts

入口文件

index.html、main.ts和App.vue三个文件这些入口文件的具体内容介绍如下。

2.1

index.html是项目默认的主渲染页面文件主要用于Vue实例挂载点的声明与DOM渲染。

代码如下

!DOCTYPE

htmlWebpackPlugin.options.title

%/title/headbodynoscriptstrongWere

sorry

htmlWebpackPlugin.options.title

doesnt

main.ts是程序的入口文件主要用于加载各种公共组件和初始化Vue实例。

本项目是基于Vue3开发的在入口文件中引入createApp()来创建vue实例对象。

项目中的路由设置和引用的Vant

import

App.vue是项目的根组件所有的页面都是在App.vue下面切换的所有的页面组件都是App.vue的子组件。

在App.vue组件内只需要使用

templaterouter-view/

在src/router/index.ts文件中定义了项目的所有跳转的路由代码如下

import

项目中所有页面组件都在views文件夹中定义所有的公共组件都在components文件夹中定义具体组件内容介绍如下。

3.1

在首页新闻列表和新闻内容页中都需要使用到新闻列表的展示为了增强代码的可扩展性可以在components文件夹下创建NewsCard.vue新闻卡片的公共组件。

代码如下

templatediv

classnews-title{{title}}/divdiv

classnews-msgspan{{author}}/spanspan{{date}}/span/div/van-colvan-col

span8van-image

v-slot:error加载失败/template/van-image/van-col/van-row/div

/templatescript

App首页汇集了整个应用的核心功能入口在头部导航栏部分主要涉及了两个功能的入口按钮分别是“私信”和“搜索”。

在头部导航栏的下方设计了新闻分类的标签页按钮方便用户切换不同类别的新闻列表。

效果如图4所示。

首页导航栏效果

classtop-title今日头条/spanvan-icon

namereplay

--van-tabsv-model:activeactivebackground#F4F5F6stickyoffset-top46title-active-color#EE0A24van-tab

v-fortab

/template新闻类别的标签页数据使用的是本地静态数据在项目中的src/hooks文件夹下创建tabs.ts文件用于保存新闻分类的静态数据。

代码如下

const

tabs在Home.vue文件中进入src/hooks/tabs.ts文件并设置为响应式数据。

代码如下

script

在首页中引入NewsCard.vue新闻卡片的公共组件并对axios获取数据进行封装。

由于本项目中使用的是“聚合数据平台”的数据接口在请求服务端接口时会出现跨域需要先配置本地服务器的请求代理。

在项目根目录下创建vue.config.js配置文件在配置文件中添加proxy的配置。

代码如下

module.exports

}封装axios请求方法在src/hooks目录下创建sendhttp.ts文件代码如下

import

{console.log(res.data)result.value

res.data.result.dataif(toast){toast.clear()}}).catch(err{if(toast){toast.clear()}})}getData(query)//切换导航事件const

tabsChange

spinner,});getData(name,toast)}return

}export

sendhttp在Home.vue文件中引入src/hooks/sendhttp.ts文件并在setup()函数中发送请求将请求成功后的数据遍历在标签页中。

Home.vue文件代码如下

click-rightonClickRighttemplate

#titlespan

classtop-title新闻头条/spanvan-icon

namereplay

--van-tabsv-model:activeactivebackground#F4F5F6stickyoffset-top46title-active-color#EE0A24changetabsChangevan-tab

v-fortab

:authornews.author_name:datenews.date:picnews.thumbnail_pic_sclickonClickNews(news.uniquekey)/news-card/div/van-tab/van-tabs/div

/templatescript

sendhttp(/api/toutiao/index,active.value)//导航栏左侧按钮点击事件const

onClickLeft

{active,replay,tabsList,tabsChange,result,onClickLeft,onClickRight,onClickNews};},

/scriptstyle

点击新闻列表触发NewsCard.vue新闻卡片组件上的点击事件通过useRouter路由模块将新闻的id传给Details.vue新闻详情组件。

代码如下

templatediv

--van-tabsv-model:activeactivebackground#F4F5F6stickyoffset-top46title-active-color#EE0A24changetabsChangevan-tab

v-fortab

:authornews.author_name:datenews.date:picnews.thumbnail_pic_sclickonClickNews(news.uniquekey)/news-card/div/van-tab/van-tabs/div

/templatescript

useRouter()//其他代码...//点击新闻const

onClickNews

/script在新闻详情页中通过useRoute组件获取参数得到新闻的id并再次发送axios请求获取当前新闻的详细数据。

Details.vue组件代码如下

templatediv!--

stylemargin-left:10px;{{result.author_name}}/span/templatetemplate

#rightvan-icon

classnews-title{{result.title}}/div!--

新闻信息

classnews-msgspan{{result.author_name}}/spanspan{{result.date}}/span/div!--

新闻内容

v-htmlresult.content/div/div/div

/templatescript

});//获取请求axios.get(/api/toutiao/content,{params:

{uniquekey:

26dafe8731502872b632b9552feccf06}}).then(res{result.value

res.data.result.detail}).catch(err

{})//点击导航栏左侧按钮const

{window.history.back();};return

/scriptstyle

点击头部导航栏的左侧图标按钮跳转到私信留言列表页面效果如图7所示。

私信留言列表

--van-nav-bartitle私信fixedleft-arrowclick-leftonClickLefttemplate

#leftvan-icon

classcustom-title{{msg.name}}/span/van-badge/templatetemplate

#labelspan

classmsg-content{{msg.content}}/span/template/van-cell/div/div

/templatescript

-webkit-box;-webkit-box-orient:

1;overflow:

/style本项目的私信留言使用的是本地静态数据在src/hooks目录下创建messageData.ts文件用于留言静态数据。

代码如下

const

在首页的头部导航栏点击右侧按钮跳转到新闻搜索页面效果如图8所示。

新闻搜索也效果

--van-searchv-modelkeywordsshaperoundplaceholder请输入你感兴趣的show-actionaction-text搜索cancelonClickRighttemplate

#leftvan-icon

stylemargin-right:10px//template/van-search!--

搜索记录

classsearch-history-titlespan搜索记录/spanvan-icon

namedelete-o

closedelTag(index){{kw}}/van-tag/div/div/div

/templatescript

ref([千锋教育,前端教程])//点击导航栏左侧按钮const

onClickLeft

{window.history.back()}//点击导航栏右侧搜索按钮const

onClickRight

{list.value.push(keywords.value)console.log(keywords)}//删除搜索记录const

delTag

{list.value.splice(index,1)}//清空搜索记录const

clear

{keywords,onClickLeft,delTag,clear,onClickRight,list}}

/scriptstyle

.search-history-titlespan{font-size:

14px;

https://download.csdn.net/download/p445098355/89570498