vue-快速入门

Vue 是一个用于构建用户界面的渐进式框架。以下是一个简单的 Vue 快速入门示例，它展示了如何创建一个基本的 Vue 应用程序。

1. 首先，确保你的开发环境已安装了 Node.js 和 npm。
2. 创建一个新的 Vue 项目，可以使用 Vue CLI 工具：

npm install -g @vue/cli
vue create my-vue-app

3. 进入项目目录，并启动开发服务器：

cd my-vue-app
npm run serve

4. 在 src 目录下的 App.vue 文件中编写你的 Vue 组件：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>
 
<style>
#app {
  text-align: center;
  color: #2c3e50;
}
</style>

5. 修改 src/main.js 来挂载根实例：

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')

现在，你应该有一个运行中的 Vue 应用程序，可以在浏览器中查看。每次保存 .vue 文件或 .js 文件时，Vue CLI 服务器都会自动热重载，无需手动刷新浏览器。