当前位置：首页 > 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 实现页面跳转：

使用vue实现简易网页

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 中引入路由：

使用vue实现简易网页

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 目录内容部署到服务器即可。

标签: 简易网页

分享给朋友：

css制作静态网页

使用CSS制作静态网页的基本方法 HTML结构搭建静态网页的基础是HTML结构，需先创建清晰的DOM树。典型结构包括<!DOCTYPE html>声明、<head>（含<…

网页登录实现vue

使用 Vue 实现网页登录功能创建 Vue 项目使用 Vue CLI 初始化项目，运行命令 vue create login-demo 选择默认配置或手动配置项目。安装必要依赖如 axios…

vue框架实现网页

Vue框架实现网页的基本步骤 Vue.js是一个渐进式JavaScript框架，用于构建用户界面。以下是使用Vue框架实现网页的核心步骤。安装Vue.js 通过CDN引入Vue.js是最简单的方式…

用vue实现网页

Vue.js 网页开发基础步骤安装 Vue.js 开发环境通过 npm 或 yarn 安装 Vue CLI（命令行工具），用于快速初始化项目。 npm install -g @vue/cli…

vue实现网页缩放

实现网页缩放的基本思路在Vue中实现网页缩放通常涉及监听浏览器事件、调整CSS样式或使用CSS的transform属性。以下是几种常见方法：使用CSS transform属性缩放通过修改CSS…

vue实现登录网页

实现登录页面的步骤前端部分使用Vue.js框架创建Vue项目并安装必要依赖： vue create login-page cd login-page npm install axios vue…

使用vue实现简易网页