spring boot + vue + element-ui全栈开发入门——windows开发环境
一、node.js开发环境
windows系统,去网站https://nodejs.org/en/download/,下载对应的安装程序,并安装Windows Installer (.msi)
接下来,开始配置环境变量。
1.配置“NODE_HOME”为:“D:\Program Files (x86)\nodejs”
我这里,node.js安装在“D:\Program Files (x86)\nodejs”目录下,这根据你的具体安装路径而设置。
2.配置“NODE_PATH”为: %NODE_HOME%\node_modules
这关系到使用npm的命令,如果配置错了,安装的node依赖的目录就不正确。
3.配置Path,追加 ;%NODE_HOME%\;%NODE_PATH%\; 这两项
4.检测环境
在CMD中输入 node -v 和 npm -v
如果出现版本号,则说明安装成功
我这里安装的node.js版本是6.11.4,npm的版本是5.6
二、Vue环境
1.安装cnpm淘宝镜像
参照https://npm.taobao.org/
在CMD中运行
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安装Vue脚手架
cnpm install -g webpack
cnpm install -g vue-cli
这里的“-g”是全局安装,其目的是为了构建vue项目
3.构建项目
假设我们要开发一个“后台管理”的项目,项目名称是“admin”
在CMD中运行命令:
vue init webpack admin
其中 语法为 : vue init webpack + 项目名
然后,一路回车:
这里,我没有开启ESLint,单元测试也暂不启用。
出现提示运行命令,就说明已经构建成功了。
npm install命令是:安装所需要的依赖;
npm run dev命令是:以开发模式启动项目;
npm run build命令是:以生产模式生成静态页面文件。
然后,进入文件夹,安装依赖:
cd admin cnpm install
最后运行
npm run dev 命令来启动项目
这时,提示打开浏览器,访问http://localhost:8080
ok,出现大大的“V”字就说明项目已经构建完毕了。
git代码地址:https://github.com/carter659/spring-boot-vue-element.git
如果你觉得我的博客对你有帮助,可以给我点儿打赏,左侧微信,右侧支付宝。
有可能就是你的一点打赏会让我的博客写的更好:)
相关文章
- Vue_(Router路由)-vue-router路由的基本用法
- Spring Data JPA 大纲归纳
- Spring MVC DispatcherServlet改造为 CSE RestServlet 常见问题汇编
- activiti自定义流程之Spring整合activiti-modeler5.16实例(五):流程定义列表
- spring boot: spring Aware的目的是为了让Bean获得Spring容器的服务
- Spring MVC报异常:org.springframework.web.util.NestedServletException: Request processing failed
- Spring Data操作Redis时,发现key值出现 xacxedx00x05tx00tb
- 项目ITP(四) javaweb http json 交互 in action (服务端 spring 手机端 提供各种工具类)勿喷!
- [Kotlin Spring boot] Enable automatically recompile for Spring boot project with devtool
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- spring boot @propertySource @importResource @Bean [六]
- spring cloud:搭建基于consul的服务提供者集群(spring cloud hoxton sr8 / spring boot 2.3.4)
- spring Boot打可执行的jar包
- Spring异常解决 java.lang.NullPointerException,配置spring管理hibernate时出错
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- 利用Spring随时随地获得Request和Session
- springboot+vue实现前后端分离之前端vue部分(spring boot 2.5.4/vue.js 3.2.4)
- spring @Order注解
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- 自定义 spring mvc 拦截器(近期项目需求实现)
- Spring多数据源分布式事务管理/springmvc+spring+atomikos[jta]+druid+mybatis
- spring boot + vue 前后端分离时间戳转换为 yyyy:MM:dd HH:mm:ss格式
- 毕业设计 Spring Boot的垃圾分类管理系统(含源码+论文)
- spring security执行流程图
- SpringMVC+Spring+Hibernate的小样例
- Vue中vue-i18n结合vant-ui实现国际化
- Spring的注解@Qualifier注解
- Spring Boot Test介绍
- 【java】Spring Boot --spring boot项目整合xxl-job