VueCli3.x小白入门-搭建项目

米修在线 2023-01-13 01:57:08

课时名称	课时知识点
VueCli3.x小白入门-搭建项目	VueCli3.x小白入门-搭建项目

...全文

179 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

内容概要：本文为Vue.js新手准备了一份详细的入门指南，涵盖了从Vue的基础概念、环境搭建、基本用法、数据绑定、指令、计算属性、条件与列表渲染、组件化开发、事件处理、表单输入绑定、路由管理和状态管理等多个方面的内容。文中还介绍了如何使用Vue CLI进行项目的初始化和配置，最后通过一个简单的待办事项应用实战项目来巩固理论知识。适合人群：对前端开发感兴趣的新手开发者。使用场景及目标：适合刚接触Vue的新手，通过本文学习Vue的基本概念和实际应用，为将来开发大型SPA打好基础。阅读建议：本文循序渐进地介绍了Vue的各个知识点，建议读者边看边做实验，通过动手实践加深理解和记忆。

个人毕设基于SpringBoot+Vue的前后端分离的在线考试系统源码(学生、教师、管理员)+sql数据库+项目说明.zip 【1】项目代码完整且功能都验证ok，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通，帮助解答。【2】项目主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。【3】项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。【4】如果基础还行，或热爱钻研，可基于此项目进行二次开发，DIY其他不同功能，欢迎交流学习。【备注】项目下载解压后，项目名字和项目路径不要用中文，否则可能会出现解析不了的错误，建议解压重命名为英文名字后再运行！有问题私信沟通，祝顺利！ 1. 项目描述 1. 此项目为一个基于Vue的前后端分离的在线考试系统项目 2. 使用了 Vue 全家桶+ES5ES6ES7+Webpack 等前端新技术 3. 后端基于SpringBoot搭建SSM框架 4. 包括学生端、教师端和管理员端 5. 采用模块化、组件化、工程化的模式开发 6. 教师端和管理员端基于[vue-element-admin模板] 2. 能从此项目中学到什么? 2.1 项目开发流程及开发方法 1. 熟悉一个项目的开发流程 2. 学会组件化、模块化、工程化的开发模式 3. 掌握使用 vue-cli 脚手架初始化 Vue.js 项目 4. 学会模拟 json 后端数据，实现前后端分离开发 5. 学会 ES5ES6ES7+eslint 的开发方式 6. 掌握一些项目优化技巧 7. 掌握WebSocket实时在线通信 2.2 Vue 插件或第三方库 1. 学会使用 vue-router 开发单页应用 2. 学会使用 axios/vue-resource 与后端进行数据交互 3. 学会使用 vuex 管理应用组件状态 4. 学会使用基于Vue的插件，如vue-seamless-scroll实现无缝滚动，v-viewer实现图片预览，ly-tab实现触摸滑动并具有回弹效果等 5. 学会使用 mint-ui、muse-ui和element-ui 组件库构建界面 6. 学会使用 mockjs 模拟后台数据接口 7. 学会通过API接口与后端进行交互 8. 学会通过第三方平台七牛云进行图片的存取 3. 运行项目 **onlineexam-system-backend文件夹：** 1. 导入onlineexam.sql数据库文件，并修改src/main/resources/application.properties配置文件连接MySQL数据库正确的用户名和密码 2. 在IntelliJ IDEA中运行OesApplication启动类

毕设新项目基于SpringBoot+Vue的web网页版聊天室系统完整源码+项目说明+数据库（含前端+后端）.zip 【1】项目代码完整且功能都验证ok，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通，帮助解答。【2】项目主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。【3】项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。【4】如果基础还行，或热爱钻研，可基于此项目进行二次开发，DIY其他不同功能，欢迎交流学习。【备注】项目下载解压后，项目名字和项目路径不要用中文，否则可能会出现解析不了的错误，建议解压重命名为英文名字后再运行！有问题私信沟通，祝顺利！微言聊天室是基于前后端分离，采用SpringBoot+Vue框架开发的网页版聊天室。使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理，以WebSocket+Socket.js+Stomp.js实现消息的发送与接收，监听。搭建FastDFS文件服务器用于保存图片，使用EasyExcel导出数据，使用Vue.js结合Element UI进行显示弹窗和数据表格分页等功能，以及整个系统的界面进行UI设计，并且使用MyBatis结合数据库MySQL进行开发。最后使用了Nginx进行部署前后端分离项目。功能实现：群聊，单聊，邮件发送，emoji表情发送，图片发送，用户管理，群聊记录管理，Excel的导出。项目技术栈 #后端技术栈 1. Spring Boot 2. Spring Security 3. MyBatis 4. MySQL 5. WebSocket 6. RabbitMQ 7. Redis #前端技术栈 1. Vue 2. ElementUI 3. axios 4. vue-router 5. Vuex 6. WebSocket 7. vue-cli4 ... 项目预览图客户端界面-群聊主界面 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201108163850583.png) 客户端界面-私聊界面 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020110816390059.png) 管理端界面-用户管理 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201108163906854.png) 管理端界面-群聊消息管理 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201108163912953.png) 部署流程 1. csdn下载项目到本地 2. 在本地 MySQL 中创建一个空的数据库 subtlechat，在该数据库中运行提供的数据库脚本subtlechat.sql,完成表的创建和数据的导入。 3. 提前准备好Redis，在项目中的mail模块的 application.yml 文件中，将 Redis 配置改为自己的。 4. 提前准备好RabbitMQ，在项目中的mail模块的 application.yml 文件中和web模块中的 application-dev.properties，将 RabbitMQ 的配置改为自己的。 5. 注册邮箱的授权码，在项目中的mail模块的 application.yml 文件中填入 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201108165225396.png) 6. 搭建fastdfs服务器，fastdfs-client.properties文件改成自己的。 7. 在 IntelliJ IDEA 中打开subtlechat项目，先启动 mail模块，再启动web模块。 8. 启动vue项目。

