vue项目实现页面
创建Vue项目
使用Vue CLI快速初始化项目：
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve配置路由
安装Vue Router：
npm install vue-router在src/router/index.js中配置基本路由：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router创建页面组件
在src/views目录下创建页面组件：
- Home.vue
- About.vue
示例Home.vue组件：
<template>
<div class="home">
<h1>首页内容</h1>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>主入口配置
在main.js中引入路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')布局结构
在App.vue中添加路由视图和导航：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>样式处理
安装CSS预处理器（如Sass）：
npm install sass sass-loader在组件中添加scoped样式：
<style scoped>
nav {
padding: 20px;
}
nav a {
margin-right: 10px;
}
</style>状态管理（可选）
安装Vuex进行状态管理：
npm install vuex创建store文件：
import { createStore } from 'vuex'
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {}
})构建部署
生产环境构建：
npm run build部署生成的dist目录到Web服务器。
