增城网站建设价格,摄影网站下载,软件设计是干什么的,怎么用网网站模板做网站项目结构src/├── router/│ └── index.js # 路由配置├── components/│ ├── Home.vue # 首页组件│ ├── About.vue # 关于页组件│ └── Contact.vue # 联系页组件├── App.vue # 根组件#xff08;含导航栏含导航栏└── main.js # 入口文件1. 路由配置文件 router/index.js
import { createRouter, createWebHistory } from vue-router
import Home from ../components/Home.vue
import About from ../components/About.vue
import Contact from ../components/Contact.vueconst routes [{ path: /, name: Home, component: Home },{ path: /about, name: About, component: About },{ path: /contact, name: Contact, component: Contact }
]const router createRouter({history: createWebHistory(),routes
})export default router2. 组件文件 components/Home.vue
templatediv classpage-containerh1首页/h1p欢迎访问我们的网站/pbutton clickgreet点击打招呼/button/div
/templatescript
export default {name: Home,methods: {greet() {alert(Hello!)}}
}
/scriptstyle scoped
.page-container {padding: 20px;
}
/style3. 根组件 App.vue
templatediv idapp!-- 导航栏 --nav classnavbarrouter-link to/ classnav-link首页/router-linkrouter-link to/about classnav-link关于/router-linkrouter-link to/contact classnav-link联系/router-link/nav!-- 路由出口显示当前页面 --router-view //div
/templatescript
export default {name: App
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;margin-top: 50px;
}.navbar {background-color: #f8f9fa;padding: 10px 0;margin-bottom: 20px;
}.nav-link {margin: 0 15px;text-decoration: none;color: #333;font-weight: 500;
}.nav-link.router-link-exact-active {color: #42b983;border-bottom: 2px solid #42b983;padding-bottom: 2px;
}
/style4. 入口文件 main.js
import { createApp } from vue
import App from ./App.vue
import router from ./router// 创建应用并使用路由
createApp(App).use(router).mount(#app)所有需要在整个应用中生效的功能如路由、全局样式、插件都需要在 main.js 中通过 app.use() 或 app.component() 等方法 “启用”否则无法在应用中全局使用。main.js 是 Vue 应用的 “全局配置中心”负责告诉应用“哪些资源是全局可用的如何启动整个应用”。但它本身不是全局变量的容器而是控制全局行为的入口。
