当前位置：首页 > VUE

vue实现初始化

2026-02-20 17:28:46VUE

Vue 初始化实现方法

安装 Vue.js 通过 npm 或 yarn 安装 Vue.js 最新稳定版本。在项目目录下运行以下命令：

npm install vue
# 或
yarn add vue

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

import Vue from 'vue'

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

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

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

使用 Vue CLI 初始化项目

全局安装 CLI 确保已安装最新版 Vue CLI：

vue实现初始化

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

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

vue create my-project

项目结构 典型 Vue CLI 生成的项目结构包含：

src/main.js 主入口文件
src/App.vue 根组件
public/index.html 主 HTML 文件

单文件组件使用

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

vue实现初始化

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

<script>
export default {
  data() {
    return {
      msg: 'Hello from SFC'
    }
  }
}
</script>

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

数据绑定方法

响应式数据 在组件中声明响应式数据：

data() {
  return {
    counter: 0,
    user: {
      name: 'Alice'
    }
  }
}

模板语法 使用双大括号插值和指令：

<div>
  <p>{{ counter }}</p>
  <button @click="counter++">Increment</button>
  <input v-model="user.name">
</div>

生命周期钩子

常用钩子示例 在组件中添加生命周期方法：

export default {
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('DOM mounted')
  },
  beforeDestroy() {
    console.log('Before component destroy')
  }
}