webStorm

image.png

官网

WS是jetbrains家族的一员,专门设计开发前端(包括nodejs),vue,react等框架完美使用,接入了node,npm,git,svn

当然这个不是免费的,可以使用30天,需要付费,不过可以下载到破解版的,汉化版的

刚下载的应该是白色的,可以百度看一下怎么换皮肤,毕竟黑色才是装逼必备

刚下的字体很小,可以在File/setting/Editor/Font里修改

常用按键
tab键 补齐标签
代码输入xx.log 加 tab键会变成console.log(xx)
ctrl+f 搜索
ctrl+r 搜索+替换
ctrl+shift+f 搜索文件
alt+f12 命令行
alt+/ 是注释

路径跳转

// 这些引入的代码,按住ctrl键,鼠标移到 form 后面的地址上
// 这个词会变成蓝色和下划线,这是点击一下这个词,会跳转到这个文件的地址
import router from './router'
// 组件也行
import HelloWorld from '../components/HelloWorld.vue'
// 但是webpack地址编译的不行
import HelloWorld from '@/components/HelloWorld.vue'

SVN
打开设置,搜索svn,设置下载好的svn.exe文件地址

image.png

把带有.svn关联的项目导入后,可以看到右上角会有几个图标,蓝色箭头就是更新,绿色打钩就是提交,时钟就是查看提交记录

image.png

Git
打开设置,搜索git,设置下载好的git.exe文件地址

image.png

把带有.git关联的项目导入后,可以看到右上角会有几个图标

image.png

蓝色箭头就是更新,绿色打钩就是提交,时钟就是查看提交记录,svn也一样,但git跟svn不同,svn点击绿色打钩就是提交服务器,git是提交本地仓库,想要提交到服务器,需要在文件栏右键整个项目的文件夹,如下图找到git/repository/push,才是真正的提交服务器

image.png

配置vue启动
在上上图的git旁边有个build:prod就是配置好的,如果没配置过就是Add Config...的按钮,直接点击会打开一个窗口,窗口的左上角有个加号,点击后出现一个下拉框,点击下拉框的Node.js,然后界面如下

image.png

点击上面圈好的加号,选择run npm script,会出现下面的框,在script下拉框可以看到几个命令,这几个命令就是WS工具读取文件夹里的pack.json里的所有命令,选择运行脚手架服务器的命令,一般是dev或者service,确定,应用,刚才的Add Config...会变成nodejs,旁边的灰色箭头会变成绿色的,然后点击箭头就可以启动脚手架了,就不用每次启动都alt+f12去写命令了

image.png

posted @ 2020-02-13 16:36  一个年轻淫  阅读(101)  评论(0编辑  收藏  举报