【无标题】

m0_53487505

于 2025-03-18 10:38:43 发布

阅读量840

点赞数 21

文章标签： arcgis

本文链接：https://blog.youkuaiyun.com/m0_53487505/article/details/146334873

版权

起凡Code闲聊

插件安装

~~在 vscode 插件市场中搜索Vue Volar extension Pack~~

Vue 官方语言工具 2.0 这个版本将 VS Code 插件名称从 Volar Language Features (Volar)改为了 Vue - Official，同时 TypeScript Vue Plugin 扩展也被弃用了。

~~目前bug好多，并不好用~~

依赖安装

# 运行时依赖
npm i vue
# vue语法转html+js+css
npm i @vitejs/plugin-vue -D

npm i：
npm 是 Node.js 的包管理工具，i 是 install 的简写，表示安装操作。
vue：
这是你要安装的包名。执行命令后，npm 会从注册中心（通常是 npm registry）拉取最新稳定版本的 Vue 进行安装。
运行时依赖：
安装后的 Vue 是应用运行时需要加载的依赖，也就是说当你的应用在浏览器中运行时，Vue 提供了所有核心功能（如组件系统、模板解析、响应式数据等）。

文件目录

项目整体架构

这个项目基于 Vue 框架和 Vite 构建工具，利用 Vite 的 Vue 插件来解析和编译 Vue 单文件组件（.vue 文件）。项目主要分为以下几部分：

项目配置与依赖管理：由 package.json 和 package-lock.json 管理项目依赖和脚本命令。
构建工具配置：vite.config.js 配置了 Vite，并引入了 Vue 插件，以便支持 .vue 文件的编译。
入口 HTML 页面：index.html 是项目的主页面，它加载了其他 JavaScript 文件，并包含了用于显示 Vue 应用和其他动态内容的 DOM 节点。
辅助功能与应用入口：index.js 提供了一些辅助功能（如显示当前时间），而 main.js 则是 Vue 应用的入口文件，负责创建并挂载整个 Vue 应用。
Vue 应用组件：App.vue是 Vue 的根组件，定义了应用的主要视图和逻辑。

新建 vite.config.js。引用vue编译插件，使得我们写的.vue文件经过编译后可以被浏览器识别。

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins:[vue()]
})

代码

vue作为一个单页面应用，我们会将vue的入口组件（App.vue）挂载到html元素下。
因此首先，我们先在index.html中创建一个唯一的元素用于挂载vue的入口组件。

index.html

<!--忽略...-->
<!--引用main.js中返回的vue入口组件-->
<script src="/src/main.js" type="module"></script>

<!--忽略...-->
<body>
<!--用于挂载vue入口组件-->
    <div id="app"></div>
</body>
<!--忽略...-->

页面中包含两个主要的 <script> 标签：
- 第一个 <script>：
  - 使用 ES 模块方式导入了 index.js 中导出的 showCurrentTime 函数，并通过定时器每秒更新页面上显示当前时间的 <span class="time"> 元素。
- 第二个 <script>：
  - 导入了 main.js（位于 /src/main.js），这是 Vue 应用的入口文件。
页面内还包含一个具有 id="app" 的 <div>，这是 Vue 应用挂载的容器。

下面我在App.vue中编写了一个简单的计数器用于验证vue的功能。

src/App.vue

<template>
    <div>
        <div >当前计数器：{{ counter }}</div>
        <button @click="()=>counter++">点击增加</button> 
        <button @click="()=>counter--">点击减少</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const counter=ref(0)

</script>

<style scoped>

</style>

在main.js我们指定了入口组件返回了一个vue单页面应用实例。并将该组件挂载到index.html的#app元素上。

src/main.js

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

这是 Vue 应用的入口文件。
使用 createApp 方法从 Vue 库创建应用，并导入根组件 App.vue。
最后调用 app.mount('#app')，将 Vue 应用挂载到 index.html 中 id="app" 的元素上。

npm run dev

图6 效果图