Vue / Vue.js

https://vuejs.org/

这个项目使用到了Vue（Vue 2）：https://github.com/GZhonghui/djwcb
使用Vue 3重写的版本：https://github.com/GZhonghui/djwcb/tree/master/vue-project-2025
模仿2ch的前端：https://github.com/GZhonghui/2ch-web
前端学习记录：https://github.com/GZhonghui/Web101

先复习一下JavaScript和Node.js吧，一个 vue 项目本质上就是一个 node 项目

Vue 2 has reached End of Life on December 31st, 2023.

我们主要讨论 Vue 3，尽可能不使用Vue 2

以下语境中，Vue 都指代 Vue 3

1. Vue：框架本身
2. Vite：构建、调试工具（创建Vue 3项目应该都是默认自带的）
3. Vue Router：路由管理（页面管理）（可选）
4. Pinia：状态管理（可选）

入口（创建一个项目，可以从这些文件开始）

1. ./index.html
2. ./src/main.ts
3. ./src/App.vue

# 注意先调整 node 版本
nvm use 22

# 创建一个 Vue 工程
npm create vue@latest
# 说实话我觉得这种创建命令真的反人类
# 实际上它做了什么呢？
# AI：
# 当你运行npm create vue@latest时：
# npm将其转换为npm exec create-vue@latest
# 这会安装并执行create-vue包（这玩意是一个包）
# 该工具会提示你选择项目配置（TypeScript、路由、状态管理等）
# 根据你的选择，它会生成一个预配置的Vue项目

# 最后我建议创建的时候什么都别选，后面需要什么再安装
# 否则生成项目就是一堆没用的内容
# 最基础的文件是：index.html & src/main.js & src/App.vue

1. 常用UI组件
2. Vite
3. VueRouter
4. 在Vue中使用TypeScript
5. API风格
6. Pinia

提供直接可用、风格统一的UI组件
祖传代码：

1. https://github.com/GZhonghui/db-player
2. https://github.com/GZhonghui/djwcb/tree/master/vue-project-2025

比如：

1. Element Plus
2. Naive UI https://www.naiveui.com/en-US/os-theme
3. Ant Design Vue

# 一般都是用 npm 安装即可
npm install naive-ui

# 直接引入（按需引入，推荐）
<template>
  <n-button>naive-ui</n-button>
</template>
 
<script setup>
  import { NButton } from 'naive-ui'
</script>
 
# 全局引入
import naive from 'naive-ui'
import { createApp } from 'vue'
 
const app = createApp(App)
app.use(naive)

npm install -g @vue/cli # 安装 -g是全局的意思

vue create my-project # 创建工程

cd my-project
npm run serve # 在本地开启服务器
npm run build # 构建

# 在某一个已有的工程内
vue-project % npm install # 安装本项目需要的“插件”（一个新clone的项目，构建之前可能需要执行这句命令）

Vue也有自己的Package Manager（Vue有一些“插件”之类的需要管理，应该是需要一个「包管理器」的，这个「包管理器」和npm是什么关系？）

# 项目文件夹下面的：vue.config.js
 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: '../docs/', # build 的输出目录
 
  # 这个路径很重要
  # 如果网站域名是：djw.line.pm 这个值可以填'./'
  # 如果网站域名是：gzher.com/djwcb 这个值可以填'/djwcb/'
  publicPath: '/djwcb/'
})

# 可以帮我们快速启动一个简单的 Web 服务器
npm i serve -g