【内网】WebStorm搭建Vue环境

这篇具有很好参考价值的文章主要介绍了【内网】WebStorm搭建Vue环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

安装node.js和npm

1、 Node.js和npm简介

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。
新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西。

2、下载Node.js

打开官网下载链接:https://nodejs.org/en/download/
【内网】WebStorm搭建Vue环境

3、安装Node.js

【内网】WebStorm搭建Vue环境
【内网】WebStorm搭建Vue环境

4、检查是否安装成功

在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口
【内网】WebStorm搭建Vue环境
安装完后的目录如下图所示:
【内网】WebStorm搭建Vue环境

5、环境配置(很重要!)

5.1、说明
这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。
例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图:
【内网】WebStorm搭建Vue环境创建完两个空文件夹之后,打开cmd命令窗口,输入:

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

【内网】WebStorm搭建Vue环境
5.2、设置环境变量
关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
【内网】WebStorm搭建Vue环境
进入环境变量对话框,在【系统变量】下新建【NODE_PATH】,输入【D:\Develop\nodejs\node_global\node_modules】,将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】
【内网】WebStorm搭建Vue环境
【内网】WebStorm搭建Vue环境
【内网】WebStorm搭建Vue环境
【内网】WebStorm搭建Vue环境

6、配置内网离线库

将两个配置文件.npmrc和.yarnrc放到“C:\用户\用户名”文件夹下即可在内网连接库加载依赖包

安装WebStorm并运行Vue项目

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

1、 安装WebStorm

官网地址: https://www.jetbrains.com/webstorm/download/#section=windows
【内网】WebStorm搭建Vue环境

下载之后双击进行安装
【内网】WebStorm搭建Vue环境

【内网】WebStorm搭建Vue环境
【内网】WebStorm搭建Vue环境【内网】WebStorm搭建Vue环境
【内网】WebStorm搭建Vue环境
根据自己的需要安装插件,点击 Start Using WebStorm
【内网】WebStorm搭建Vue环境

2、激活WebStorm

勾选 Evaluate for free, 点击 Evaluate ,进行免费使用
【内网】WebStorm搭建Vue环境
点击 New Project, 开启一个新的工程
【内网】WebStorm搭建Vue环境
【内网】WebStorm搭建Vue环境进入了 webstorm2020.2的主页面,如下图所示
【内网】WebStorm搭建Vue环境
点击 Help --> Register, 可以查看webstorm2020.2只有30天试用
【内网】WebStorm搭建Vue环境【内网】WebStorm搭建Vue环境

3、下载破解包

