Web开发——Vue + Spring Boot 项目（二）

末蓝、 2023-06-25 06:21 4阅读 0赞

# 前言 #

在前端项目开发中，我们可以根据实际情况不同程度地使用 Vue。利用  vue-cli搭建出来的项目，是最能体现 Vue 的特性的。

在动手操作之前，我希望大家已经清楚什么是 “前后端分离” ，什么是 “单页面应用” 。

简单地说，前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互，而 单页面应用（single page web application，SPA），就是只有一张页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

附上 Vue 的官方教程：  
https://cn.vuejs.org/v2/guide/

# 一、安装Node #

第一步我们需要安装 Node.js，访问官网 [https://nodejs.org/en/][https_nodejs.org_en]，首页即可下载，版本自己选择，可以选大部分人在用的，也可以下载最新版本。

当然，也可以去这个快一点的网站[http://nodejs.cn/download/][http_nodejs.cn_download]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70][]

为啥要安装node呢， npm 是集成在 node.js 中的，安装 vue-cli需要使用 npm ，所以按步骤来吧。

下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 `node -v`，检查是否安装成功。

![2019122618115164.png][]

安装完成之后 `npm也会安装好了 输入npm -v测试`

![20191226181347741.png][]

输入

npm -g install npm

将 npm 更新至最新版本。

然后选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。

安装 cnpm 的命令为 ：

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后就可以使用 cnpm 替代 npm 了，如果安装了cnpm就要记得输命令的时候别输成npm就行。

cnpm install -g vue-cli

安装vue-cli。

在这里说明一下为什么我换了cnpm，因为一开始也想的是用npm，感觉还顺手一些，没想到各种ERROR接踵而至，进度条极慢，无奈之下，切换国内的吧。如果和我一样都选择了npm出现了问题想换cnpm的话需要执行一下卸载

npm uninstall vue-cli -g

然后使用上面命令安装一下，看到安装完成提示之后，就可以接着去搭建我们的项目了。

# 二、搭建Vue项目 #

## 1.创建工作空间 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 1][]

我在G盘中新建了一个workspace作为我的工作空间，大家随意。

然后用命令行进去文件夹中

![20191226203436324.png][]

然后执行命令

vue init webpack ff-vue

这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数，这里不再赘述。 ff-vue 是我们的项目名称，大家也可以起别的名字。

然后会遇到如图问题

![20191226203622594.png][]

直接回车，遇到问题都回车就可以了

然后看到如图提示则表示成功了！

![20191226204115575.png][]

可以观察一下工作空间下生成的项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 2][]

然后进到目录下

cd ff-vue

执行项目构建

cnpm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 3][]

如果遇到如图所示问题也不要担心。

在目录下再执行一下

cnpm install

然后再执行上面的命令

就会显示如图所示进度

![20191226204724957.png][]

我在这一步最后部分又出现了err

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 4][]

我们观察一下错误提示

这是Vue [2.xxx][] 搭建的项目，运行的时候会报错，解决方法

npm install --save-dev eslint-import-resolver-node

执行完命令之后再次执行

cnpm run dev

![20191226205011388.png][]

出现成功提示，我们访问一下网址

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 5][]

第一步就完成了！

# 三、使用 IntelliJ IDEA #

[idea-2018.3.5版本下载安装以及使用][idea-2018.3.5]

在idea的使用上我下载了官网最新的2019.3.1版本，上面是我之前安装的一个教程，有时间了我把教程更新一下。

新建一个vue项目

File→new→new project→static web

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 6][]

发现里面没有vue

可以在File→setting中的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 7][]

安装一下vue.js

如果是第一次进入ide则可以在

![20191227160756142.png][]

在里面找到插件将vue.js安装

然后在新建项目的时候就可以找到vue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 9][]

等待项目构建

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 10][]

然后我们在左下角点击Terminal

输入

cnpm install

![2019122716235116.png][]

然后执行

cnpm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 11][]

然鹅一堆ERR无情的出现了

这是由于版本更新

npm run dev 和npm start 已经是老项目的运行方式

新的命令为

cnpm run serve

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 12][]

# 四、Vue 项目结构分析 #

这里直接搬运了一部分过来

我们分析几个文件，目的是理解各个部分是怎么联系到一起的。

### 1.index.html   首页文件的初始代码如下： ###

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>wj-vue</title>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

就是一个普普通通的 html 文件，让它不平凡的是 <div id="app"></div> ，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是，整个项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。

### 2.App.vue ###

上面图上我把这个文件称为“根组件”，因为其它的组件又都包含在这个组件中。

.vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 vue 组件。先看它的初始代码

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

大家可能注意到了，这里也有一句 <div id="app">，但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

这个文件最关键的一点其实是第四行， <router-view/>，是一个容器，名字叫“路由视图”，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。

### 3.main.js ###

前面我们说 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 没有关系，那么这两个文件是怎么建立联系的呢？让我们来看入口文件 main.js 的代码

import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

这里插一嘴，这个 js 文件有的同学可能看着不顺眼，比如没有分号（;），因为是 ES6 的语法，不这么写反而会提示错误，虽说可以把 es-lint 改了或者关了，但我想熟悉一下新的规则也挺好。

最上面 import 了几个模块，其中 vue 模块在 node\_modules 中，App 即 App.vue 里定义的组件，router 即 router 文件夹里定义的路由。

Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

在这个 js 文件中，我们创建了一个 Vue 对象（实例），el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标，router 代表该对象包含 Vue Router，并使用项目中定义的路由。components 表示该对象包含的 Vue 组件，template 是用一个字符串模板作为 Vue 实例的标识使用，类似于定义一个 html 标签。

看完了以上三个文件，我想基本上就对前端项目的结构有所了解了。

[https_nodejs.org_en]: https://nodejs.org/en/
[http_nodejs.cn_download]: http://nodejs.cn/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191226180900730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[2019122618115164.png]: https://img-blog.csdnimg.cn/2019122618115164.png
[20191226181347741.png]: https://img-blog.csdnimg.cn/20191226181347741.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191226203317318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[20191226203436324.png]: https://img-blog.csdnimg.cn/20191226203436324.png
[20191226203622594.png]: https://img-blog.csdnimg.cn/20191226203622594.png
[20191226204115575.png]: https://img-blog.csdnimg.cn/20191226204115575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191226204328422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019122620453665.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[20191226204724957.png]: https://img-blog.csdnimg.cn/20191226204724957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191226204813328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[2.xxx]: http://2.xxx/
[20191226205011388.png]: https://img-blog.csdnimg.cn/20191226205011388.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191226205039689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[idea-2018.3.5]: https://blog.csdn.net/u012998306/article/details/88530625
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191227160205980.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191227160702230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[20191227160756142.png]: https://img-blog.csdnimg.cn/20191227160756142.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191227160936754.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191227161103814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2019122716231033.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[2019122716235116.png]: https://img-blog.csdnimg.cn/2019122716235116.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191227162501816.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191227162654703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5OTgzMDY=,size_16,color_FFFFFF,t_70