当前位置：首页 > VUE

vue实现静态页面

2026-02-19 22:35:36VUE

Vue 实现静态页面的方法

使用 Vue 实现静态页面可以通过多种方式完成，以下是几种常见的方法：

使用 Vue CLI 创建项目

通过 Vue CLI 快速生成项目结构，适合需要模块化开发的场景。安装 Vue CLI 后，运行以下命令创建项目：

vue create static-page
cd static-page
npm run serve

项目创建后，在 src/App.vue 或自定义组件中编写静态内容。

直接引入 Vue.js

对于简单的静态页面，可以直接通过 CDN 引入 Vue.js，无需构建工具。在 HTML 文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Static Page</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    });
  </script>
</body>
</html>

使用单文件组件（SFC）

在 Vue 项目中，可以通过单文件组件（.vue 文件）组织静态内容。例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Welcome',
      content: 'This is a static page built with Vue.'
    };
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

静态内容与动态绑定的结合

Vue 允许在静态内容中嵌入动态数据绑定。例如：

<template>
  <div>
    <h1>Static Title</h1>
    <p>This paragraph is static.</p>
    <p>{{ dynamicText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicText: 'This text is dynamic.'
    };
  }
};
</script>

使用 Vue Router 管理多页面

如果需要多个静态页面，可以通过 Vue Router 实现路由切换：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router
}).$mount('#app');