如何下载网站模板网站关键词推广优化
创建一个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