Vite App

--- theme: healer-readable highlight: a11y-dark --- # 前言 > 最近豆包Marscode火出了圈，且因听说其功能及其强大，我抱着极大的兴趣体验了这款产品，借助豆包Marscode的IDE和编程助手搭建了一个自己的实时天气小demo，且正在参加[豆包Marscode初体验征文活动](https://juejin.cn/post/7384997062416252939?utm_source=juejin&utm_medium=push&utm_campaign=tiyanguan)。 # 简单介绍 ***豆包Marscode*** *豆包Marscode*其实主要分为两个东西，一个是编程助手，另一个是集成了多种开发环境的IDE。 ## 编程助手就是一个可以在vscode或其他IDE上使用的轻量级插件，安装既可用，十分方便。 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3ba509045bfa489c9ba2c8b9206cac48~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeHlhbw==:q75.awebp?rk3s=f64ab15b&x-expires=1748033948&x-signature=vOKjFPzX8lgjB%2BECNIcLT1Pd3GM%3D) 不仅仅是简单的回答问题，还能解释、注释代码和生成单测！ ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1e8f083bf8a747fea45f78154fd9c21e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeHlhbw==:q75.awebp?rk3s=f64ab15b&x-expires=1748033948&x-signature=6eupuArHI3parA7kvYMYBhSJQ9g%3D) ## 在线IDE ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/026ff7f2e3104e3f9b3d567ff5feae89~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeHlhbw==:q75.awebp?rk3s=f64ab15b&x-expires=1748033948&x-signature=fcqMrzmsyBqi6Jql%2Bgk7v3lW%2FB8%3D) ***豆包MarsCode*** IDE 是一个在线编译器，内部集成了各种环境，可以直接生成模板，这就意味着只要有网络，不管是什么设备都能coding，十分的便捷！ # 环境创建与配置因为我们要开发的是一个VUE项目，所以直接用***豆包MarsCode*** IDE 创建一个VUE项目 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/86fb50d668cb4e079ed9aa2994ce89d9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeHlhbw==:q75.awebp?rk3s=f64ab15b&x-expires=1748033948&x-signature=EgvvVhf2%2F7pVBj%2BQiz98i9a9%2Fnc%3D) 进入生成的项目模板后,在命令行输入 `npm create vue@latest` 开始初始化项目 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/953f164518e24eccaad99e2adbdc88df~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeHlhbw==:q75.awebp?rk3s=f64ab15b&x-expires=1748033948&x-signature=GlW77bV7RSM3Hea3QzK1q1kcpp4%3D) 再安装依赖 ` npm i` 项目初始化后把豆包模板自带的文件删了 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b14f5e1258ee4b7c9972db644b9dd1ed~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeHlhbw==:q75.awebp?rk3s=f64ab15b&x-expires=1748033948&x-signature=HzFeNSgAKMaAjnMBgxjjmNY12Nw%3D) 配置 `main.js` ```js // 引入 import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 然后再去配置路由 `index.js` ```js import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path:'/', component: () => import('@/views/index.vue') } ] }) export default router ``` 然后在vies目录下创建一个`index.vue`这将会是这个小demo的主要视图点击右侧即可唤起***豆包MarsCode***编程助手 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3e4934a1c2ae471b978bed083d9efc29~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeHlhbw==:q75.awebp?rk3s=f64ab15b&x-expires=1748033948&x-signature=sVJbsaWuYilZn%2B7n8FypJrKTO%2F8%3D) 模板什么的直接用编程助手生成即可😎 再在命令行输入`npm run dev` ，如过在右侧出现了 `Webview` 显示无误，则说明环境配置好了。 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/89c81009eef64408a2daf945ed59c808~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeHlhbw==:q75.awebp?rk3s=f64ab15b&x-expires=1748033948&x-signature=KFmvVNwyKJEIcWZbkFhZtsegjiI%3D) 然后再将原来的所有css样式消除，在assets文件夹下新建一个reset.css文件，并粘贴这段，这样原本的一些样式就被消除了。 ```css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } ``` 紧接着，项目正式开始了。 # 项目搭建首先分析一下，我们要搭建的是一个实时天气的网站，不仅仅是要用文本数据去展示天气数据，还要用一些图像例如折线图去展示一下气温变化，这个项目中我们使用的是`Apache ECharts`，更深入的使用可以参考[快速上手 - 使用手册 - Apache ECharts](https://echarts.apache.org/handbook/zh/get-started/)。而且我们需要的数据得通过调用一些平台接口去获取，这里我们以高德平台为例，介于该平台的api文档写得简洁。如果想要深入学习可以参考 [概述-Web服务 API | 高德地图API (amap.com)](https://lbs.amap.com/api/webservice/summary) #### 安装Echarts 首先通过 npm 安装Echarts： ```bash npm install echarts ``` #### 在 `index.vue` 中引入 ```js import * as echarts from 'echarts'; ``` #### 引入高德API 首先得去官网获取API的`KEY`和 `安全密钥`。[创建应用和 Key-Web服务 API | 高德地图API (amap.com)](https://lbs.amap.com/api/webservice/create-project-and-key)，可以查看详细教程。然后在 `index.html`中 ```html Vite App

