前端页面学习+vue [推广有奖]

0关注
0粉丝

等待验证会员

学前班

40%

还不是VIP/贵宾

-

0%

威望: 0 级
论坛币: 0 个
通用积分: 0
学术水平: 0 点
热心指数: 0 点
信用等级: 0 点
经验: 20 点
帖子: 1
精华: 0
在线时间: 0 小时
注册时间: 2018-7-31
最后登录: 2018-7-31

楼主

瓦尔基丽 发表于 2025-11-22 07:02:12 |AI写论文

是否 +2 论坛币

k人参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

创建Vue项目

首先通过以下命令初始化Vue项目：

# 创建项目（指定名称）
npm create vue@latest my-vue-app

进入项目所在目录：

# 进入项目文件夹
cd my-vue-app

安装项目所需依赖包：

# 安装依赖项
npm install

最后启动本地开发服务器：

# 运行开发环境
npm run dev

构建HTML页面结构

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>荆州市长江河道管理局</title>

</head>

<body>
    <!--vue应用挂点-->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>

</body>

</html>

通过JavaScript引入Vue并挂载到DOM元素

在HTML中使用脚本引入Vue框架，并将应用实例挂载到指定的HTML元素上，完成基础绑定。

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount("#app")

编写Vue组件代码

以下是一个基础的Vue组件实现示例：

<script>
export default {
  name: 'App' // 确保该组件可被正确识别与渲染
}
</script>

<!--vue_main-->

<template>
  <div id="app">
    <div class="header-container">
      <!-- 上半部分背景 -->
      <header class="header-bg"></header>
      
      <!-- 中上区域内容 -->
      <div class="center-upper">
        <img src="./assets/logo.png" class="header-logo">
        <h1 class="title-up">荆州市河道管理局</h1>
        <h2 class="english-up">www.jzen.org.cn</h2>
        
        <!-- 搜索功能区域 -->
        <div class="search-container">
          <input type="text" class="search-input" placeholder="">
          <button class="search-btn">搜索</button>
        </div>
      </div>

      <!-- 导航图标切换区 -->
      <div class="switch-color">
        <div class="icon-item">
          <div class="icon-img icon1"></div>
          <div class="icon-text">首页</div>
        </div>
        <div class="icon-item">
          <div class="icon-img icon2"></div>
          <div class="icon-text">政府信息公开</div>
        </div>
        <div class="icon-item">
          <div class="icon-img icon3"></div>
          <div class="icon-text">媒体聚焦</div>
        </div>
        <div class="icon-item">
          <div class="icon-img icon4"></div>
          <div class="icon-text">魅力河道</div>
        </div>
      </div>

      <div class="last-decorate"></div>

      <!-- 中下标题区域 -->
      <div class="center-downward">
        <div class="big-title">奋楫实干启新程 笃行致远筹新绩</div>
      </div>

      <!-- 红色头条条带 -->
      <div class="red-header-strip">头 条</div>
    </div>

    <div class="downward">
      <!-- 左侧内容区块 -->
      <div class="downward-left">
        <img src="./assets/new-image.jpg">
      </div>

      <!-- 右侧内容容器 -->
      <div class="right-co">
      </div>
    </div>
  </div>
</template>

河道要闻

交流促提升调研助发展

2025-01-08

1月20日下午，荆州市长江河道管理局副局长甲维强前往沙市区周梁玉桥社区，开展“迎新春送温暖”走访慰问活动。此次活动旨在切实帮助社区内的困难居民，确保他们能够度过一个温馨、祥和的春节。通过实地调研与面对面交流，进一步了解群众实际需求，推动帮扶工作落到实处，助力基层民生改善与社区发展。