黑马vue实现
以下是Vue.js在黑马程序员课程或实战项目中常见的实现方法和关键技术点整理：
Vue基础项目搭建
使用Vue CLI创建项目
npm install -g @vue/cli
vue create project-name
cd project-name
npm run serve配置vue.config.js
module.exports = {
devServer: {
port: 8080,
open: true
},
lintOnSave: false
}核心功能实现
组件化开发示例
<template>
<div class="counter">
<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>状态管理(Vuex)
基础store配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
token: ''
},
mutations: {
setToken(state, payload) {
state.token = payload
}
},
actions: {
login({ commit }, token) {
commit('setToken', token)
}
}
})路由配置(vue-router)
路由配置示例
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
}
]
})常用第三方库集成
Element UI集成
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)Axios封装示例
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
service.interceptors.request.use(
config => {
config.headers['Authorization'] = getToken()
return config
},
error => {
return Promise.reject(error)
}
)项目优化技巧
路由懒加载
const UserDetails = () => import('./views/UserDetails.vue')按需引入组件
import { Button, Select } from 'element-ui'
Vue.use(Button)
Vue.use(Select)典型项目结构
src/
├── api/ # 接口封装
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── store/ # Vuex状态管理
├── utils/ # 工具函数
├── views/ # 页面组件
├── App.vue # 根组件
└── main.js # 入口文件
