当前位置：首页 > VUE

vue实现初始化

2026-01-20 01:26:59VUE

Vue 初始化实现步骤

安装 Vue 通过 npm 或 yarn 安装 Vue 核心库：

npm install vue
# 或
yarn add vue

创建 Vue 实例 在 JavaScript 文件中导入 Vue 并创建实例：

import Vue from 'vue';

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

HTML 模板 在 HTML 文件中添加挂载点：

<div id="app">
  {{ message }}
</div>

引入 Vue 文件 通过 script 标签引入 Vue（适用于非构建工具环境）：

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

使用 Vue CLI 初始化项目

安装 Vue CLI 全局安装脚手架工具：

npm install -g @vue/cli
# 或
yarn global add @vue/cli

创建新项目 运行创建命令并选择配置：

vue create my-project

启动开发服务器 进入项目目录并运行：

cd my-project
npm run serve

单文件组件结构

基本结构 .vue 文件包含三部分：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Single File Component'
    }
  }
}
</script>

<style scoped>
div {
  color: red;
}
</style>

数据绑定方法

双向绑定 使用 v-model 指令：

<input v-model="message">

属性绑定 通过 v-bind 或简写 :：

<img :src="imageSrc">

生命周期钩子

常用钩子函数

export default {
  created() {
    // 实例创建后调用
  },
  mounted() {
    // DOM 挂载后调用
  },
  beforeDestroy() {
    // 实例销毁前调用
  }
}

组件注册方式

全局注册

Vue.component('my-component', {
  // 选项
})

局部注册

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

状态管理（Vuex）

安装 Vuex

npm install vuex

基本 Store 结构

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

路由配置（Vue Router）

安装路由

npm install vue-router

基本路由设置

vue实现初始化

import VueRouter from 'vue-router'

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})