• Vue项目案例-头条新闻

    目录

    1.项目介绍

    1.1项目功能

    1.2数据接口

    1.3设计思路

    2.创建项目并安装依赖

    2.1创建步骤

    2.2工程目录结构

    2.3配置文件代码

    3.App主组件开发

    3.1设计思路

    3.2对应代码

    4.共通组件开发

    4.1设计思路

    4.2对应代码

    5.头条新闻组件开发

    5.1设计思路

    5.2对应代码

    6.分类新闻组件开发

    6.1设计思路

    6.2对应代码

    7.项目打包

    1.项目介绍

    1.1项目功能

    该案例为使用Vue2.X设计的头条新闻小项目。对应的功能比较简单，主要是有两个功能模块，一个为头条新闻，另一个是分类新闻。对应的设计效果图如下：

    该项目的顶部有两个导航栏，分别是头条新闻和分类新闻。点击对应的导航会有相应的新闻出现。分类新闻部分还可以选择对应的新闻分类来选择自己想要的新闻种类。点击对应的新闻列表会跳转到对应的详细新闻的界面。同时，分类新闻会随机抽取一张底下新闻的图片进行展示，并且点击之后也会跳转到对应的新闻。

    1.2数据接口

    该项目使用到的数据接口为：聚合数据：https://www.juhe.cn/

    申请 “新闻头条” 数据接⼝： https://www.juhe.cn/docs/api/id/235 （不可直接跨域访问）

    按照聚合数据⽹站的规定，进⾏注册以及实名认证，然后申请 “新闻头条” 数据接⼝。

    选择新闻头条的API，并且之后需要记住自己的key值，后续需要用到。

    1.3设计思路

    本项目的设计思路为：把最上面的标题以及导航栏放在APP主组件中， 然后再设计头条新闻组件和分类新闻组件，分别存放这两个页面独有的东西，最后再设计一个共通组件，该组件专门用于存放新闻列表。

    2.创建项目并安装依赖

    2.1创建步骤

    1️⃣打开命令行窗口，去到你想要创建文件的对应文件中, 输入vue create news。注意文件名不能有大写字母。（这里需要等待一段时间，如果一直没有响应可以点下回车）

    2️⃣安装完成之后点击Manually select features, 自定义配置。

    3️⃣然后选择Router, 到对应的配置前点空格即可选中。其他的不需要选择。

    4️⃣版本选择2.x

    5️⃣之后的选择如下：

    6️⃣等待安装之后，进入对应的文件下：安装axios以及qs（注意：如何你电脑没有安装淘宝镜像，无法使用cnpm，需要先安装之后才能够使用cnpm指令。或者直接npm也可以安装，只不过需要耗费时间。）

    暗转之后有显示对应的版本号就是安装成功了！

    7️⃣安装之后进入对应的文件中，然后运行npm run serve,若出现以下的页面，则代表项目创建成功！

    2.2工程目录结构

    项目创建完成之后需要先清楚到其他原本不需要的组件和文件，对应项目的目录如下：

    2.3配置文件代码

    package.json⽂件 
    1. {
    2.   "name": "topnews",
    3.   "version": "0.1.0",
    4.   "private": true,
    5.   "scripts": {
    6.     "serve": "vue-cli-service serve",
    7.     "build": "vue-cli-service build"
    8.   },
    9.   "dependencies": {
    10.     "axios": "^0.20.0",
    11.     "core-js": "^3.6.5",
    12.     "vue": "^2.6.11",
    13.     "vue-router": "^3.2.0"
    14.   },
    15.   "devDependencies": {
    16.     "@vue/cli-plugin-babel": "~4.5.0",
    17.     "@vue/cli-plugin-router": "~4.5.0",
    18.     "@vue/cli-service": "~4.5.0",
    19.     "vue-template-compiler": "^2.6.11"
    20.   },
    21.   "browserslist": [
    22.     "> 1%",
    23.     "last 2 versions",
    24.     "not dead"
    25.   ]
    26. }
    这部分我们并不需要自己写，在我们加载依赖的时候就已经自动生成了。
    vue.config.js⽂件 
    1. module.exports = {
    2. 	devServer:{
    3. 		port:8080,                           //修改工程启动端口
    4. 		proxy:{
    5. 			'/juheNews':{
    6. 				target:'http://v.juhe.cn/',  //需要跨越访问的url
    7. 				ws:'true',                   //设置代理webSocket
    8. 				changeOrigin:true,           //允许跨越
    9. 				pathRewrite:{
    10. 					'^/juheNews':''          //重写路径
    11. 				}
    12. 			}
    13. 		}
    14. 	}
    15. }

    该文件主要是可以修改访问的端口号，以及使用了proxy解决了跨域的问题。

    main.js⽂件 
    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. import router from './router'
    4.  
    5. import axios from 'axios'
    6. import qs from 'qs'
    7.  
    8. Vue.prototype.$axios = axios;
    9. Vue.prototype.$qs = qs;
    10.  
    11. Vue.config.productionTip = false
    12.  
    13. new Vue({
    14.   router,
    15.   render: h => h(App)
    16. }).$mount('#app')

    该文件为项目的入口文件，在该文件中引入了外部的资源，并且让axios以及qs添加到原型中，因此在其他的文件使用它们时就不需要再进行导入了，直接使用$axios以及$qs即可以使用。

    路由配置⽂件 
    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import TopNews from '../views/TopNews.vue'
    4. import TypeNews from '../views/TypeNews.vue'
    5.  
    6. Vue.use(VueRouter)
    7.  
    8. const routes = [
    9. 	{
    10. 		path: '/',
    11. 		name: 'Home',
    12. 		component: TopNews
    13. 	},{
    14. 		path: '/topNews',
    15. 		name: 'TopNews',
    16. 		component: TopNews
    17. 	},{
    18. 		path: '/typeNews',
    19. 		name: 'TypeNews',
    20. 		component: TypeNews
    21. 	}
    22. ]
    23.  
    24. const router = new VueRouter({
    25. 	routes
    26. })
    27.  
    28. export default router

    该文件主要对路由进行了设计，让主页显示topnews路由，需要注意的是路由的名字不能相同。

    3.App主组件开发

    3.1设计思路

    该部分主要存放了标题以及对应的导航栏。对导航栏绑定事件，但点击对应的导航时，会触发事件，并传入对应的参数，让其显示相应的路由组件。而created函数主要是为了避免页面刷新之后，无法保留原本点击的页面。

    3.2对应代码

    2.  
    3. <script>
    4. 	export default{
    5. 		data(){
    6. 			return {
    7. 				isActive:'typeNews'
    8. 			}
    9. 		},
    10. 		created() {
    11. 			let path = location.href;
    12. 			this.isActive = path.substring(path.lastIndexOf('/')+1);
    13. 		},
    14. 		methods:{
    15. 			changeNav(param){
    16. 				this.isActive = param;
    17. 				if(param=='topNews'){
    18. 					this.$router.push('/topNews');
    19. 				}else if(param=='typeNews'){
    20. 					this.$router.push('/typeNews');
    21. 				}
    22. 			}
    23. 		}
    24. 	}
    25. script>
    26.  
    27. <style>
    28. 	/******************** css reset ********************/
    29. 	html,body,div,header,nav,h1,h2,h3,h4,h5,h6,ul,li{
    30. 		margin: 0;
    31. 		padding: 0;
    32. 		font-family: "微软雅黑";
    33. 	}
    34. 	ul{
    35. 		list-style: none;
    36. 	}
    37. 	a{
    38. 		text-decoration: none;
    39. 	}
    40. 	
    41. 	header{
    42. 		width: 100%;
    43. 		height: 48px;
    44. 		background-color: #E03D3E;
    45. 		
    46. 		display: flex;
    47. 		justify-content: center;
    48. 		align-items: center;
    49. 		
    50. 		font-size: 20px;
    51. 		color: #fff;
    52. 		/*设置字间距*/
    53. 		letter-spacing: 4px;
    54. 	}
    55. 	nav{
    56. 		width: 100%;
    57. 		height: 56px;
    58. 		display: flex;
    59. 		justify-content: center;
    60. 		align-items: center;
    61. 	}
    62. 	nav ul{
    63. 		width: 160px;
    64. 		height: 26px;
    65. 		
    66. 		display: flex;
    67. 		justify-content: space-between;
    68. 	}
    69. 	nav ul li{
    70. 		width: 70px;
    71. 		height: 26px;
    72. 		
    73. 		display: flex;
    74. 		justify-content: center;
    75. 		align-items: center;
    76. 	}
    77. 	.navinit{
    78. 		color: #E03D3E;
    79. 		border-bottom: solid 2px #E03D3E;
    80. 	}
    81. style>

    4.共通组件开发

    4.1设计思路

    该部分主要是实现新闻列表的展示，因此主要是接受其父组件，也就是Topnews以及Typenews两个组件对其传入的值。并使用v-for遍历数据，让显示在列表上。

    4.2对应代码