vue3

无标签
发布日期:   2024-10-03

如果你在国内或者网络环境不稳定的情况下，npm install 的下载速度比较慢，可以通过以下几种方式加速 npm 依赖包的下载：

1. 使用淘宝镜像加速 (cnpm)

淘宝提供了一个 npm 的国内镜像，可以大幅提高依赖包的下载速度。你可以通过以下步骤安装并使用淘宝镜像：

1.1 安装 cnpm（国内 npm 镜像）

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

1.2 使用 cnpm 代替 npm

安装完 cnpm 之后，所有 npm 的命令都可以用 cnpm 替代，例如：

1
cnpm install

这样依赖会从国内的镜像源下载，速度会快很多。

2. 直接更改 npm 的下载源

如果你不想每次都使用 cnpm，可以直接设置 npm 的全局镜像源，指向淘宝的镜像：

1
npm config set registry https://registry.npmmirror.com

然后执行 npm install：

1
npm install

这个设置会将你的 npm 默认的下载源指向淘宝的镜像源，之后 npm install 的速度会变快。

你可以验证是否更改成功：

1
npm config get registry

正常情况下，输出的 URL 应该是 https://registry.npmmirror.com。

3. 使用 Yarn

Yarn 是 Facebook 开发的包管理器，相比于 npm，它在依赖管理上有一些优势，包括缓存机制和并发下载处理，通常也会更快一些。你可以尝试使用 Yarn 替代 npm 来安装依赖：

3.1 安装 Yarn

1
npm install -g yarn

3.2 使用 Yarn 安装依赖

1
yarn install

Yarn 也支持国内镜像，可以通过以下命令将镜像源设置为淘宝源：

1
yarn config set registry https://registry.npmmirror.com

然后使用 Yarn 安装依赖，速度会有明显提升。

4. 使用 --verbose 查看进程

如果下载依赖的过程依然非常缓慢，可以使用 --verbose 参数来查看详细的日志，确定是否有某些特定的包下载速度特别慢：

1
npm install --verbose

通过这个命令可以查看每个依赖的下载情况，找到可能导致下载缓慢的特定依赖。

总结

如果你在国内网络环境下，使用淘宝的 npm 镜像是最有效的加速方式。可以通过以下两种方式进行加速：

  1. 使用 cnpm 代替 npm。
  2. 更改 npm 的镜像源为淘宝的源。

这些方法应该可以有效提高依赖下载速度。如果还有其他问题，随时告诉我！

根据你提供的图片，安全组已经正确配置了允许所有 IPv4 地址（0.0.0.0/0）访问 5173 端口，这意味着云服务器的防火墙设置是正确的。接下来确保 Vite 服务器可以通过公网 IP 访问。

问题原因

从 Vite 输出的信息看，服务器目前只监听了内部 IP 地址 (172.30.65.98 和 172.17.0.1)，这意味着 Vite 没有监听公网 IP。因此，外部的设备无法通过你的公网 IP（121.199.51.55）访问。

解决方案

你需要让 Vite 监听所有网络接口，包括公网 IP。按照以下步骤操作：

1. 启动 Vite 并监听所有接口

运行以下命令，确保 Vite 服务器监听所有网络接口（包括公网）：

1
npm run dev -- --host 0.0.0.0

使用 --host 0.0.0.0 会使 Vite 服务器监听所有网络接口，包括内网和公网。

2. 访问应用

在你本地的浏览器中，使用服务器的公网 IP 访问 Vite：

1
http://121.199.51.55:5173

3. 防火墙检查

如果依然无法访问，请确保云服务器上没有其他本地防火墙阻止 5173 端口。如果使用了 firewalld 或 iptables，可以检查防火墙状态：

查看 firewalld 状态：

1
sudo firewall-cmd --list-all

确保 5173/tcp 端口已经开放。如果没有开放，使用以下命令开放该端口：

1
2
sudo firewall-cmd --permanent --add-port=5173/tcp
sudo firewall-cmd --reload

停止 firewalld（如果测试时想排除防火墙影响）：

1
sudo systemctl stop firewalld

完成这些步骤后，你应该可以通过公网 IP 访问你的 Vite 应用。如果还有其他问题，请告知具体反馈，我会进一步协助。

