当前位置：首页 > news >正文

Vue3：全流程开发

news 2026/4/24 23:11:50

文章目录

- - 环境准备与安装
  - 创建 Vue 3 项目
  - 项目结构解析
  - Vue 3 核心语法
  - 常用指令
  - 开发调试工具
  - 构建与部署

Vue官网

环境准备与安装

在开始之前，请确保本地已安装 Node.js（建议版本 16+）和 npm（Node 包管理器）。可通过终端命令检查版本：

node-vnpm-v

创建 Vue 3 项目

使用 Vue 官方脚手架工具create-vue（推荐）或 Vue CLI 创建项目。

方法一：使用 create-vue（官方推荐）

!进入目标项目文件夹npmcreate vue@3!这里@后填具体版本号

执行后会提示选择功能（如 TypeScript、JSX、Pinia 等），按需选择后进入项目目录并安装依赖：

cd<项目名称>npminstallnpmrun dev

方法二：使用 Vue CLI

npminstall-g@vue/cli vue create my-vue3-projectcdmy-vue3-projectnpmrun serve

端口5173能访问到即启动成功

项目结构解析

创建成功后，核心目录结构如下：

src/：源码目录
src/main.js：入口文件
src/App.vue：根组件
public/：静态资源
index.html：入口 HTML

Vue 3 核心语法

1. 创建应用实例
在main.js中：

import{createApp}from'vue'importAppfrom'./App.vue'createApp(App).mount('#app')

2. 组合式 API（Composition API）
Vue 3 推荐使用<script setup>语法糖简化代码。

示例：响应式数据与方法

<!-- Counter.vue --><scriptsetup>import{ref,computed}from'vue'// 响应式变量constcount=ref(0)// 方法constincrement=()=>{count.value++}// 计算属性constdoubleCount=computed(()=>count.value*2)</script><template><div><p>Count: {{ count }}</p><p>Double: {{ doubleCount }}</p><button@click="increment">+1</button></div></template>

3. 响应式原理

ref()：用于基本类型（string、number），需通过.value访问
reactive()：用于对象或数组

import{reactive}from'vue'conststate=reactive({name:'Vue',version:3})

4. 生命周期钩子

import{onMounted,onUnmounted}from'vue'onMounted(()=>{console.log('组件挂载完成')})onUnmounted(()=>{console.log('组件卸载')})

5. 组件通信

父传子：props
子传父：emit
兄弟/跨层级：provide/inject或状态管理（如 Pinia）

父组件传值

<!-- Parent.vue --><scriptsetup>importChildfrom'./Child.vue'constmsg='Hello from parent'</script><template><Child:message="msg"/></template>

子组件接收

<!-- Child.vue --><scriptsetup>defineProps({message:String})</script><template><p>{{ message }}</p></template>

6. 路由（Vue Router）
安装：

npminstallvue-router

配置路由：

// router/index.jsimport{createRouter,createWebHistory}from'vue-router'importHomefrom'../views/Home.vue'constroutes=[{path:'/',component:Home},{path:'/about',component:()=>import('../views/About.vue')}]constrouter=createRouter({history:createWebHistory(),routes})exportdefaultrouter

在main.js中使用：

import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'createApp(App).use(router).mount('#app')

7. 状态管理（Pinia）
安装：

npminstallpinia

创建 store：

// stores/counter.jsimport{defineStore}from'pinia'exportconstuseCounterStore=defineStore('counter',{state:()=>({count:0}),actions:{increment(){this.count++}}})

在组件中使用：

<scriptsetup>import{useCounterStore}from'../stores/counter'constcounter=useCounterStore()</script><template><p>{{ counter.count }}</p><button@click="counter.increment">+1</button></template>