``` 把自己申请的API的`key` 和`securityJsCode` 填进去 #### 安装Vant 首先，通过npm安装Vant： ```bash npm install vant npm install @vant/area-data ``` #### 引入和使用Vant组件在项目的入口文件 `src/main.js` 中引入Vant组件和样式： `main.js` ```js // 引入 import { createApp } from 'vue' import App from './App.vue' import router from './router' import '@/assets/reset.css' import { Button } from 'vant'; import 'vant/lib/index.css'; // 通用的样式 import { Area,ActionSheet } from 'vant'; const app = createApp(App) app.use(router) app.use(Area); app.use(ActionSheet); app.mount('#app') ``` 在这里，`van-action-sheet` 组件用于显示一个底部弹出的选择框，`van-area` 组件用于选择城市。 #### 基础模板首先，我们来看 `index.vue` 中的HTML模板部分。这部分主要定义了页面的布局和展示结构。 ```vue ``` 首先我们的布局是上、中、下布局。最上面是一个**导航栏 (`nav`)** : - 显示当前时间 (`{{ now }}`)。 - 提供一个按钮用于切换城市。中间是**城市信息 (`city-info`)** : - 显示当前城市名 (`{{ state.city }}`)。 - 显示当前天气 (`{{ state.today.weather }}`)。 - 显示当前温度 (`{{ state.today.temperature }}`)。 - 显示风力、风向和空气湿度等详细信息。然后是一个**未来天气 (`future`)** : - 显示未来几天的天气预报。 - 使用 `v-if` 指令在 `state.future` 有数据时显示此部分。 - 包含未来几天天气的详细信息。 - 显示一个用于展示折线图的容器 (`.echarts-wrap`)。在导航栏上右侧有一个切换城市的按钮，点击会展开**选择城市的操作表 (`van-action-sheet`)** 使用 Vant 的 `ActionSheet` 组件来实现选择城市的功能。其中 `van-area` 组件用于选择地区。 #### js部分 ###### 首先是初始化和状态管理 ```js ``` 这便是成果! ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6370427aac3142ee9b814fb091cebf10~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeHlhbw==:q75.awebp?rk3s=f64ab15b&x-expires=1748033948&x-signature=%2B8Ke6Zc9Lb6CvcBUW2PgE2riibI%3D) # 总结通过豆包Marscode IDE 和豆包Marscode 编程助手，我们完成了一个可以实时查看天气的小项目。通过完成这个项目，我发现了一些关于豆包的小缺陷。在IDE中创建的VUE模板默认为TS的，这对于不熟悉TS的创建环境会有点麻烦，而且在AI编程助手中，会出现联系不了上下文的问题，而且每天代码补全是有限定额度的。但是作为刚一款发布的豆包Marscode 产品，还是有很大的潜力的，其IDE 提供了方便的编程环境，编程助手也比较可靠。愿我们以后能使用上更好用国产的AI！

{{ state.today.temperature }}℃