vue实现index dem
Vue 实现 index demo
以下是一个简单的 Vue 实现 index demo 的示例代码，展示如何创建一个基本的 Vue 应用。
安装 Vue
确保已安装 Node.js 和 npm，然后通过以下命令安装 Vue CLI：
npm install -g @vue/cli创建 Vue 项目
使用 Vue CLI 创建一个新项目：
vue create vue-demo
cd vue-demo修改 App.vue
在 src/App.vue 中，替换默认内容为以下代码：
<template>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">点击改变消息</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: '欢迎来到 Vue Demo'
}
},
methods: {
changeMessage() {
this.message = '消息已改变！'
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>运行项目
启动开发服务器：
npm run serve打开浏览器访问 http://localhost:8080，即可看到简单的 Vue 应用。
可选：添加路由
如果需要路由功能，可以安装 Vue Router：
npm install vue-router在 src/main.js 中配置路由：
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home }
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')创建 src/views/Home.vue 文件：
<template>
<div>
<h2>首页</h2>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>可选：状态管理
如果需要状态管理，可以安装 Vuex：
npm install vuex在 src/store/index.js 中创建 store：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
increment({ commit }) {
commit('increment')
}
}
})在 src/main.js 中引入 store：
import store from './store'
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')这样，一个基本的 Vue 应用就完成了，可以根据需求进一步扩展功能。
