vue-快速入门
Vue 是一个用于构建用户界面的渐进式框架。以下是一个简单的 Vue 快速入门示例,它展示了如何创建一个基本的 Vue 应用程序。
- 首先,确保你的开发环境已安装了 Node.js 和 npm。
- 创建一个新的 Vue 项目,可以使用 Vue CLI 工具:
npm install -g @vue/cli
vue create my-vue-app
- 进入项目目录,并启动开发服务器:
cd my-vue-app
npm run serve
- 在
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>
- 修改
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 服务器都会自动热重载,无需手动刷新浏览器。
评论已关闭