基于vue-element-admin和springboot搭建的管理后台项目开发脚手架源码+数据库+项目说明.zip 【1】项目代码完整且功能都验证ok，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通，帮助解答。【2】项目主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。【3】项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。【4】如果基础还行，或热爱钻研，可基于此项目进行二次开发，DIY其他不同功能，欢迎交流学习。【备注】项目下载解压后，项目名字和项目路径不要用中文，否则可能会出现解析不了的错误，建议解压重命名为英文名字后再运行！有问题私信沟通，祝顺利！一个基于Spring Boot和Vue的Web开发脚手架，整合和最基础的RBAC权限控制，包括：菜单权限、按钮权限、接口权限。 - 前端使用vue-cli，后端使用Spring Boot，两个全家桶强强联合。 - 用简单优雅的方式整合shiro - 使用Gradle持续构建特性，开发时修改java代码无需重启 - 使用vue-element-admin做前端模板，摆脱写jQuery的痛苦 - 多种灵活形式的前后端分离方式，包括开发阶段的前后端分离和部署的前后端分离请先安装好依赖的开发环境：Java8、Gradle、Node.js、vue-cli。我自己使用的是Gradle4.6，Node8.11.1，vue-cli 2.9.3，建议使用Intellij IDEA。 csdn下载项目到本地：解压重命名为biu 执行`_sql/biu.sql`导入mysql数据库打开IDEA，`File - Settings - Build Execution Deployment - Build Tools - Gradle`配置好本机Gradle的路径。打开IDEA，`File - Open`打开biu项目的路径，导入项目，弹出Gradle导入引导窗口的，按下一步就行，确定后项目开始初始化，过程有点慢，其实就是下载server模块中Gradle声明的项目依赖。下载好依赖后，我们还需要下载browser模块的依赖。在IDEA左下角打开一个Terminal命令行终端。`cd browser`然后`npm install`，等待依赖安装完成。然后再新建两个Terminal命令行终端，即一共建三个命令行终端。在第1个终端输入： ~~~ cd server gradle build --continuous ~~~ 启动gradle的持续构建在第2个终端输入： ~~~ cd server gradle bootRun ~~~ 启动spring boot。有时候由于持续构建没有编译好，会导致spring boot启动失败。多试几次就行。在第3个终端输入： ~~~ cd browser npm run dev ~~~ 启动spring boot。有时候由于持续构建没有编译好，会导致spring boot启动失败。多试几次就行。待三个终端都启动完成，在浏览器页面访问前端页面：`http://localhost:9527`，页面上的ajax请求会转发到java后台的`8888`端口。后端模块`server`由于使用了Gradle的持续构建，当我们编辑任何java代码时候，就会触发构建，spring boot会自动重新加载，无需我们自己手动重启。前端模块`browser`是用`vue-element-admin`这个脚手架来做的，改动代码也无需重启。更多详情请看：[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) ## 如何部署 **打包server模块：** ~~~ cd server gradle build ~~~ 然后上传到服务器，启动： ~~~ java -jar server.jar ~~~ **打包browser模块：** ~~~ cd browser npm run build:prod ~~~ 然后上传到服务器，实用`nginx`对外提供网页内容，以及将网页的ajax请求转发到`server.jar`的后台。以下参考的配置：网上找到的文章，基本上都不是基于Spring Boot的starter来整合的，所以代码量比较多，而且比较繁杂。其实shiro官方提供了starter，可以让我们优雅地把shiro整合到spring boot中。请看官网相

vue是一套用于构建用户界面的渐进式框架，本文通过实例给大家介绍了vue入门教程适用小白初学者，非常不错，具有参考借鉴价值，需要的朋友参考下吧

吴海洋的课程社区_NO_1

46

社区成员

229

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章