首页 > 编程知识 正文

webstorm怎么创建js,webstorm运行nodejs

时间:2023-05-06 20:51:54 阅读:279442 作者:1524

一、背景

在这里vue我就不详细介绍了,你们可以参考他的官方网站,上面有详细的模型,这里我主要研究了下怎么使用脚手架去创建我们的项目结构,如果那里讲的不到位了,欢迎大家批评指正,我会在第一时间去更正的,废话不多说了,开始我们的学习吧。

二、环境准备

1.node.js:其实就是JavaScript 运行环境,可以通过它的官网进行下载安装,地址:https://nodejs.org/en/。

2.webStorm:安装就是傻瓜式安装,很简单的。

3.git安装:我们通过脚手架的方式下载我们的代码模板,必须也少不了我们的git环境,如果没有它,我们的项目会有问题的。

三、具体步骤

1.cmd命令,执行node -v,出现下面的界面,代表安装成功,我安装的是最新版本的。

2.然后接着执行npm -v,npm:npm全称为Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。

3.接着执行npm install webpack -g,webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。按照上面的步骤一步一步来。别急我在前方等你哈。

4.执行完3步骤再次执行webpack -v,就证明成功了。

5.全局安装vue-cli,命令npm install --global vue-cli,安装完成之后就可以进行验证了,vue -V

四、下载我们的项目

1.执行命令npm install vue-cli -g(注意这时候就用到了git环境了,我是在e盘建立了一个webstormworkspace目录,在这个目录里面右键Git Bash Here(如果你的没有这个环境你就没有装git了,需要去安装下git环境),最后再去执行命令npm install vue-cli -g),如果还不清楚的留言,我会给你们解答。

2.执行命令:vue init webpack myproject,然后填写完之后,就可以静静的等待它下载了。

2.1.具体代表:

2.1.1.Project name (myproject);项目名称(myproject)。(确定按enter,否按N) 

2.1.2.Project description (A Vue.js project);项目描述(一vue.js项目)。(用英文,不写直接回车也行) 

2.1.3.Author (sunsanfeng);作者(sunsanfeng)。(确定按enter,否按N) 

2.1.4.Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render

functions are required elsewhere;VUE文件渲染功能是必需的其他地方。(按enter) 

2.1.5.Install vue-router? (Y/n);安装的路由?(/ N)。(可安可不安,建议安装,因为项目肯定能用上) 

2.1.6.Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/ N)。(使用ESLint语法,除非你非常懂ESLint语法,要不就会处处报错,之前不明白的时候选择过一次,总之很烦,建议N) 

2.1.7.Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / N)。(选N) 

2.1.8.Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / N)。(选N)

2.1.9.should we run 'npm install' for you after the ogject has been created? ;(选择Yes,use NPM)

3.你可以直接进入项目去运行,浏览器去访问,也可以通过webstorm去打开生成的文件夹

4.结果(直接在cmd中打开的效果)浏览器访问:http://localhost:8080

五、通过webstrom打开

1.打开你的项目所在地,我的是刚刚打开git的目录,即:webstormworkspace目录,里面会生成一个叫myproject目录。

2.然后去运行项目,看下面的地址:http://localhost:8080,然后去浏览器访问,跟上面的效果是一样的。

3.结果和上面的是一样的,简简单单的入门,希望能帮到你们。

六、结束

Always keep the faith!!!

 

快三大小单双位技巧准确率99enter) 

2.1.5.Install vue-router? (Y/n);安装的路由?(/ N)。(可安可不安,建议安装,因为项目肯定能用上) 

2.1.6.Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/ N)。(使用ESLint语法,除非你非常懂ESLint语法,要不就会处处报错,之前不明白的时候选择过一次,总之很烦,建议N) 

2.1.7.Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / N)。(选N) 

2.1.8.Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / N)。(选N)

2.1.9.should we run 'npm install' for you after the ogject has been created? ;(选择Yes,use NPM)

3.你可以直接进入项目去运行,浏览器去访问,也可以通过webstorm去打开生成的文件夹

4.结果(直接在cmd中打开的效果)浏览器访问:http://localhost:8080

五、通过webstrom打开

1.打开你的项目所在地,我的是刚刚打开git的目录,即:webstormworkspace目录,里面会生成一个叫myproject目录。

2.然后去运行项目,看下面的地址:http://localhost:8080,然后去浏览器访问,跟上面的效果是一样的。

3.结果和上面的是一样的,简简单单的入门,希望能帮到你们。

六、结束

Always keep the faith!!!

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。