Vue界面实现
Vue界面实现基础步骤
安装Vue CLI工具确保开发环境配置正确
npm install -g @vue/cli创建新项目并选择默认配置或手动配置
vue create project-name组件化开发结构
单文件组件包含template、script和style三部分
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!'
}
}
}
</script>
<style scoped>
.example {
color: red;
}
</style>数据绑定与指令
v-model实现双向数据绑定
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>v-for渲染列表数据
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>状态管理方案
Vuex核心概念包含state、mutations、actions
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})Pinia作为新一代状态管理工具
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})路由配置与管理
Vue Router基本配置示例
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHashHistory(),
routes
})导航守卫实现权限控制
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// 验证逻辑
} else {
next()
}
})UI组件库集成
Element Plus按需引入配置
import { createApp } from 'vue'
import { ElButton } from 'element-plus'
const app = createApp(App)
app.component(ElButton.name, ElButton)Vant移动端组件使用示例
<van-button type="primary">主要按钮</van-button>
<van-cell title="单元格" value="内容" />性能优化策略
懒加载路由组件提升首屏速度
const UserDetails = () => import('./views/UserDetails.vue')Keep-alive缓存组件状态
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>测试与调试
Vue Test Utils编写单元测试
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'
test('increments counter', async () => {
const wrapper = mount(Counter)
await wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).toContain('1')
})Vue Devtools安装与使用
npm install -g @vue/devtools
