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

VUE实现框架搭建（纯手写）

news 来源：原创 2025/6/22 14:39:51

在Vue.js中，纯手写实现一个框架搭建的过程涉及到多个步骤，包括项目初始化、组件开发、状态管理、路由配置等。以下是一个简化的步骤指南，帮助你从头开始搭建一个Vue.js应用。

1. 项目初始化

首先，你需要创建一个新的Vue.js项目。虽然Vue CLI可以快速生成项目，但为了纯手写，我们可以手动创建项目结构

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

2. 安装Vue.js

手动安装Vue.js库

npm install vue

3. 创建项目结构

创建以下文件和文件夹结构

4.编写 `main.js`

在 main.js 中初始化Vue实例并挂载到DOM

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

5.编写 `App.vue`

在 App.vue 中定义应用的根组件

<template>
  <div id="app">
    <h1>Welcome to My Vue App</h1>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. 编写 `HelloWorld.vue`

在 components/HelloWorld.vue 中创建一个简单的组件。

<template>
  <div>
    <p>Hello, World!</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
};
</script>

<style scoped>
p {
  font-size: 20px;
  color: #42b983;
}
</style>

7. 配置路由

在 router/index.js 中配置Vue Router

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
});

在 main.js 中使用路由

import Vue from 'vue';
import App from './App.vue';
import router from './router/index.js';

8. 配置状态管理（可选）

在 store/index.js 中配置Vuex状态管理

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex!'
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  }
});

在 main.js 中使用Vuex

import Vue from 'vue';
import App from './App.vue';
import router from './router/index.js';
import store from './store/index.js';

new Vue({ router,store,render: h => h(App),}).$mount('#app');