首页 > 编程语言 >Java项目前端开发环境部署

Java项目前端开发环境部署

时间:2023-03-07 12:55:54浏览次数:46  
标签:npm node vue Java cnpm 部署 set 安装 前端开发

前端开发环境部署

1、安装VSCode https://code.visualstudio.com/Download

2、node.js和npm安装 http://nodejs.cn/download/
(1)安装完成后,cmd输入node -v和npm -v检查是否安装成功。
(2)设置npm全局安装路径与缓存路径
npm config set prefix "nodejs安装路径\node_global"
npm config set cache "nodejs安装路径\node_cache"

3、cnpm安装
很多npm包下载很慢,为了提高npm包下载速度,需要安装cnpm,即淘宝镜像
(1)npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)输入cnpm -v检查是否安装成功。
(3)配置系统环境变量
CNPM_PATH  nodejs安装路径\node_global\
PATH  添加变量 %CNPM_PATH%
(4)再次查看cnpm是否可用,发现不行还需set-ExecutionPolicy
解决使用 PowerShell 不能运行 cnpm 等命令的问题
a、在powershell中执行 Start-Process powershell -Verb runAs 会提示授权,并以管理员身份运行powershell
b、输入如下命令:set-ExecutionPolicy RemoteSigned
c、根据提示,输入:A

4、安装vue-cli脚手架
cnpm install -g @vue/cli

5、初始化项目
vue create vue-project
选择Default ([Vue 2] babel, eslint) ,回车
使用Visual Studio Code打开目录vue-project

6、运行项目
在vue-project目录中运行命令安装依赖
cnpm install
运行
cnpm run serve
运行结果为
   DONE Compiled successfully
   App running at:
   - Local:   http://localhost:8080/
   - Network: http://192.168.0.100:8080/
浏览器中输入 http://localhost:8080/ ,即可访问新创建的项目,项目环境已经搭建成功

标签:npm,node,vue,Java,cnpm,部署,set,安装,前端开发
From: https://www.cnblogs.com/publiter/p/17187677.html

相关文章

  • 设计模式-javascript实现【状态模式】
    定义:允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。其主要原理是将状态封装成独立的类,并将请求委托给当前的状态对象,当对象内部状态变化时,会......
  • JavaScript 其他样式操作的属性
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; back......
  • JavaScript 添加删除表格记录练习
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <metahttp-equiv="Content-Type"content="text/html......
  • JavaScript 使用DOM操作CSS
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; back......
  • JavaScript 读取元素的样式
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; back......
  • JavaScript核心功能之模块的导入导出
    一、模块的概念模块是将JavaScript程序拆分为可按需导入的单独模块的机制。 二、如何创建模块模块是定义在单独的.js文件中的。 三、export导出模块的两种方式1、将expo......
  • JavaScript核心功能之模块命名冲突的解决方式
    避免模块命名冲突的三种解决方式方式一:使用as重命名导出与导入在你的import和export语句的大括号中,可以使用as关键字跟一个新的名字,来改变你在顶级模块中将要使用的功......
  • JavaScript核心功能之模块的应用
    应用模块到你的HTML脚本中的两种方式: 方式一:将type="module"放到<script>标签中,来声明这个脚本是一个模块<scripttype="module"src="main.js"></script>方式二:将模块......
  • Linux/Centos Mondo 一键部署、镜像恢复,快速部署
    一.环境准备 (1) 镜像机要能上网,因为需要从网上装所需的包,没有网络的话,需要的软件包也早下载好了,可以离线安装,离线安装比较费事,尽量有网比较好 (2) 镜像机磁盘不要用......
  • java mac安装java程序
    目录javamac安装java程序安装包下载安装javamac安装java程序mac和windows的安装包下载地址类似安装包下载https://www.oracle.com/technetwork/java/javase/download......