spring+vue环境搭建（四）上

最新推荐文章于 2025-12-29 23:03:41 发布

原创

最新推荐文章于 2025-12-29 23:03:41 发布 · 3.8k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何在已有的Spring+Vue环境中集成Element-UI和Vue-Router。首先，梳理了Vue-cli生成的项目结构，包括主要的配置文件和入口文件。接着，详细讲解了引入Element-UI的过程，包括安装、配置Webpack以及在App.vue中使用组件。随后，引入Vue-Router并创建简单的路由策略，实现了页面间的跳转。最后，预告了接下来的关键部分——前后端联调。

回顾：前面我们搭建好了springmvc，mybatis后端环境，以及vue，webpack前端环境。这部分，我们的目标是引入vue常用的一些特性，如element-ui和router，然后进行前后端联调

第四步（上）

首先，我们理一哈vue-cli生成了哪些文件，先看webpack.config.js
这里写图片描述
可见，js入口文件为src/main.js，然后webpack给我们打包到dist/build.js

src/main.js文件内容如下，为vue入口

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

然后，vue-cli给我们生成的第一个vue文件App.vue，内容如下（省略掉style代码）

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{
   
   { msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org/" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org/" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org/" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>