Spring Boot+Vue项目微博系统（2）：构建前端Vue项目_spring boot 面试类似微博的开源项目-优快云博客

本文链接：https://blog.youkuaiyun.com/oldcunzhang/article/details/105972198

本文详细介绍了如何使用VueCLI快速构建Vue项目，包括安装配置、项目结构解析、启动测试及全局配置方法，适合初学者入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列目录

前言

前端项目可以借助 Vue CLi 脚手架来构建，个人感觉这东西跟Spring的Spring Initializer差不多，就是基于给定的模板，自己选择配置，然后构建一个基础项目。更多细节可以参考 Vue CLi 的官网 https://cli.vuejs.org/zh/

一、安装Vue CLi

查看官网可以看到，Vue CLi是基于Node.js的，所以要先保证本机已经安装好了Node.js
在这里插入图片描述

Vue CLi 的安装可以说是异常的简单了。。。直接命令行 npm install -g @vue/cli 就完事了。安装完成后，命令行输入 vue --version 查看是否安装成功及版本信息。

二、构建一个前端项目

Vue CLi 3以后，构建项目要简单很多，直接 vue create 项目名 即可，过程中可以选择默认构建或者自定义构建，但官方可能觉得还不够友好，给出了可视化构建方式。。命令行输入 vue ui 进入可视化构建界面。
在这里插入图片描述

接下来真的是傻瓜式安装了，就不细说了。遵循不懂就选上的原则，这里贴一下我选的配置（更新：注意，如果对TypeScript不熟悉的话，建议还是不要勾选第二个，因为它和JavaScript毕竟还是不一样，如果还是按照js的语法写可能会有很多问题，血与泪的教训。。我后来还是把这个给取消了，用原生js。）
在这里插入图片描述

这里注意几点：

Router 要选。以后页面路由全靠它了
Vuex 最好还是选上吧，Vue的状态管理解决方案，维护Vue项目中的一些公共状态，数据等。
Linter/Formatter好像是对代码进行规范化检查的（因为看到下边的ESLint了），这东西很烦，老是出现很多警告或红波浪线，本着能用就行的态度。这里就对自己不那么苛刻了，如果是专业前端人员感觉还是可以选上，规范自己的编码习惯。
TypeScript：如果不懂TypeScript还是不要选了，生成的内容和js版本的没啥差别的。

继续下一步，我的配置如下
在这里插入图片描述

看不懂就选。。这里我选择路由模式为：history，默认是哈希模式，具体区别可自行了解。

然后构建项目，这时会弹出是否保存这次的设定，以后可以直接拿这次的设定，这个就看自己的选择了。

三、启动测试

安装完成后，会进入仪表盘页面（有点酷炫），选择任务 => serve => 运行来测试。或者在项目文件夹下，从命令行输入 npm run serve。

在这里插入图片描述
项目默认监听8080端口，浏览器输入 localhost:8080/，测试初始页面。

四、项目结构

在VSCode中打开项目（这里推荐安装Vetur插件），如下所示。
在这里插入图片描述
ts即TypeScript，这里再次说一下，我后来还是把ts给去了，还是用的原生的js。留下了没技术的泪水。

主要的开发工作都在src目录下，components目录和views目录都是用来保存Vue组件的，所谓组件，顾名思义，可以理解为就是可以被拿到别处复用的代码块吧。区别是views目录下保存视图组件，即会路由到的组件，也即会在URL中访问到的组件。比如”/table“、”/index“，则对应的组件应该views目录下。components目录下保存可能会被复用，但是不会作为路由去访问的那些组件，比如一个按钮，一个表格。随着项目的开发可以逐渐体会其中的区别。

这里再多说一下，所谓路由可以简单理解为域名后边的部分，就是“/index”这样。

main.ts（js版本对应看即可）是项目入口，加载了根组件App.vue，并默认配置了路由router和Vuex的store
在这里插入图片描述

根组件App.vue包含了两个默认的视图组件Home和about。注意第7行的 <router-view/> 。这里就是将来展示不同的视图组件的地方。
在这里插入图片描述

所以可以理解，首页上部是两个超链接：Home和About，下半部分是路由视图。根据不同的路由展示不同的组件。

比如默认是在”/“路由下（看地址栏），此时下边展示的是Home组件，如果点击About，则在 <router-view/>处展示about组件的内容。

路由为”/“时，展示Home组件信息
路由为”/about“时，展示about组件内容

进一步查看Home组件的内容，这就是上边展示的“/”路由页面的源码，可以看到它包含个HelloWorld子组件。
在这里插入图片描述
这里也可以学到，在Vue文件中，最简单的引用其他组件的方式就是先导入，然后配置在components中，并在<template></template> （该标签可以理解为其中的内容会被渲染为HTML页面内容）中当普通的HTML标签使用即可。

这里也可以看出来views目录和components目录的区别。HelloWorld组件没有对应的路由，所以就写在components目录下。

那么为什么”/“路由就对应着Home组件，”/about“路由对应About组件呢？看router目录下的index.ts（js版本对照着看即可）就能看出来。
在这里插入图片描述

可以看到这里有个数组，每个数组元素有对应的 path即路由，name名字，component该路由对应需要加载的组件。

所以以后编写视图组件都需要在这里对应的配置一下，然后Vue会自动根据路由去加载对应的组件。此外这里的About组件使用了路由懒加载方式，即需要时才加载，这样能加快项目的响应速度，毕竟只是按需加载。

五、配置

可以在项目根目录下创建vue.config.js文件来进行全局配置，.env文件来进行环境配置。.env为默认加载的环境配置，可以创建 .env.** 文件来对标不同的环境，比如 .env.development 文件设定开发环境的配置，.env.production 文件设定生产环境的配置等。和Spring的配置文件类似。

这里就先建个 vue.config.js 文件，修改下端口：

module.exports = {
    publicPath: "/",
    devServer: {
        port: 8090
    }
}

重启项目，可以看到监听端口已经改为8090
在这里插入图片描述

关于vue.config.js的配置，官网https://cli.vuejs.org/zh/config/有更详细的介绍，以后再按需配置。

到此算是初始化了一个Vue项目，具体的使用以后逐步学习。

上一篇：
Spring Boot+Vue项目微博系统（1）：目录和简介

下一篇：
Spring Boot+Vue项目微博系统（3）：创建Spring Boot项目