Spring Boot+Vue项目 微博系统（2）：构建前端Vue项目
系列目录
Spring Boot+Vue项目 微博系统
目录
- 系列目录
- 前言
- 一、安装Vue CLi
- 二、构建一个前端项目
- 三、启动测试
- 四、项目结构
- 五、配置
前言
前端项目可以借助 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项目
Spring Boot+Vue项目 微博系统（2）：构建前端Vue项目相关推荐
- vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端 注意: 由于第一次加载数据量较大,建议wif ...
- springboot毕设项目基于Spring Boot的智慧天气管理系统84z99（java+VUE+Mybatis+Maven+Mysql）
springboot毕设项目基于Spring Boot的智慧天气管理系统84z99(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + Tomcat8. ...
- 基于Spring Boot的桥牌计分系统
桥牌是一种非常受欢迎的纸牌游戏,因其策略性强.有趣而备受喜爱.但是,计算桥牌比赛分数是一个十分繁琐的过程,需要考虑多种因素,例如合约.支配点数等等.因此,我们开发了一个基于Spring Boot的桥牌 ...
- 基于Spring Boot的车牌识别系统
前言 基于Spring Boot的车牌识别系统 :一键获取源码地址 介绍 spring boot + maven 实现的车牌识别及训练系统 基于java语言的深度学习项目,在整个开源社区来说都相对较少 ...
- Spring Boot+Vue从零开始搭建系统（一）：项目前端_Vuejs环境搭建
前言 博主本身是一直从事Java后端开发,一直想独立开发一套完整前端和后端技术结合的项目来提升自己的技术水平,经过对业界的一些热点技术的了解并对技术栈选型考虑后,博主打算利用Vue.js和Spring ...
- 基于 Spring Boot 的车牌识别系统（附项目地址）
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! gitee开源地址 " https://git ...
- 基于 Spring Boot 的车牌识别系统（附项目地址）ba
gitee开源地址 " https://gitee.com/admin_yu/yx-image-recognition 嘿嘿,胖友给艿艿的 https://github.com/YunaiV ...
- 基于Spring Boot的车牌识别系统（附项目地址）
前言 介绍 spring boot + maven 实现的车牌识别及训练系统 基于java语言的深度学习项目,在整个开源社区来说都相对较少:而基于java语言实现车牌识别EasyPR-Java项目,最 ...
- 基于 Spring Boot 的车牌识别系统（附项目地址）！
前言 gitee开源地址 介绍 包含功能 软件版本 软件架构 操作界面 车牌检测过程 图片车牌文字识别过程 安装教程 参考文档 gitee开源地址 https://gitee.com/admin_yu ...
最新文章
- 机器学习Sklearn实战——其他线性模型
- Spring Cloud：指定Eureka Serverd IP地址
- linux安装mysql后如何连接_Linux安装mysql后开启远程连接（记录相关命令）
- 力扣529.扫雷游戏
- 各浏览器中的鼠标滚轮事件处理
- Clean-Code: 有意义的名字
- android 修改系统参数设置,Android获取与设置系统环境变量的方法指南
- ubuntu安装vasp_VASP 软件在ubuntu10.04下的安装过程
- 网上图书商城项目学习笔记-017结算，跳转结算页面
- 对前端页面的边框设置
- 做好项目成本核算需要注意哪些事项
- 【深度学习】使用labelImg标注图像
- nginx禁止外网访问
- 3.14 python笔记
- 计算机网络课程设计报告 计算校验和 湖南文理学院,湖南文理学院课程设计 计算机网络实验室综合布线系统的设计与测试...
- 机械零件的强度（一）
- 关键字、关键词和关键短语（Keywor…
- 【协议分析】Web QQ登陆验证分析
- 清华BDIRC：已无须论证重要性的大数据
- linux kdump文件 生成,linux kdump搭建