参考教程:http://www.520rj.com/xiazai/jetbrains-eval-reset.html
破解包下载地址:http://www.520rj.com/download/4084_1.html
破解包解压后,新建个空项目,界面如图,通常可以直接把ide-eval-resetter-*.zip补丁包拖进IDE的窗口来进行插件的安装(如下图)。如果无法拖动安装,你可以在Settings/Preferences… -> Plugins 里手动安装插件(Install Plugin From Disk…
【内网】WebStorm搭建Vue环境
等几秒钟插件就会安装好了,安装好右下角会出现提示,点击Eval Reset
在以下对话框中勾选 Auto reset before per restart,点击Reset
【内网】WebStorm搭建Vue环境
点击yes,进行webstorm软件重启
【内网】WebStorm搭建Vue环境
也可以手动唤出插件的主界面:
如果IDE没有打开项目,在Welcome界面点击菜单:Get Help -> Eval Reset
如果IDE打开了项目,点击菜单:Help -> Eval Reset
【内网】WebStorm搭建Vue环境
【内网】WebStorm搭建Vue环境
唤出的插件主界面中包含了一些显示信息,2个按钮,1个勾选项:
按钮:Reload 用来刷新界面上的显示信息。
按钮:Reset 点击会询问是否重置试用信息并重启IDE。选择Yes则执行重置操作并重启IDE生效,选择No则什么也不做。(此为手动重置方式)
勾选项:Auto reset before per restart 如果勾选了,则自勾选后每次重启/退出IDE时会自动重置试用信息,你无需做额外的事情。(此为自动重置方式)

4、创建Vue新项目

【内网】WebStorm搭建Vue环境
【内网】WebStorm搭建Vue环境
项目名一定不要有大写,要不然就提示:

Sorry, name can no longer contain capital letters 抱歉,名称不能再包含大写字母

名称不能有大写字母,驼峰命名含有大写字母也不可以,换成小写的就好了
【内网】WebStorm搭建Vue环境
等待完成就可以
【内网】WebStorm搭建Vue环境

5、测试Vue项目

点击package.json的绿色箭头或者直接点击右上角的箭头
【内网】WebStorm搭建Vue环境
运行完毕后,直接点击控制台中的网址就可以跳转到相应的网站
【内网】WebStorm搭建Vue环境

6、汉化

在网上寻找了汉化包recource_cn.jar将webstorm lib目录下的recource_en.jar进行替换之后,发现很多功能都无法使用了,所以最后还是放弃了汉化文章来源地址https://www.toymoban.com/news/detail-424286.html

到了这里,关于【内网】WebStorm搭建Vue环境的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue之路由及Node.js环境搭建(一起探索新事物)

    目录 ​编辑 前言 一、Vue之路由 1.路由简介 1.1 什么是路由 1.2 什么是SPA 1.3 SPA的实现思路 1.4 使用路由的优势 2. 案例演示 2.1 导入所需的js文件 2.2 编写案例代码(模拟页面跳转) 二、Vue之node.js 1. node.js简介 1.1 什么是node.js 1.2 node.js的特点 1.3 什么是npm 1.4 npm的作用及重要性

    2024年02月07日
    浏览(37)
  • Node.js的安装与环境的搭建(详细版)

    npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包 vue-cli: 用户生成Vue工程模板(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装

    2024年02月05日
    浏览(37)
  • Vue的路由使用,Node.js下载安装及环境配置教程 (超级详细)

    前言: 今天我们来讲解关于Vue的路由使用,Node.js下载安装及环境配置教程 首先我们Vue的路由使用,必须要导入官方的依赖的。 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 https://www.bootcdn.cn/ 路由思路 1、引入路由的js依赖 2、定义组件内容用来显示网页中的内容 3、定义

    2024年02月07日
    浏览(60)
  • 【搭建node.js环境详细介绍】

    Node.js 是一个基于 Chrome V8 引擎的[ JavaScript 运行环境], Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。 Node.js 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与 PHP 、 Python 、 Perl 、 Ruby 等服务端语言平起平坐的脚本语言, nodejs 让 javascript 不再局限于放在

    2024年01月25日
    浏览(55)
  • 疯狂Node.js服务器篇:使用VsCode搭建Node.js开发环境

    疯狂Node.js服务器篇:使用VsCode搭建Node.js开发环境 Node.js作为一种流行的服务器端JavaScript运行环境,提供了强大的功能和便捷的开发体验。在本篇文章中,我们将探索如何使用VsCode搭建Node.js开发环境,以便更高效地进行服务器端应用程序的开发。 步骤1:安装Node.js 首先,我们

    2024年02月08日
    浏览(66)
  • ruoyi-vue(若依前后端分离版本)环境搭建 用idea 安装redis 后端配置 配置node环境 前端配置

    1.在https://gitee.com/y_project/RuoYi-Vue下载源码并解压至本地文件 2.将sql文件下的两个sql文件导入数据库生成表  3.在E:eclipsespaceoneRuoYi-Vue-masterruoyi-adminsrcmainresourcesapplication-druid.yml修改数据库名和密码 4.在E:eclipsespaceoneRuoYi-Vue-masterruoyi-adminsrcmainresourcesapplication.yml配置red

    2024年04月14日
    浏览(48)
  • 华纳云:linux怎么搭建node.js开发环境

    搭建Node.js开发环境在Linux系统上非常简单,以下是一些基本步骤,以帮助您开始: 1. 安装Node.js: 您可以通过包管理器来安装Node.js。不同的Linux发行版使用不同的包管理器。以下是一些常见的Linux发行版和它们的包管理器: Ubuntu/Debian: 使用apt包管理器。 sudo apt update sudo apt

    2024年02月07日
    浏览(42)
  • 使用VsCode搭建Node.js服务器开发环境

    使用VsCode搭建Node.js服务器开发环境 在进行Node.js服务器开发时,一个好的集成开发环境可以帮助您更快地编写代码,并且提高程序的效率。在此推荐安装配置VSCode作为Node.js服务器开发环境,下面介绍安装配置过程。 Step 1:下载安装VSCode 首先我们需要访问VSCode官网(https://c

    2024年02月15日
    浏览(55)
  • 【Node.js从基础到高级运用】二、搭建开发环境

    在上一篇文章中,我们介绍了Node.js的基础概念。现在,我们将进入一个更实际的阶段——搭建Node.js的开发环境。这是每个Node.js开发者旅程中的第一步。接下来,我们将详细讨论如何安装Node.js和npm,以及如何使用版本管理工具来维护不同的Node.js版本。 Node.js的安装过程相当简

    2024年03月14日
    浏览(43)
  • Node.js——Node环境及nvm版本管理安装及使用

      Node.js是一种强大的服务器端开发平台,为构建高性能和可伸缩的应用程序提供了丰富的工具和库。在开始开发之前,你需要正确地安装和设置Node.js,以确保你的开发环境准备就绪。本文将指导你如何在不同操作系统上安装Node.js,并配置你的开发环境。我们还将介绍一些

    2024年02月07日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包