Vue3-前端框架Vue基础入门

MadeInSQL

于 2025-06-02 19:40:49 发布

阅读量967

点赞数 14

CC 4.0 BY-SA版权

分类专栏：开发前端文章标签： vue.js 前端框架 javascript

本文链接：https://blog.csdn.net/NIIT0532/article/details/148385521

开发同时被 2 个专栏收录

191 篇文章

订阅专栏

前端

20 篇文章

订阅专栏

一、Vue 3核心特性

‌组合式API（Composition API）‌
- 替代Vue 2的选项式API，逻辑复用更灵活
- 核心函数：ref(), reactive(), computed(), watch()
‌响应式系统升级‌
- 基于Proxy实现，支持Map/Set等集合类型
- 性能提升：静态树提升（Static Tree Hoisting）
‌Teleport组件‌
- 实现DOM节点跨层级渲染
- 典型场景：全局弹窗、通知栏

二、基础语法示例

1. 组件模板

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

2. 脚本部分

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

三、工程化配置

‌项目创建‌
```
npm init vue@latest
```

‌目录结构‌

/src
  /components   # 可复用组件
  /views        # 页面级组件
  App.vue       # 根组件
  main.js       # 应用入口

四、生命周期对比

Vue 2选项	Vue 3组合式API
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated

五、实战示例：TodoList

TodoItem.vue


<script setup>
defineProps({
  todo: Object,
  index: Number
})
</script>

<template>
  <li>
    {{ todo.text }}
    <button @click="$emit('remove', index)">×</button>
  </li>
</template>

App.vue

 setup>
import { ref } from 'vue'
import TodoItem from './TodoItem.vue'

const todos = ref([])
const newTodo = ref('')

function addTodo() {
  todos.value.push({ text: newTodo.value })
  newTodo.value = ''
}
</script>

<template>
  <input v-model="newTodo" @keyup.enter="addTodo">
  <ul>
    <TodoItem 
      v-for="(todo, index) in todos"
      :key="index"
      :todo="todo"
      @remove="todos.splice($event, 1)"
    />
  </ul>
</template>

六、学习资源推荐

官方文档：vuejs.org（优先阅读中文V3文档）
调试工具：Vue Devtools 6.0+
UI库：Element Plus（Vue 3适配版）

注：建议从Vue 3开始学习，无需先掌握Vue 2。重点理解响应式原理和组合式API设计思想。

如何配置Vue 3项目？

以下是针对Vue 3项目配置的完整指南，涵盖‌环境搭建、项目初始化、核心配置、开发调试‌全流程，结合实际开发场景提供可落地的解决方案：

‌一、环境准备‌

1. 开发工具链

‌工具‌	‌版本要求‌	‌作用‌	‌安装方式‌
Node.js	≥16.0（推荐LTS）	运行开发服务器和构建工具	官网下载
npm/yarn/pnpm	≥8.0/≥1.22/≥7.0	依赖管理	`npm install -g pnpm`（示例）
Git	≥2.0	版本控制	官网下载
浏览器	Chrome/Firefox	调试开发版本	安装开发者工具扩展（如Vue Devtools）

2. 验证环境

node -v  # 输出示例：v18.16.0
npm -v   # 输出示例：9.5.1

‌二、项目初始化（3种主流方式）‌

‌方式1：官方脚手架（推荐）‌

npm create vue@latest my-vue-app
# 或使用pnpm/yarn
pnpm create vue@latest my-vue-app

‌交互式配置‌：支持选择TypeScript、Pinia、Router等特性

‌生成目录结构‌：

my-vue-app/
├── src/
│   ├── assets/       # 静态资源
│   ├── components/   # 通用组件
│   ├── views/        # 页面组件
│   ├── App.vue       # 根组件
│   └── main.js       # 应用入口
├── public/           # 公共资源（不会被Webpack处理）
├── package.json      # 依赖配置
└── vite.config.js    # Vite配置文件（或vue.config.js）

