当前位置：首页 > VUE

黑马vue实现

2026-02-10 15:14:27VUE

以下是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')

按需引入组件

黑马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         # 入口文件