1. Vite简介

Vite 是一个由尤雨溪（Vue.js 作者）开发的构建工具，它旨在提供更快的开发体验，尤其适用于现代 JavaScript 框架（如 Vue、React 等）。以下是关
Vite核心特点:
1.快速冷启动
传统构建工具（如 Webpack）在启动开发服务器时，需要对整个项目进行打包编译，这可能会花费较长时间。而 Vite 利用浏览器原生 ES 模块的支持，跳过了打包过程，直接启动开发服务器，实现了秒级的冷启动。
即时热更新（HMR）
2.Vite 提供了高效的热更新机制，当修改代码时，它能够快速更新页面，而不需要重新加载整个页面。这大大提高了开发效率，尤其是在开发大型项目时。
3.按需编译
Vite 只有在浏览器请求模块时才进行编译，避免了不必要的编译工作，减少了开发时的等待时间。
支持多种框架
Vite 不仅支持 Vue，还支持 React、Svelte 等多种前端框架，具有很好的通用性。

2. 安装与使用

2.1 使用 npm安装vite

npm install vite -g

2.2 使用vite构建vue3

执行命令

npm create vite

输入项目名字

选择框架-vue

选择js标准-JavaScript
进入项目目录,安装默认依赖及vue-router,axios

cd topnews
npm i
npm i vue-router
npm i axios

3. 项目初始化

3.1 删除默认生成的代码

11.png

修改App.vue

<template>
</template>
<script setup>
</script>
<style scoped>
</style>

修改style.css

html,body,div,span,h1,h2,h3,h4,h5,h6,ul,ol,li,p {
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}
html,body,#app {
    /*必须要设置，这样总容器高度才能100%*/
    width: 100%;
    height: 100%;
}
ul,ol {
    list-style: none;
}
a {
    text-decoration: none;
}

3.2 创建路由文件,及修改main.js使用路由

router/index.js

import {createRouter,createWebHashHistory} from 'vue-router'


const routes = [

]

//创建路由实例
const router = createRouter({
    history: createWebHashHistory(),
    routes
  });
  
export default router;

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

3.3 配置代理服务器,解决Ajax请求跨域访问问题

修改vite.config.js,增加代理服务器配置

server: {
    proxy: {
      '/juheNews': {
        target: 'http://v.juhe.cn/toutiao/index', //聚合数据
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  }

3.4 修改index.html

 <link rel="shortcut icon" href="//sf3-cdn-tos.douyinstatic.com/obj/eden-cn/uhbfnupkbps/toutiao_favicon.ico" type="image/x-icon">
 <title>头条新闻</title>

4. 组件开发

4.1 NewsList.vue--新闻列表通用组件

<template>
      <ul>
        <li
          v-for="item in data"
          @click="toNews(item.url)"
          :key="item.uniquekey"
        >
          <div class="img-box">
            <img :src="item.thumbnail_pic_s" />
          </div>
          <div class="text-box">
            <h3>{{ item.title }}</h3>
            <p>{{ item.author_name }} {{ item.date }}</p>
          </div>
        </li>
      </ul>
  </template>
  
  <script setup>
  import { reactive, computed } from "vue";
  
  const myProps = defineProps(['data']);
  
  const toNews = (url) => {
    location.href = url;
  }
  </script>
  
  <style scoped>
  ul {
    width: 100%;
  }
  ul li {
    box-sizing: border-box;
    padding: 6px;
    width: 100%;
    height: 93px;
  
    display: flex;
    border-bottom: dashed 1px #aaa;
  
    user-select: none;
    cursor: pointer;
  }
  ul li .img-box {
    flex: 0 0 100px;
    height: 80px;
  }
  ul li .img-box img {
    width: 100px;
    height: 80px;
  }
  ul li .text-box {
    flex: 1;
    box-sizing: border-box;
    padding-left: 10px;
  }
  ul li .text-box h3 {
    font-size: 16px;
    font-weight: 300;
  }
  ul li .text-box p {
    font-size: 14px;
    text-align: right;
  }
  </style>

4.2 HotNews.vue--热点新闻视图组件

<template>
  <h1>热点新闻</h1>
  <NewsList :data="newsList"></NewsList>
</template>
  
<script setup>
import { ref } from "vue";
import NewsList from "../components/NewsList.vue";
import axios from "axios";

const newsList = ref([]);

axios
  .get("/juheNews?type=top&key=655962c80fdaccf03709b567da3bc795")
  .then((response) => {
    newsList.value = response.data.result.data;
  })
  
</script>

<style scoped>
  h1 {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color:  #e03d3e;
  letter-spacing: 2px;
  }
</style>

4.3 TypeNews.vue--分类新闻视图组件

<template>   
  <ul>
    <li
      v-for="item in typeList"
      :key="item.id"
      :class="{ typeinit: isAlive == item.id }"
      @click="change(item.id)"
    >
      {{ item.name }}
    </li>
  </ul>
  <NewsList :data="newsList"></NewsList>
</template>
  
<script setup>
import { ref } from "vue";
import NewsList from "../components/NewsList.vue";
import axios from "axios";

const typeList = [
  { id: "guonei", name: "国内" },
  { id: "guoji", name: "国际" },
  { id: "yule", name: "娱乐" },
  { id: "tiyu", name: "体育" },
  { id: "junshi", name: "军事" },
  { id: "keji", name: "科技" },
  { id: "caijing", name: "财经" },
  { id: "youxi", name: "游戏" },
  { id: "qiche", name: "汽车" },
  { id: "jiankang", name: "健康" },
];

const isAlive = ref("guonei");

const newsList = ref([]);


const getNews = (type) => {
  axios
    .get("/juheNews", {
      params: {
        type: type,
        key: "655962c80fdaccf03709b567da3bc795",
      },
    })
    .then((response) => {
      newsList.value = response.data.result.data;
    })
    
}

getNews("guonei");

const change = (id) => {
  isAlive.value = id;
  getNews(id);
}
</script>
  
<style scoped>

  ul {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
  ul li {
  box-sizing: border-box;
  width: 48px;
  height: 22px;
  border: solid 1px #e03d3e;
  border-radius: 11px;
  margin: 5px 10px;

  font-size: 14px;
  color: #e03d3e;

  display: flex;
  justify-content: center;
  align-items: center;
}

.typeinit {
  background-color: #e03d3e;
  color: #fff !important; /*!important：将优先级提升最高*/
}
</style>

头条新闻