当前位置：首页 > wzjs >正文

亿唐网不做网站做品牌考试题网站空间购买

wzjs 2025/9/7 21:54:11

亿唐网不做网站做品牌考试题,网站空间购买,网站开发现在主要用什么语言,网站建设的教程1. 软件下载与安装 1. node安装 Vue.js 的开发依赖于 Node.js 环境，因此我们首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许你在服务器端运行 JavaScript 代码，同时也为前端开发提供了强大的工具支…

1. 软件下载与安装

1. node安装

Vue.js 的开发依赖于 Node.js 环境，因此我们首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许你在服务器端运行 JavaScript 代码，同时也为前端开发提供了强大的工具支持。

官网下载 Node.js，Node.js 中文网地址：下载 | Node.js 中文网。在下载页面中，你可以根据自己的系统版本选择合适的安装包。一般来说，推荐下载最新版本的 Node.js，以确保你能够使用最新的特性和功能。

安装比较简单，可以参考：node安装步骤，完成node安装，下载安装完成后

2. 检查是否安装成功

打开window+r快捷键打开，输入cmd，回车，然后输入node -v命令

安装成功显示node版本

node -v

2. 介绍npm、cnpm、yarn、pnpm

1.npm

npm是 node.js 的模块依赖管理工具

常见场景：

允许用户从 npm 服务器下载别人编写的第三方包到本地使用。
允许用户从 npm 服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用。

2. cnpm

使用 npm 安装包时，需要去 npm 仓库获取，而 npm 仓库在国外，很不稳定，有时获取会失败。淘宝搭建了一个国内npm服务器，会定时拉取国外npm仓库内容，把国外的搬运到国内。

设置使用淘宝镜像

npm install -g cnpm --registry=http://registry.npmmirror.com

检查是否安装成功：cnpm -v 安装成功后，后续用npm还是使用cnpm安装都可以。如下图：cnpm安装成功

3. yarn

官网：yarn - npm

快速：Yarn缓存了它下载的每个包，所以它再也不需要下载同一个包了。它还几乎同时执行所有操作，以最大限度地提高资源利用率。这意味着安装速度更快。
可靠：使用详细但简洁的锁定文件格式和确定性的安装操作算法，Yarn能够保证在一个系统上运行的任何安装在另一个系统上将完全相同。
安全：在执行代码之前，Yarn使用校验和来验证每个安装包的完整性安装

安装yarn

npm install --global yarn

查看版本

yarn --version

yarn 是用 yarn add 代替 npm install
yarn remove 代替 npm uninstall

安装依赖模块yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]
删除依赖模块：yarn remove [package]
更新依赖模块yarn upgrade [package]yarn upgrade [package]@[version]yarn upgrade [package]@[tag]
配置源。yarn默认的源地址：https://registry.yarnpkg.com ，如果下载太慢，可以修改源
查看镜像源：yarn config get registry
绑定镜像源：yarn config set registry https://registry.npmmirror.com
删除镜像源（注意这里是 delete）：yarn config delete registry

4. pnpm

pnpm 由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。被誉为最先进的包管理工具。

安装pnpm

npm install -g pnpm

pnpm add 安装软件包及其依赖的任何软件包。默认情况下，任何新软件包都安装为生产依赖项。

pnpm add sax      # 保存到 dependencies
pnpm add -D sax   # 保存到 devDependencies
pnpm add -O sax   # 保存到 optionalDependencies
pnpm add -g sax   # 安装包到全局
pnpm add sax@next   #从 next 标签下安装
pnpm add sax@3.0.0  #安装指定版本 3.0.0

2. 创建vue3项目

1. 使用 Vue CLI 创建 Vue 3 项目

这里用cnpm作为演示案列，也可以使用yarn、pnpm等管理工具。

1. 安装 Vue CLI

如果你还没有安装 Vue CLI，可以通过 npm（Node Package Manager）来安装。打开终端或命令提示符并运行：

npm install -g @vue/cli

2. 创建项目

vue create my-vue-project

在提示中选择 Vue 3 的配置。Vue CLI 会让你选择一系列预设，你可以选择手动选择特性，然后确保选择了 Vue 3。

3. 进入项目

cd my-vue-project

4. 安装依赖包

cnpm install

5. 运行项目

cnpm run dev

2. 使用Vite创建Vue3项目

1.全局安装Vite

cnpm install -g create-vite

2. 创建项目

cnpm create vite@latest my-vue-project -- --template vue

3.进入项目、安装依赖、运行项目

如使用Vue Cli安装3、4、5步骤一样

3. 通过命令下载cesium

通过命令下载Cesium和Plugin

cnpm install cesium

cnpm install vite-plugin-cesium -D

vite.config.js配置如下：

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

4. 在组件中使用cesium

import * as Cesium from "cesium";

设置容器

<template><div class="cesium" id="cesiumContainer" style="width: 100%;height: 100vh;"></div>
</template>

初始化cesium地图：

const cesiumConfig = {// 主页按钮homeButton: false,// 场景模式选择器sceneModePicker: false,// 全屏按钮fullscreenButton: false,// 是否显示点击要素之后显示的信息infoBox: false,// 要素选中框selectionIndicator: false,// 影像切换baseLayerPicker: false,// 启用了阴影效果shadows: true,// 启用动画shouldAnimate: true,// 是否显示动画控件animation: false,// 是否显示时间线控件timeline: false,// 是否显示地名查找控件geocoder: false,// 是否显示帮助信息控件navigationHelpButton: false,contextOptions: {contextType: 2, // Webgl2:2 ; WebGPU:3},// 版权信息creditContainer: document.createElement('div')}

 viewer = new Cesium.Viewer('cesiumContainer',cesiumConfig)

全部代码：

<template><div class="cesium" id="cesiumContainer" style="width: 100%;height: 100vh;"></div>
</template><script setup>import {onMounted} from "vue";import * as Cesium from "cesium";let viewer;Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MGQ2MGRkYS1lNDAzLTRmNjEtOGQ3ZC0xOGE2NmZhMmRhMDgiLCJpZCI6NjgzNTYsImlhdCI6MTc0NzM2MjY1OH0.flKVgGOtDCPSQc2OaWX0lyW7YblQPwFQyHduDn3_Igo';const cesiumConfig = {// 主页按钮homeButton: false,// 场景模式选择器sceneModePicker: false,// 全屏按钮fullscreenButton: false,// 是否显示点击要素之后显示的信息infoBox: false,// 要素选中框selectionIndicator: false,// 影像切换baseLayerPicker: false,// 启用了阴影效果shadows: true,// 启用动画shouldAnimate: true,// 是否显示动画控件animation: false,// 是否显示时间线控件timeline: false,// 是否显示地名查找控件geocoder: false,// 是否显示帮助信息控件navigationHelpButton: false,contextOptions: {contextType: 2, // Webgl2:2 ; WebGPU:3},// 版权信息creditContainer: document.createElement('div')}const initMap = () => {viewer = new Cesium.Viewer('cesiumContainer',cesiumConfig)}onMounted(() => {initMap();})
</script><style lang="less" scoped></style>

运行项目，效果如下：