【Vue】从0开始使用Vue构建界面

安装必要工具
首先需要安装Node.js（包含npm包管理器），Vue的开发依赖它。
访问 Node.js官网，下载并安装 LTS版本（推荐新手使用）
安装完成后，打开终端（Windows用户可以用 cmd 或 PowerShell），输入以下命令验证安装成功：

如果能显示版本号（如 v18.18.0 和 9.8.1），说明安装成功。
安装Vue CLI（脚手架工具）
Vue CLI能帮我们快速创建标准化的Vue项目。在终端输入

npm install -g @vue/cli

注意：如果安装失败，用管理员权限运行命令

创建Vue项目
打开终端，导航到你想存放项目的文件夹
输入以下命令创建项目（当前目录会作为项目根目录）：

vue create .

此时会出现选项，按键盘上下键选择 Default ([Vue 3] babel, eslint)，然后按回车确认

这是新手最友好的默认配置，包含Vue 3、Babel（代码转换工具）和ESLint（代码检查工具）

这个错误是因为 Vue CLI 对项目名称有严格的规范，而当前目录名 flaskProject 不符合要求。

使用一个合法的、全小写的名称创建Vue项目：

复制代码

vue create flask-project  # 注意名称改为全小写，用短横线连接

这会在当前目录创建一个全新的 flask-project 文件夹，并在里面初始化 Vue 项目。

这个错误是由于之前使用 sudo 全局安装时，在当前用户的 npm 缓存目录 (~/.npm) 中留下了属于 root 用户的文件，现在普通用户没有权限修改它们。

启动开发服务器
项目创建完成后，在终端输入：

npm run serve

等待编译完成后，终端会显示 App running at:，其中有一个本地地址（通常是 http://localhost:8080/）。打开浏览器访问这个地址，你会看到Vue的默认欢迎页面，说明项目已成功运行！

项目结构简介（重点关注这几个文件）

打开项目文件夹，主要工作目录是 src/：

src/App.vue：根组件，所有界面内容都会在这里组合

src/components/：存放可复用的组件（例如按钮、卡片等）

src/main.js：项目入口文件，负责挂载Vue应用
开始修改界面（第一个小目标）

我们来修改 src/App.vue，把默认内容换成自己的界面：

用编辑器打开 src/App.vue（推荐用 VS Code，安装 Vue 插件如 "Volar" 更方便）

删除 <template> 标签内的默认内容，替换成：

bash 复制代码

<template>
  <div class="app">
    <h1>我的第一个Vue界面</h1>
    <p>当前时间: {{ currentTime }}</p>
  </div>
</template>

在 <script> 标签内添加数据和逻辑

bash 复制代码

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleString() // 获取当前时间
    }
  },
  mounted() {
    // 每秒更新时间
    setInterval(() => {
      this.currentTime = new Date().toLocaleString()
    }, 1000)
  }
}
</script>

在 <style> 标签内添加样式：

bash 复制代码

<style>
.app {
  text-align: center;
  margin-top: 50px;
  font-family: Arial, sans-serif;
}
h1 {
  color: #42b983; /* Vue的标志性绿色 */
}
</style>

保存文件后，浏览器会自动刷新，你会看到一个显示当前时间并每秒更新的简单界面！

下一步学习方向

组件基础：学习如何拆分界面为多个组件（例如创建 src/components/Header.vue 作为页头）
Vue指令：掌握

v-for（循环）、v-if（条件渲染）、v-bind（属性绑定）、v-on（事件绑定）等核心指令
路由配置：用 vue-router实现多页面切换
状态管理：用 Pinia（Vue 3推荐）管理复杂组件间的数据共享