使用vue3构建一套网站

创建一个vue-pc项目

npm create vite@latest vue-pc --template vue

选择  vue  ->  javaScript

// 依次执行命令
cd vue-pc
npm install
// 启动项目
npm run dev

快捷键 o + enter 在浏览器打开

Vite 创建完的 Vue 项目目录结构大致如下：

vue-pc/
  public/
  src/
    assets/
    components/
    App.vue
    main.js
  index.html
  package.json
  vite.config.js

配置路由
安装 vue-router：

npm install vue-router@4

然后在 src 下新建路由配置文件：

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import BuyPage from '../views/BuyPage.vue' // 👈 新建页面
import TestPage from '../views/TestPage.vue'; // 👈 引入测试页面

const routes = [
  {
    path: '/',
    name: 'Buy',
    component: BuyPage
  },
  {
    path: '/test',  // 👈 新增测试页面路由
    name: 'Test',
    component: TestPage
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

修改入口文件使用路由
在 src/main.js 中把 Vue Router 加进去：

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

import './style.css'

const app = createApp(App)
app.use(router)
app.mount('#app')

创建显示页面
新建：src/views/BuyPage.vue

<template>
  <div class="buy-page">
    <h1>购买数字货币</h1>
    
    <div class="form-item">
      <label>选择币种：</label>
      <select v-model="selectedCoin">
        <option v-for="coin in coins" :key="coin" :value="coin">
          {{ coin }}
        </option>
      </select>
    </div>

    <div class="form-item">
      <label>购买数量：</label>
      <input type="number" v-model="amount" min="0" placeholder="输入数量" />
    </div>

    <button @click="buyCoin">立即购买</button>

    <div v-if="result" class="result">
      <p>{{ result }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const coins = ['USDT', 'BTC', 'ETH']
const selectedCoin = ref('USDT')
const amount = ref('')
const result = ref('')

function buyCoin() {
  if (!amount.value || amount.value <= 0) {
    result.value = '请输入有效的数量'
    return
  }
  result.value = `成功购买 ${amount.value} 个 ${selectedCoin.value}`
}
</script>

<style scoped>
.buy-page {
  max-width: 500px;
  margin: 50px auto;
  padding: 30px;
  border: 1px solid #eee;
  border-radius: 10px;
}
.form-item {
  margin-bottom: 20px;
}
.result {
  margin-top: 20px;
  color: green;
}
</style>

新建：src/views/TestPage.vue

<template>
    <div class="test-page">
      <h1>测试页面</h1>
      <p>这里是专门用来写测试代码的页面。</p>
    </div>
  </template>
  
  <script setup>
  // 你可以在这里测试你的代码
  </script>
  
  <style scoped>
  .test-page {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    border: 1px dashed #aaa;
    border-radius: 10px;
    background: #fff;
  }
  </style>
  

修改 App.vue
确保 App.vue 中渲染路由出口：

<template>
  <router-view />
</template>

<script setup>
// 空的 script-setup
</script>

<style>
/* 全局样式可在这里写 */
</style>

访问的后缀是在src/router/index.js配置的
访问页面即可看到效果，访问测试页面可以http://localhost:5173/test 根据路由会渲染views/TestPage.vue里面的代码。

后续可做

• 使用 Pinia 做状态管理（Vuex 已不推荐）
• 使用 Axios 接入后端 API
• 引入 Element Plus、Naive UI 等组件库美化界面
• 做身份认证（比如登录、支付密码）
• 接入订单记录、支付状态等功能

后续可扩展后的src文件目录

src/
  api/           // 接口请求封装
  assets/        // 静态资源
  components/    // 可复用组件
  config/        // 配置文件
  i18n/          // 国际化
  layout/        // 公共布局
  plugins/       // 第三方插件封装
  router/        // 路由配置
  store/         // 状态管理（Pinia/Vuex）
  utils/         // 工具函数
  views/         // 页面级组件
  App.vue
  main.js

做pc端项目，需要全屏展示，修改src/style.cc

#app {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

vue3引入使用Element Plus 和 暗黑模式

运行以下命令安装 Element Plus：

npm install element-plus

在 src/main.js中引入 Element Plus，并注册其组件和样式：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //中文
import 'element-plus/theme-chalk/dark/css-vars.css' //暗黑模式
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './style.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus, {
    locale: zhCn //中文
  })
app.mount('#app')