vue前端一个简单的静态页面

要创建一个简单的Vue静态页面，你需要遵循以下步骤：

1. 确保你有Node.js和npm/yarn安装。
2. 创建一个新的Vue项目或者在现有项目中添加页面。
3. 使用Vue模板语法编写HTML模板。
4. （可选）添加组件的JavaScript逻辑。
5. （可选）添加样式表。

以下是一个简单的Vue静态页面的示例代码：

首先，确保你已经安装了Vue CLI。如果没有，请通过以下命令安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

然后，创建一个新的Vue项目：

vue create my-static-page
cd my-static-page

接下来，在项目中添加一个新的组件 StaticPage.vue：

<template>
  <div>
    <h1>这是一个静态页面</h1>
    <p>这里是内容...</p>
  </div>
</template>
 
<script>
export default {
  name: 'StaticPage'
  // 组件的其他逻辑
}
</script>
 
<style>
/* 组件的样式 */
h1 {
  color: #3498db;
}
</style>

最后，在 src/App.vue 中引用这个组件：

<template>
  <div id="app">
    <static-page></static-page>
  </div>
</template>
 
<script>
import StaticPage from './components/StaticPage.vue'
 
export default {
  name: 'app',
  components: {
    StaticPage
  }
}
</script>
 
<style>
/* 全局样式 */
#app {
  text-align: center;
}
</style>

现在，运行以下命令启动开发服务器：

npm run serve
# OR
yarn serve

一个简单的静态页面就创建完成了，你可以在浏览器中访问 http://localhost:8080 查看结果。