前后端分离学习笔记：1-1 springboot+vue概述--VUE前端框架搭建

【2020版】4小时学会Spring Boot+Vue前后端分离开发  学习笔记

 

创建前端工程

 

安装vue CLI 3 (如果有vue CLI2 要先卸载)

1、创建工程，终端输入

vue ui

以上方式是vue cli3特有的可视化创建工程方法

也可以使用以下方式创建

vue create 工程名 

2、导入IDEA

打开IDEA，选择import project

导入后，在偏好设置的Plugins中安装vue插件 

在终端中输入以下命令启动前端工程

npm run serve 

工程目录如下所示： 

 

启动界面如下所示： 

 

在该界面中通过路由分为两部分：Home和About

是链接，在router文件夹的index.js配置路由映射

用于显示界面

路由index.js代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在该代码中使用了两种方式进行路由映射：

（1）Home的映射方式是import导入组件，再进行映射

（2）About的映射方式是vue cli3特有的，这样可以实现懒加载

Home.vue

其中引入了Hello Word组件

上图中HelloWorld标签组件中 msg的内容在HelloWorld.vue中有定义