Spring Boot+Vue项目 微博系统(2):构建前端Vue项目

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

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

系列目录

Spring Boot+Vue项目 微博系统

前言

前端项目可以借助 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项目

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值