当前位置：首页 > VUE

vue实现框架

2026-02-10 00:49:18VUE

Vue 实现框架的基本步骤

安装 Vue CLI 或 Vite 作为项目脚手架工具，确保 Node.js 环境已配置完成。Vue CLI 适合传统项目，Vite 更适合现代轻量级应用。

npm install -g @vue/cli
# 或
npm create vite@latest my-vue-app --template vue

创建项目后，进入项目目录并安装核心依赖。Vue 3 推荐使用 Composition API，需明确版本兼容性。

cd my-vue-app
npm install vue@next vue-router@4 pinia

项目结构配置

src/ 目录下按功能划分模块，典型结构如下：

assets/：静态资源
components/：可复用组件
views/：路由级页面
router/：路由配置
store/：状态管理（Pinia/Vuex）
App.vue：根组件
main.js：入口文件

路由配置示例（Vue Router 4）：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home }
]

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

export default router

状态管理方案

Pinia 作为 Vue 3 推荐的状态管理库，替代 Vuex：

// store/counter.js
import { defineStore } from 'pinia'

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

组件中使用：

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

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

响应式数据绑定

Vue 3 的 Composition API 提供更灵活的响应式管理：

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

const msg = ref('Hello Vue')
const reversedMsg = computed(() => msg.value.split('').reverse().join(''))
</script>

<template>
  <input v-model="msg" />
  <p>{{ reversedMsg }}</p>
</template>

生命周期与副作用

使用 onMounted 等生命周期钩子：

vue实现框架

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

onMounted(() => {
  console.log('Component mounted')
})
</script>

样式与 SCSS 支持

安装预处理器支持：

npm install -D sass

组件内使用：

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

构建与部署

生产环境构建命令：

npm run build

部署时注意：

静态资源路径问题可通过 vite.config.js 或 vue.config.js 配置 publicPath
推荐使用 Docker 或 Nginx 托管生成的 dist 目录

性能优化技巧

启用路由懒加载：

vue实现框架

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

使用 v-if 和 v-show 合理控制渲染，对长列表采用虚拟滚动（如 vue-virtual-scroller）。

测试方案

单元测试配置（Vitest + Testing Library）：

npm install -D vitest @testing-library/vue

测试示例：

import { render } from '@testing-library/vue'
import Counter from '../components/Counter.vue'

test('increments value on click', async () => {
  const { getByText } = render(Counter)
  getByText('0').click()
  await screen.findByText('1')
})

TypeScript 集成

创建项目时选择 TypeScript 模板，或手动添加：

npm install -D typescript @vue/compiler-sfc

配置 tsconfig.json：

{
  "compilerOptions": {
    "strict": true,
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve"
  }
}