Vue.js 快速开始

欢迎来到 Vue.js 的世界！以下是一些帮助你快速开始的步骤。

安装 Vue.js

首先，你需要安装 Vue.js。你可以通过以下命令来全局安装 Vue：

npm install -g @vue/cli

安装完成后，你可以使用 Vue CLI 创建一个新项目：

vue create my-project

创建第一个 Vue 应用

进入新创建的项目目录，并启动开发服务器：

cd my-project
npm run serve

打开浏览器，访问 http://localhost:8080，你应该能看到一个欢迎页面。

组件

Vue.js 使用组件来构建应用。组件是可复用的 Vue 实例，它们在 Vue 应用中随处可见。

创建组件

要创建一个组件，你可以创建一个 .vue 文件，例如 HelloWorld.vue：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

使用组件

在应用的任何地方，你都可以使用这个组件：

<template>
  <div>
    <hello-world></hello-world>
  </div>
</template>

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

export default {
  components: {
    HelloWorld
  }
}
</script>

资源

要了解更多关于 Vue.js 的信息，请访问我们的官方文档。

Vue.js Logo