当前位置：首页 > news >正文

使用vue3构建一套网站

news 来源：原创 2025/6/29 7:02:54

创建一个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.vuemain.jsindex.htmlpackage.jsonvite.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.vuemain.js