整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript开发工具WebStorm使用教程:WebStorm项目

论在WebStorm 中做什么,都是在项目的上下文中执行的。WebStorm 中的项目是一个文件夹,其中包含您编辑的源代码、您使用的库和工具(例如,在node_modules子文件夹中)以及各种应用程序配置文件(例如,package.json或.eslintrc)。

WebStorm已更新至V2022.1,欢迎下载WebStorm最新版本试用:

点击获WebStorm官方正式版

在 WebStorm 中打开一个文件夹后,.idea子文件夹将添加到其中 WebStorm 存储其内部配置设置,例如项目代码样式或版本控制系统。

.idea目录中的所有设置文件都应置于版本控制之下,除了workspace.xml,它存储您的本地首选项。workspace.xml文件应被VCS标记为忽略。

WebStorm 不支持直接编辑远程主机上的文件。因此,要在 WebStorm 中使用远程源,需要下载它们,打开存储它们的文件夹,并将它们安排在 WebStorm 项目中,如从现有本地源创建项目中所述。要使本地和远程源保持同步,请使用“部署选项”对话框中的“将更改的文件自动上载到默认服务器”列表配置自动上载。

在项目之间切换

如果您同时打开了多个项目,您可以使用以下选项在它们之间切换:

  • 切换到下一个项目窗口:(Ctrl+Alt+]窗口|下一个项目窗口)
  • 切换到上一个项目窗口:(Ctrl+Alt+[窗口|上一个项目窗口)
  • 或者,打开窗口菜单并选择要切换到的项目。

重命名项目

  1. 右键单击项目的根文件夹并选择Refactor | 从上下文菜单重命名Shift+F6或按。
  2. 在打开的对话框中,选择重命名策略。
  3. 如果项目名称与其根文件夹的名称相同,请选择Rename directory。
  4. 如果项目名称与其根文件夹的名称不同,请选择Rename project。
    或者,选择文件 | 从主菜单重命名项目并在打开的对话框中输入项目的新名称。
    如果您的应用程序部署到远程服务器并且项目根文件夹映射到服务器根目录,也请选择此选项。
  5. 当然,您可以重命名根文件夹并相应地更新服务器配置中的映射。

将项目移动到另一个位置

  1. 在Project工具窗口Alt+1中,右键单击项目的根目录并选择Refactor | 移动目录( F6)。
  2. 在打开的对话框中,为项目指定一个新位置,然后单击Refactor。

更改项目的默认位置

在 WebStorm 中,您可以为项目指定默认父文件夹。当您打开项目时,WebStorm 将从该文件夹开始。每次创建新项目时也会建议使用此默认位置。

  1. 打开设置/首选项对话框 ( Ctrl+Alt+S) 并转到外观和行为 | 系统设置。
  2. 在默认目录字段中,指定要存储项目的文件夹的路径。
  3. 下次创建项目时,WebStorm 会建议指定目录作为新项目的父目录。

通过 VCS 共享项目设置

根据您的选择处理配置文件。修改项目设置并创建新的配置文件后,IDE 会在屏幕底部显示一条通知,提示您选择如何处理此项目中的配置文件:

  • 查看文件:查看已创建配置文件的列表并选择要置于版本控制之下的配置文件。之后,选定的文件将被安排添加到 VCS。
  • Always Add:静默计划在.idea目录中创建的所有配置文件以添加到 VCS(仅适用于当前项目)。
  • 不要再问:永远不要安排配置文件添加到 VCS;在您手动将它们添加到 VCS 之前,它们将具有未版本化状态(仅适用于当前项目)。

如果您在未选择任何选项的情况下关闭通知,则在创建新配置文件后它将再次出现。即使您重新启动 IDE,新文件也将进入该列表,直到您选择其中一个选项。

不可共享的配置文件列表

前端开发工具WebStorm 识别配置文件并将它们自动添加到忽略文件列表中。但是,如果您手动共享项目,我们建议您避免将这些文件和文件夹置于版本控制之下:

  • .idea/workspace.xml
  • .idea/usage.statistics.xml
  • .idea/字典文件夹
  • .idea/架子文件夹

将全局设置复制到项目级别

全局 (IDE) 设置与项目分开存储。这就是为什么这些设置不会通过版本控制与项目一起共享。

但是,可以将某些设置复制到项目级别。例如,您可以创建检查配置文件的副本,从代码完成和自动导入中排除的类和包的列表。如果这样做,IDE 会在.idea目录中创建相应的配置文件,您可以通过 VCS 与项目一起共享这些配置文件。

以上就是有关WebStorm项目的介绍,更多关于WebStorm价格信息可进入慧都官网查看。

WebStorm是一个针对JavaScript和相关技术的集成开发环境。像其他JetBrains IDE一样,它使你的开发体验更加愉快,使日常工作自动化,并帮助你轻松处理复杂的任务。

 用HTML怎么制作网页呢?静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ‍ ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的。

  一、网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

  二、网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

  三、网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

  四、网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

  五、网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。 其中: (1) html文件包含:其中index.html是首页、其他html为二级页面; (2) css文件包含:css全部页面样式,文字滚动, 图片放大等; (3) js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

渐进式JavaScript 框架

下一代web开发方式,更快,更轻,易维护,更多的原生支持

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

-----摘自Vue官网

1、创建项目demo1


需要注意2点:

(1)Vue cli位置是npm install -g @vue/cli 全局安装位置,通过设置这个位置,将不再从互联网上下载需要的安装包,进而为创建项目节约时间

(2)使用默认项目设置:建议取消默认的项目设置,以便为下面操作时候进行自定义选项。

2、自定义选择

3、选择需要安装的包

4、选择3.X

5、按照提示一路下一步

6、当提示Done,表示已经安装完成

7、启动测试

8、测试页面