VUE 开发实例 一则

创建Vue项目

使用Vue CLI快速创建项目，确保已安装Node.js和npm。运行以下命令生成新项目：

vue create my-vue-project

选择默认配置或手动配置（如Babel、Router、Vuex等）。

组件开发

单文件组件（.vue）包含模板、脚本和样式三部分。以下是一个计数器组件示例：

<template><div><button @click="decrement">-</button><span>{{ count }}</span><button @click="increment">+</button></div>
</template><script>
export default {data() {return {count: 0}},methods: {increment() {this.count++},decrement() {this.count--}}
}
</script><style scoped>
button {margin: 0 10px;
}
</style>

路由配置

在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

状态管理（Vuex）

创建store管理全局状态。示例store模块：

import { createStore } from 'vuex'export default createStore({state: {user: null},mutations: {SET_USER(state, user) {state.user = user}},actions: {login({ commit }, user) {commit('SET_USER', user)}},getters: {isAuthenticated: state => !!state.user}
})

API调用

使用axios进行HTTP请求。创建src/api目录存放API模块：

import axios from 'axios'const api = axios.create({baseURL: 'https://api.example.com',timeout: 5000
})export const getPosts = () => api.get('/posts')
export const createPost = (data) => api.post('/posts', data)

表单验证

使用Vuelidate进行表单验证：

<template><form @submit.prevent="submit"><input v-model="email" @blur="$v.email.$touch()"><span v-if="$v.email.$error">请输入有效邮箱</span><button type="submit">提交</button></form>
</template><script>
import { required, email } from 'vuelidate/lib/validators'export default {data() {return {email: ''}},validations: {email: { required, email }},methods: {submit() {this.$v.$touch()if (!this.$v.$invalid) {// 提交逻辑}}}
}
</script>

响应式布局

使用CSS Grid或Flexbox实现响应式布局：

<template><div class="container"><header>Header</header><main>Main Content</main><aside>Sidebar</aside><footer>Footer</footer></div>
</template><style>
.container {display: grid;grid-template-columns: 1fr 3fr;grid-gap: 20px;
}@media (max-width: 768px) {.container {grid-template-columns: 1fr;}
}
</style>

测试组件

使用Jest测试Vue组件：

import { mount } from '@vue/test-utils'
import Counter from '@/components/Counter.vue'describe('Counter.vue', () => {it('increments count when button is clicked', () => {const wrapper = mount(Counter)wrapper.find('button:nth-child(2)').trigger('click')expect(wrapper.vm.count).toBe(1)})
})