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

创建Vue2和Vue3项目区别对比和对应示例演示

news 2025/11/13 5:31:09

Vue2 与 Vue3 项目创建对比及示例演示

项目创建方式对比

Vue2 项目创建

方式一：使用 Vue CLI

# 安装 Vue CLI
npm install -g @vue/cli# 创建项目
vue create my-vue2-project
# 选择 Vue2 预设

方式二：直接引入 CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

Vue3 项目创建

方式一：使用 Vue CLI

# 确保 Vue CLI 版本在 4.5.0+
vue create my-vue3-project
# 选择 Vue3 预设

方式二：使用 Vite（推荐）

npm create vue@latest my-vue3-project
# 或
npm create vite@latest my-vue3-app -- --template vue

方式三：直接引入 CDN

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

代码示例对比

项目入口文件对比

Vue2 入口文件 (main.js)

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

Vue3 入口文件 (main.js)

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

组件定义方式对比

Vue2 组件示例

<template><div><h1>{{ title }}</h1><p>计数: {{ count }}</p><button @click="increment">增加</button><button @click="decrement">减少</button></div>
</template><script>
export default {data() {return {title: 'Vue2 计数器示例',count: 0}},methods: {increment() {this.count++},decrement() {this.count--}},mounted() {console.log('组件已挂载')}
}
</script>

Vue3 组合式 API 示例

<template><div><h1>{{ title }}</h1><p>计数: {{ count }}</p><button @click="increment">增加</button><button @click="decrement">减少</button><p>双倍计数: {{ doubleCount }}</p></div>
</template><script>
import { ref, computed, onMounted } from 'vue'export default {setup() {const title = ref('Vue3 计数器示例')const count = ref(0)const doubleCount = computed(() => count.value * 2)const increment = () => {count.value++}const decrement = () => {count.value--}onMounted(() => {console.log('组件已挂载')})return {title,count,doubleCount,increment,decrement}}
}
</script>

<template><div><h1>{{ title }}</h1><p>计数: {{ count }}</p><button @click="increment">增加</button><button @click="decrement">减少</button><p>双倍计数: {{ doubleCount }}</p></div>
</template><script setup>
import { ref, computed, onMounted } from 'vue'const title = ref('Vue3 计数器示例')
const count = ref(0)const doubleCount = computed(() => count.value * 2)const increment = () => {count.value++
}const decrement = () => {count.value--
}onMounted(() => {console.log('组件已挂载')
})
</script>

响应式系统对比

Vue2 响应式

// Vue2
export default {data() {return {user: {name: '张三',age: 25},hobbies: ['阅读', '运动']}},methods: {updateUser() {// 添加新属性需要使用 Vue.set 或 this.$setthis.$set(this.user, 'job', '工程师')// 数组修改this.hobbies.push('编程')}}
}

Vue3 响应式

// Vue3
import { reactive, ref } from 'vue'export default {setup() {const user = reactive({name: '张三',age: 25})const hobbies = ref(['阅读', '运动'])const updateUser = () => {// 可以直接添加新属性user.job = '工程师'// 数组修改hobbies.value.push('编程')}return {user,hobbies,updateUser}}
}

生命周期对比

Vue2 Vue3 (Options API) Vue3 (Composition API)
beforeCreate beforeCreate setup()
created created setup()
beforeMount beforeMount onBeforeMount
mounted mounted onMounted
beforeUpdate beforeUpdate onBeforeUpdate
updated updated onUpdated
beforeDestroy beforeUnmount onBeforeUnmount
destroyed unmounted onUnmounted

实际项目结构示例

Vue2 项目结构

my-vue2-project/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   ├── Home.vue
│   │   └── About.vue
│   ├── router/
│   │   └── index.js
│   ├── store/
│   │   └── index.js
│   ├── App.vue
│   └── main.js
├── package.json
└── vue.config.js

Vue3 项目结构 (Vite)

my-vue3-project/
├── public/
│   └── vite.svg
├── src/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   ├── Home.vue
│   │   └── About.vue
│   ├── router/
│   │   └── index.js
│   ├── stores/
│   │   └── counter.js
│   ├── App.vue
│   └── main.js
├── package.json
└── vite.config.js

主要差异总结