04. Vue3零基础快速入门实战

2486 字约 5 分钟读完225 次阅读更新于 2026/5/3

学习几个基本的标签

{{ msg }}
v-if (v-else)
v-for
v-bind
v-on
v-model

搭建脚手架

安装 NodeJS20 版本

配置淘宝镜像：

npm config set registry https://registry.npmmirror.com

开始搭建 Vue3 工程

npm create vue@latest

安装运行

cd vue
npm install
npm run dev

访问：http://localhost:5173/

卸载 dev-tools

npm uninstall vite-plugin-vue-devtools

使用 Element-Plus

https://element-plus.org/zh-CN/component/overview

安装

npm install element-plus --save

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)

app.use(router).use(ElementPlus, {
    locale: zhCn,
})

app.mount('#app')

页面的标准模板

<template>
  <div>

  </div>
</template>

<script setup>
</script>

安装图标

 npm install @element-plus/icons-vue

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import '@/assets/css/global.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

app.use(router).use(ElementPlus, {
    locale: zhCn,
})

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.mount('#app')

消除边框

Router

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/manager',
      component: () => import('@/views/Manager.vue'),
      children: [
        { path: 'home', component: () => import('@/views/Home.vue') },
        { path: 'admin', component: () => import('@/views/manager/Admin.vue') },
      ]
    }
  ],
})

export default router

封装 axios

安装 axios

npm install axios

后端配置跨域

package com.example.common;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 跨域配置
 */
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

封装的 request.js

import axios from "axios";

const request = axios.create({
    baseURL: 'http://localhost:9090',  // 配置后端的请求地址
    timeout: 30000  // 后台接口超时时间
})

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        return response.data;
    },
    error => {
        return Promise.reject(error)
    }
)

export default request