好的！我们可以从零开始，逐步构建一个简单的 Vue 3 项目。整个过程会包括项目的初始化、基本组件的创建，以及如何使用 Vue 3 的组合式 API（Composition API）。我们将构建一个简单的待办事项（To-Do List）应用作为示例。

第一步：安装 Vue CLI 或使用 Vite

Vue 提供两种常用的项目初始化方式：

  1. 使用 Vue CLI：传统的方式，适合需要更多配置选项的项目。
  2. 使用 Vite：Vue 3 推荐的现代工具，速度更快，适合大多数开发需求。

我们这里使用 Vite，因为它更快、更轻量。

1.1 安装 Vite

首先，确保你已经安装了 Node.js，然后使用以下命令来安装 Vite：

1
npm create vite@latest

Vite 会提示你选择项目名称和模板。

  1. 项目名称：比如输入 todo-vue3。
  2. 模板选择：选择 vue 或 vue-ts（如果你想使用 TypeScript），我们这里选择 vue。
1
2
cd todo-vue3
npm install

完成后，启动开发服务器：

1
npm run dev

打开浏览器，访问 http://localhost:5173 以查看项目是否正常运行。

第二步：项目结构简介

在 Vite 初始化的项目中，主要关注以下几个文件和文件夹：

  • src/：项目的源代码都在这个目录下。
  • src/main.js：项目的入口文件。
  • src/App.vue：Vue 应用的根组件。
  • src/components/：放置子组件的目录。

第三步：清理默认项目

  1. 打开 src/App.vue，清理默认的内容，并添加一个简单的模板。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div id="app">
    <h1>My To-Do List</h1>
    <ToDoList />
  </div>
</template>

<script setup>
// 引入待会儿创建的 ToDoList 组件
import ToDoList from './components/ToDoList.vue'
</script>

<style>
/* 添加一些简单的样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 40px;
}
</style>

第四步：创建 ToDoList 组件

  1. 在 src/components/ 目录下新建文件 ToDoList.vue。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new task" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.done" />
        <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
          {{ todo.text }}
        </span>
        <button @click="removeTodo(index)">X</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
// 使用组合式 API 管理组件的状态
import { ref } from 'vue'

// 定义 todos 列表和 newTodo
const todos = ref([
  { text: 'Learn Vue 3', done: false },
  { text: 'Build a ToDo App', done: false },
])

const newTodo = ref('')

// 添加任务
const addTodo = () => {
  if (newTodo.value.trim() !== '') {
    todos.value.push({ text: newTodo.value, done: false })
    newTodo.value = ''
  }
}

// 删除任务
const removeTodo = (index) => {
  todos.value.splice(index, 1)
}
</script>

<style scoped>
/* 简单样式 */
input {
  padding: 10px;
  margin-bottom: 10px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
button {
  margin-left: 10px;
  color: red;
  cursor: pointer;
}
</style>

第五步：运行项目

此时你已经完成了一个简单的待办事项应用。返回终端，确保你的开发服务器正在运行，访问 http://localhost:5173，你应该能看到一个简单的 To-Do List 应用，支持添加任务、删除任务和标记任务为完成。

代码解释：

  1. 组合式 API：我们使用了 ref 来声明响应式的状态，如 todos 列表和 newTodo 字符串。Vue 3 的 ref 能使 JavaScript 中的普通变量响应式。

  2. 事件处理：我们使用了 @keyup.enter="addTodo" 来监听 Enter 键，同时使用 @click="removeTodo(index)" 来删除任务。

  3. 双向绑定：通过 v-model 实现 input 的双向数据绑定。

  4. 样式：我们简单地应用了一些基本的样式，让 UI 更加友好。

第六步：进一步增强

你可以继续扩展这个应用，添加更多功能，例如：

  • 编辑任务。
  • 使用 localStorage 来保存数据。
  • 过滤已完成和未完成的任务。

如果你有进一步的问题，或者想更深入了解 Vue 3 的某些特性，可以随时问我！

http://121.199.51.55:5173/

文章作者: 花粱
文章链接: https://wplfge3.github.io/2024/10/03/vue3/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 花粱 !
无标签
赏
  目录