教学vue

vue

框架核新目录

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/                   # 静态资源，如图片、字体等
│   │   └── logo.png
│   ├── components/               # 组件
│   │   ├── HelloWorld.vue
│   │   └── ...
│   ├── views/                    # 页面组件
│   │   ├── Home.vue
│   │   ├── About.vue
│   │   └── ...
│   ├── router/                   # 路由配置
│   │   ├── index.js
│   │   └── routes.js
│   ├── store/                    # Vuex状态管理（如果使用）
│   │   ├── index.js
│   │   └── modules/
│   ├── App.vue                   # 根组件
│   ├── main.js                   # 入口文件
│   └── ...
├── .gitignore                    # Git忽略文件配置
├── babel.config.js               # Babel配置文件（如果需要）
├── jest.config.js        # Jest配置文件（如果使用Jest进行测试）
├── package.json                  # 项目和依赖信息
├── README.md                     # 项目说明文件
└── vue.config.js     # Vue CLI配置文件（如果你使用的是Vue CLI）

---

本地下载 + 安装 完整稳定 Vue3 项目（一步到位）

打开你的 cmd / 终端，按顺序执行这 4 行命令：

1. 创建稳定版 Vue3 项目

//my-vue3-app 名字随便改
npm create vue@latest my-vue3-app

2. 进入项目文件夹

cd my-vue3-app

3. 安装所有依赖（本地下载完整包）

npm install

4. 本地运行

npm run dev

---

你现在立刻能做的事

直接在浏览器打开：

http://localhost:5173/

• 注意
  这个窗口不要关！
  这个命令行窗口 必须保持打开
  一但关闭 → 项目就停了
  浏览器就打不开了

---

如果关掉了就重新启动一次

1. 进入你这个 Vue 项目目录
2. 输入启动命令（就这一句）

npm run dev

3. 回车，等几秒就又出现：

Local:   http://localhost:5173/ 

4. 就可以继续用了。

---

记住这两个固定命令（永远通用）

1. 安装依赖（第一次用或删了 node_modules）

//bash
npm install

2. 启动项目（每次关闭后重新打开）

//bash
npm run dev

---

创建时的推荐选择（稳定版）

一路按我这个选，最稳定、最常用、不出错：

✔ Add TypeScript? ... No
✔ Add JSX Support? ... No
✔ Add Vue Router? ... Yes
✔ Add Pinia? ... Yes
✔ Add ESLint? ... Yes

---

Project name: 直接回车

Add TypeScript? → No

Add JSX Support? → No

Add Vue Router? → Yes (路由，页面跳转)

Add Pinia? → Yes (状态管理)

Add Vitest? → No

Add End-to-End Testing? → No

Add ESLint? → Yes

---

✅ Vue 3.5 最新稳定版

✅ Vue Router（页面跳转）

✅ Pinia（全局状态）

✅ ESLint（代码规范）

✅ Vite（极速构建）

✅ 完整可运行项目结构

✅ 纯本地，不依赖网络

---

最重要的 3 个位置（你必须记住）

1. 写页面的地方
   src/views/
   这里放你的页面：首页、登录页、列表页...
2. 写组件的地方
   src/components/
   放公共小组件：头部、底部、按钮、弹窗...
3. 入口页面（默认首页）
4. src/App.vue
   打开它就能直接改代码！
5. 最常用的测试页面
   src/components/HelloWorld.vue
   你可以直接在这里写代码测试。

---

我教你最快开始写代码：

1. 打开文件夹

• vue → src → App.vue

2. 把里面的代码改成：

//vue
<template>
  <h1>我的第一个 Vue 页面！</h1>
</template>

3. 保存，浏览器会自动刷新！

---

Vue 所有代码都在 src 里

Vue	src
写页面	src/views
写组件	src/components

---

Vue 核心

• {{ }} 显示数据
• v-model 输入框绑定
• @click 点击事件
• v-for 循环
• ref() 定义变量

---

例子：

一、最简单 Vue 写法（单文件组件）

• 文件名：src/components/Test.vue

//vue
<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="add">点击 +1</button>
    <p>计数：{{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 定义数据
const msg = ref('Hello Vue')
const count = ref(0)

// 定义方法
const add = () => {
  count.value++
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

二、最基础语法速查（必记）

1. 显示数据

html:

{{ 变量名 }}

---

2. 点击事件

html:

<button @click="方法名">点击</button>

---

3. 双向绑定（输入框实时同步）

html:

<input v-model="name" />
<p>你输入了：{{ name }}</p>

js:

const name = ref('')

---

4. 循环列表

html:

<ul>
  <li v-for="item in list" :key="item.id">
    {{ item.name }}
  </li>
</ul>

js:

const list = ref([
  { id:1, name:'苹果' },
  { id:2, name:'香蕉' }
])

---

5. 判断显示 / 隐藏

html:

<p v-if="isShow">显示我</p>
<button @click="isShow = !isShow">切换</button>

js:

const isShow = ref(true)

---

最简单完整页面（直接用）

src/views/Home.vue

vue:

<template>
  <div class="home">
    <h2>我的第一个 Vue 页面</h2>
    <input v-model="username" placeholder="输入名字" />
    <p>你好：{{ username }}</p>

    <div v-for="(item, index) in list" :key="index">
      {{ index + 1 }}. {{ item }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const username = ref('')
const list = ref(['Vue', 'PHP', 'Laravel', 'ThinkPHP'])
</script>

<style scoped>
.home {
  padding: 20px;
}
</style>