当前位置：首页 > VUE

使用vue实现简易网页

2026-01-23 15:19:37VUE

使用 Vue 实现简易网页

创建 Vue 项目

使用 Vue CLI 快速初始化项目，确保已安装 Node.js 和 npm。
运行以下命令创建项目：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

编写基础组件

在 src/components 目录下创建 HelloWorld.vue，编写模板、脚本和样式：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">点击修改文本</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '欢迎使用Vue!'
    }
  },
  methods: {
    changeMsg() {
      this.msg = '文本已更新!';
    }
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 20px;
}
button {
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

配置路由（可选）

安装 Vue Router 实现页面跳转：

npm install vue-router

在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';

const routes = [
  { path: '/', component: HelloWorld }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在 main.js 中引入路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

运行与调试

启动开发服务器后，访问 http://localhost:8080 查看效果：

npm run serve

打包部署

构建生产环境代码，生成静态文件到 dist 目录：

npm run build

将 dist 目录内容部署到服务器即可。

使用vue实现简易网页

标签: 简易网页

分享给朋友：

css制作静态网页

CSS制作静态网页的基本方法 CSS用于控制网页的样式和布局，结合HTML可以创建美观的静态网页。以下是关键步骤： HTML结构搭建创建基本的HTML文件结构，包含<!DOCTYPE ht…

vue实现网页换肤

实现网页换肤的方法在Vue中实现网页换肤功能，可以通过多种方式完成。以下是几种常见的实现方法：动态切换CSS类名通过动态绑定类名，切换不同的主题样式。定义一个主题类名，如theme-dark…

网页截图实现PHP

使用PHP的GD库进行网页截图 PHP本身不具备直接截取网页的功能，但可以通过调用外部工具或服务实现。以下是几种常见方法：方法一：使用PHP的exec()调用外部工具安装wkhtmltop…

vue实现网页功能

Vue 实现网页功能的核心方法创建 Vue 项目使用 Vue CLI 或 Vite 快速初始化项目。Vue CLI 适合传统项目，Vite 适合现代轻量级应用。 npm init vue@lat…

vue实现网页聊天

Vue 实现网页聊天功能基础结构搭建使用 Vue CLI 或 Vite 创建项目，安装必要依赖： npm install vue socket.io-client 创建基础组件结构： &l…

vue实现网页跳转

Vue 实现网页跳转的方法在 Vue 中实现网页跳转可以通过多种方式，以下是几种常见的方法：使用 Vue Router 的编程式导航 Vue Router 提供了 this.$router.pu…

使用vue实现简易网页