Spring Boot+Vue从零开始搭建博客系统veblog(一):项目前端_vuejs环境搭建
前言
博主本身是一直从事Java后端开发,一直想独立开发一套完整前端和后端技术结合的项目来提升自己的技术水平,经过对业界的一些热点技术的了解并对技术栈选型考虑后,博主打算利用Vue.js
和Spring Boot
技术栈来开发一个属于自己的博客系统,等开发完成把自己平时遇到的技术分享出来。由于对前端技术不是太了解,所以想从零开始把开发的整个过程记录下来,第一篇文章就先把前端环境搭建起来再弄后面的。
安装node.js
- 进入Node.js官网:https://nodejs.org/en/,选择下载并安装Node.js。
2.验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。输入node -v
即可得到对应的Node.js版本。
npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm,输入npm -v
可得到npm的版本。
输入以下命令npm -g install npm
,更新npm至最新版本。
安装cnpm
执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
,使用npm的国内镜像(npm 国内镜像 https://npm.taobao.org/)cnpm 命令代替默认的npm命令,增加依赖包加载速度且避免资源限制。
cnpm安装脚手架vue-cli
在命令行中运行命令 cnpm install -g vue-cli
安装脚手架。
构建项目
将vue项目建在F盘的vue-workspace文件夹下,利用命令进入此目录。在cmd中输入盘符F:回车即可进入F盘,
然后执行命令进入F:\\workspaces\\vue-workspace路径目录下,
再输入新建项目命令 vue init webpack veblog-vue
,执行后会自动生成vue项目。
安装项目依赖
上面脚手架自动生成的vue项目不能直接运行,需要加载上项目需要的依赖包才能运行。通过在cmd中使用命令先定位到项目所在路径目录下F:\\workspaces\\vue-workspace\\javalsj-vue,然后输入命令 cnpm install
安装项目所需的依赖包资源。
(博主在下载第三方开源项目运行的时候,有时会遇到奇怪的报错,然后通过先执行cnpm rebuild node-sass,后执行cnpm install解决,此步骤不是必须的。)
运行项目
项目准备完毕后,现在可以运行vue初始项目看效果了。
在cmd中,注意需要使用命令先定位到F:\\workspaces\\vue-workspace\\javalsj-vue目录下,然后再输入命令npm run dev
来运行项目。
浏览器访问项目
项目运行成功后浏览器访问地址 http://localhost:8080 就可以查看效果啦。
备注
经过以上步骤完成了搭建vue的脚手架项目,可以简单看下项目目录,后续我们开发项目的时候只需在src目录下进行。
工欲善其事必先利其器,博主在开发Vue项目时,选择前端开发工具时试了Sublime Text
工具感觉不好用。然后问了一些朋友,经过尝试对比后最后还是选择了Webstom
(收费)、Visual Studio Code
(免费)工具作为前端开发工具,真心好用,开发工具下载官网地址:https://code.visualstudio.com/。
Spring Boot+Vue从零开始搭建博客系统veblog(一):项目前端_vuejs环境搭建相关推荐
- Spring Boot+Vue从零开始搭建系统(一):项目前端_Vuejs环境搭建
前言 博主本身是一直从事Java后端开发,一直想独立开发一套完整前端和后端技术结合的项目来提升自己的技术水平,经过对业界的一些热点技术的了解并对技术栈选型考虑后,博主打算利用Vue.js和Spring ...
- java基于ssm的个人博客系统_一个基于 Spring Boot 的开源免费博客系统
概况 mblog 开源免费的博客系统, Java 语言开发, 支持 mysql/h2 数据库, 采用 spring-boot.jpa.shiro.bootstrap 等流行框架开发.支持多用户, 支持 ...
- 服务器搭建博客(二):服务器LNMP环境搭建
文章目录 前言 安装Xshell 连接到服务器 安装宝塔面板 安装网站环境 前言 由于全部自己手动安装的话,还是比较麻烦的,我先也是自己手动配,遇到了不少问题,下一篇会总结一下,自己安装遇到的一些问题 ...
- 基于SpringBoot和Vue的个人博客系统
基于SpringBoot和Vue的个人博客系统 前言 本期项目分享一个漫威主题的炫酷博客系统,基于SpringBoot和Vue开发的前端分离项目.博客系统分为博客前台和博客后台两部分,游客可以访问 ...
- Spring Boot + vue-element 开发个人博客项目实战教程(四、数据库搭建和配置)
前言 java项目已经创建好了,接下来我们要准备数据库了,数据库是干嘛的相信大家都知道了,我在这就不说了,我们需要做的就是在电脑上安装mysql数据库. 附菜鸟教程的MySQL基础学习教程:https ...
- Spring Boot + vue-element 开发个人博客项目实战教程(一、项目介绍和规划)
⭐ 作者简介:码上言 ⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程 ⭐专栏内容:零基础学Java.个人博客系统 ⭐我的文档网站:http://xyhwh- ...
- Spring Boot + vue-element 开发个人博客项目实战教程(二十五、项目完善及扩展(前端部分))
⭐ 作者简介:码上言 ⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程 ⭐专栏内容:零基础学Java.个人博客系统 ⭐我的文档网站:http://xyhwh- ...
- Spring Boot + vue-element 开发个人博客项目实战教程(十三、文章标签功能实现)
⭐ 作者简介:码上言 ⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程 ⭐专栏内容:零基础学Java.个人博客系统 项目部署视频 https://www.bi ...
- 使用 ThinkJS + Vue.js 开发博客系统
编者注:ThinkJS 作为一款 Node.js 高性能企业级 Web 框架,收到了越来越多的用户的喜爱.今天我们请来了 ThinkJS 用户 @lscho 同学为我们分享他基于 ThinkJS 开发 ...
- 使用Pelican搭建博客系统
摘要 经过几天的折腾,用Pelican搭建的独立博客系统终于上线运行了.可以打开kamidox.com看一下效果图.由于选用了响应式网页设计的主题,所以在手机上的浏览效果也相当赞.本文介绍了Pelic ...
最新文章
- nginx实现web负载均衡
- U-net:实用图像分割、特征提取深度框架
- vue 页面闪烁的问题_vue页面加载闪烁问题的解决方法
- Visual Studio:error MSB8020
- [css] 请说说颜色中#F00的每一位分别表示什么?为什么会有三位和六位的表示呢?
- python selenium 用法 和 Chrome headless
- 在线人民币数字金额转成美元金额大写工具
- 南京理工大学本科毕业论文答辩PPT模板
- Python爬取 201865 条《隐秘的角落》弹幕,发现看剧不如爬山?
- uniapp换行符号_第15讲 : uni-app 组件 - 地图组件
- 0501 0503 模块区别_深圳兼容思科光模块市场
- C++日志操作开源函数库之Google-glog【Caffe源代码静态库封装--------关键错误点解决必备参考资料】
- token失效 判断access_微信怎么判断微信accesstoken是否过期
- 自步对比学习(Self-paced Contrastive Learning with Hybrid Memory for Domain Adaptive Object Re-ID)
- coursera-dl 报错 AttributeError (‘HTMLParser’ object has no attribute ‘unescape’)
- 计算机技术在我国的发展,计算机技术在我国热处理工业领域的应用和发展_阎承沛.pdf...
- 数据结构----复习题
- 反射调用目标异常可能原因之一解决java.lang.reflect.InvocationTargetException
- 微信小程序-实现上下、左右布局
- [附源码]Python计算机毕业设计SSM流浪猫狗救助站(程序+LW)
热门文章
- css3中的border-image用法
- PHP $_SERVER['PHP_SELF']、$_SERVER['SCRIPT_NAME'] 与 $_SERVER['REQUEST_URI'] 之间的区别
- SmartBear继SoapUI Pro 5 2之后推出新版本改名SoapUI NG Pro
- 应用安全-安全设备-Waf系列-软Waf-D盾
- Linux Windows 环境下 RabbitMQ 安装与基本配置
- php-fpm性能优化
- MQ发送的消息都到了死信队列中了
- 【语言学习】Java
- oracle apache服务占用80端口
- Nebula3渲染层: Graphics