Vue3实现一个文档学习网站

Vue3实现一个文档学习网站

项目介绍

本项目主要使用vite+vue3.2+Element Plus框架，是一个较为简单的前端小项目。本项目暂时只有展示功能，没有导出功能，纯粹是为了巩固vue3知识点和组合式API，适合刚入门的小伙伴练手

功能实现

1.使用了vue-axios来请求本地md文件

2.element plus来构建页面框架布局

3.使用marked插件将本地md文件转html，利用vue的v-html指令输出

4.在选项式API的基础上使用组合式API进行重构

5.附带请求聚合数据天气预报接口的weather.vue以及解决跨域请求配置相关参数等，使用前需要更换key

Weather.vue

<template>
    <el-container class="container">
        <el-header>
            <el-input placeholder="请输入" class="input" v-model="city">
                <template #prepend>城市名：</template>
            </el-input>
        </el-header>
        <el-main class="main">
            <div class="today">
                今天：
                <span>{
  
  {todayData.weather ?? plc}} {
  
  {todayData.temperature ?? plc}}</span>
                <span style="margin-left:20px">{
  
  {todayData.direct ?? plc}}</span>
                <span style="margin-left:100px">{
  
  {todayData.date}}</span>
            </div>
            <div class="real">
                <span class="temp">{
  
  {realtime.temperature ?? plc}}°</span>
                <span class="realInfo">{
  
  {realtime.info ?? plc}}</span>
                <span class="realInfo" style="margin-left:20px">{
  
  {realtime.direct ?? plc}}</span>
                <span class="realInfo" style="margin-left:20px">{
  
  {realtime.power ?? plc}}</span>
            </div>
            <div class="real">
                <span class="realInfo">空气质量：{
  
  {realtime.aqi ?? plc}}°</span>
                <span class="realInfo" style="margin-left:20px">湿度：{
  
  {realtime.humidity ?? plc}}</span>
            </div>
            <div class="future">
                <div class="header">5日天气预报</div>
                <el-table :data="futureData" style="margin-top:30px">
                    <el-table-column prop="date" label="日期"></el-table-column>
                    <el-table-column prop="temperature" label="温度"></el-table-column>
                    <el-table-column prop="weather" label="天气"></el-table-column>
                    <el-table-column prop="direct" label="风向"></el-table-column>
                </el-table>
            </div>
        </el-main>
    </el-container>
</template>

<script>
export default {
    mounted () {
        this.axios.defaults.baseURL = '/myApi'
        this.requestData()
    },
    data() {
        return {
            city:"上海",
            weatherData:{},
            todayData:{},
            plc:"暂无数据",
            realtime:{},
            futureData:[]
        }
    },
    watch: {
        city() {
            this.requestData()
        }
    },
    methods: {
        requestData() {
            let city = encodeURI(this.city)
            //请将这里的key换成自己申请的key，需要身份认证    注册地址：http://apis.juhe.cn/
            let api = `/simpleWeather/query?city=${city}&key=f9e73e164c1b8fa00b3146240564b8c6`
            this.axios.get(api).then((response)=>{
                this.weatherData = response.data
                this.todayData = this.weatherData.result.future[0]
                this.realtime = this.weatherData.result.realtime
                this.futureData = this.weatherData.result.future
                console.log(response.data)
            })
        }
    }
}
</script>

<style scoped>

.container {
    background: linear-gradient(rgb(13, 104, 188),