‌方式2：Vite快速初始化（轻量级）‌

npm create vite@latest my-vue-app --template vue

‌优势‌：启动速度比Vue CLI快10倍以上（冷启动<1s）
‌适用场景‌：中小型项目或学习用途

‌方式3：手动搭建（进阶）‌

创建项目目录并初始化npm

mkdir my-vue-app && cd my-vue-app
npm init -y

安装核心依赖

npm install vue@next @vitejs/plugin-vue

配置vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

‌三、核心配置详解‌

1. ‌开发服务器配置‌（`vite.config.js`）

export default defineConfig({
  server: {
    port: 3000,          // 开发服务器端口
    open: true,          // 自动打开浏览器
    proxy: {             // 代理配置
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

置 '/api': { target: 'http://localhost:8080', changeOrigin: true } } } })

2. ‌环境变量管理‌

‌文件规范‌：

.env               # 所有环境通用
.env.development   # 开发环境
.env.production    # 生产环境

‌示例内容‌：

VITE_APP_TITLE=MyVueApp
VITE_API_BASE_URL=/api

‌代码中使用‌：

console.log(import.meta.env.VITE_APP_TITLE) // 输出：MyVueApp

3. ‌CSS预处理器配置‌

npm install sass -D  # 安装Sass支持

‌Vite配置‌（无需额外配置，直接使用.scss文件）

‌组件中使用‌：

<style lang="scss" scoped>
$primary-color: #42b983;
.title {
  color: $primary-color;
}
</style>

4. ‌路由配置（Vue Router）‌

npm install vue-router@4

‌路由文件示例‌（src/router/index.js）：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: () => import('../views/Home.vue') },
  { path: '/about', component: () => import('../views/About.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

‌主入口挂载‌：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

5. ‌状态管理（Pinia）‌

npm install pinia

‌Store定义‌（src/stores/counter.js）：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
})

‌组件中使用‌：

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">{{ counter.count }}</button>
</template>

‌四、开发调试技巧‌

‌Vue Devtools‌
- 安装浏览器扩展（Chrome/Firefox）
- 关键功能：
  - 组件树结构查看
  - 状态快照对比
  - 事件总线监控
‌Vite热更新（HMR）‌
- 修改.vue文件后自动刷新
- 支持CSS/JSX/TSX的热更新
‌错误捕获‌
- 开发环境自动显示控制台警告
- 生产环境使用@vitejs/plugin-legacy兼容旧浏览器

‌五、生产环境构建‌

npm run build

‌输出文件‌：dist/目录
‌优化配置‌（vite.config.js）：

export default defineConfig({
  build: {
    outDir: 'dist',
    sourcemap: process.env.NODE_ENV === 'production' ? false : 'inline',
    chunkSizeWarningLimit: 1500, // 增大警告阈值
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'] // 代码分割
        }
      }
    }
  }
})

‌六、常见问题解决方案‌

‌问题描述‌	‌解决方案‌
浏览器缓存旧版本	开发时禁用缓存：DevTools → Network → Disable cache
组件未响应式更新	确保使用`ref()`/`reactive()`包装数据
环境变量未生效	变量名必须以`VITE_`开头
构建后资源404	确保`base`配置正确（如部署到子目录需设为`./`）

‌七、推荐项目结构（中大型项目）‌

src/
├── api/                  # API接口管理
├── assets/               # 静态资源
├── components/           # 通用组件
│   ├── base/             # 基础组件（如Button、Input）
│   └── business/         # 业务组件（如OrderCard）
├── composables/          # 组合式函数
├── constants/            # 常量定义
├── directives/           # 自定义指令
├── hooks/                # 自定义Hook
├── layouts/              # 布局组件
├── router/               # 路由配置
├── stores/               # Pinia Store
├── styles/               # 全局样式
├── utils/                # 工具函数
├── views/                # 页面组件
├── App.vue               # 根组件
└── main.js               # 应用入口