当前位置：首页 > backend >正文

VUE快速入门-4：简单入门案例

backend 2025/5/20 10:52:04

使用 Vue.js 搭建一个简单的前端示例可以帮助快速入门。以下是一个完整的步骤指南，教你如何创建一个 Vue.js 项目并实现一个简单的功能，比如显示一个列表。

步骤 1: 安装 Vue CLI

Vue CLI 是 Vue.js 的官方命令行工具，用于快速搭建项目。

全局安装 Vue CLI：

npm install -g @vue/cli
vue --version # 验证安装

步骤 2: 创建 Vue.js 项目

使用 Vue CLI 创建新项目：

vue create my-vue-app

选择配置：

在交互式提示中，你可以选择默认配置或手动选择特性（如 Babel、Router、Vuex 等）。
对于初学者，建议选择默认配置。

进入项目目录：

cd my-vue-app

步骤 3: 启动开发服务器

运行开发服务器：

npm run serve

访问项目：

打开浏览器，访问 http://localhost:8080。
你应该能看到 Vue.js 的默认欢迎页面。

步骤 4: 修改代码以显示一个列表

1.编辑 `src/components/HelloWorld.vue` 或创建一个新组件：

假设我们编辑 HelloWorld.vue 来显示一个简单的列表。

<template><div class="hello"><h1>{{ msg }}</h1><ul><li v-for="item in items" :key="item">{{ item }}</li></ul></div>
</template><script>
export default {name: 'HelloWorld',data() {return {msg: 'My Item List',items: ['Item 1', 'Item 2', 'Item 3'],};},
};
</script><style scoped>
h1 {color: #42b983;
}
ul {list-style-type: none;padding: 0;
}
li {margin: 10px 0;
}
</style>

2.在 `src/App.vue` 中使用组件：

确保 HelloWorld 组件被正确导入和使用。

<template><div id="app"><HelloWorld /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>