新手入门webstorm搭建vue项目的详细过程

本篇文章给大家带来的内容是关于新手入门webstorm搭建vue项目的详细过程,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

本文只针对新手。

首先要明白几个名词(概念)。

Node.js:

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 

立即学习“前端免费学习笔记(深入)”;

Node.js 的包管理器 npm,是全球最大的开源库生态系统。

npm:

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

npm的初衷:JavaScript开发人员更容易分享和重用代码。

npm的使用场景:

允许用户获取第三方包并使用。

允许用户将自己编写的包或命令行程序进行发布分享。

npm版本查询:npm -v

Webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

下面进入正题

首先现在webstorm,node.js

 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本.

1.下载安装包之后直接点击安装即可。测试安装成功的界面如下:

20180415203246556.png

2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像)

安装时间有点长

安装命令:npm install -g cnpm –registry=https://registry.npm.taobao.org

验证命令:cnpm -v

3.安装webpack

利用npm安装webpack 命令行语句为npm install webpack -g  。时间略长。测试安装成功的界面如下:

2345截图20180926161945.png

新手入门webstorm搭建vue项目的详细过程

4.接下来就是全局安装vue-cli。时间略长

安装语句为:npm install –global vue-cli

验证命令:vue -V (V要大写)

20180415205408126.png

5.下面开始使用WebStorm

重要的一点,想用WebStorm创建项目得安装git。 安装很简单,官网找到下载安装即可,否则可能出现安装不了的情况

20180415204935842.png

红色为新建的顺序,绿色为node.js地址(装好了会自动寻找),蓝色为vue.js包的地址,黄色为打包所用的打包模块

2345截图20180926162034.png

填写项目名,注意项目名中不能包含大写字母。

一直点下一步就可以了,项目结构

2345截图20180926162046.png

选中package.json 右键选择 show npm scripts

2345截图20180926162055.png

选择dev双击 即可进行测试。开启成功后会出现默认的端口,赞帖到浏览器中打开,出现下面页面就是成功啦。这样一个vue项目就创建成功了

2345截图20180926162104.png

以上就是新手入门webstorm搭建vue项目的详细过程的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2636100.html

(0)
上一篇 2025年3月7日 04:58:35
下一篇 2025年3月7日 04:58:41

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • WebStorm的入门使用介绍总结

    本篇文章给大家分享的是关于webstorm的入门使用介绍总结,内容有一定的参考价值,有需要的朋友可以看一下,希望对你有所帮助。 WebStorm建立在开源IntelliJ平台之上,JetBrains已经开发和完善了超过15年。其提供了统一的…

    编程技术 2025年3月7日
    200
  • webstrom 怎么创建react项目

    webstrom创建react项目的方法:首先安装webstorm和react.js;然后打开软件界面,在顶部导航栏,依次点击“File”-“New Project”-“React APP”;最后填写“项目工程名”等相关信息即可。 本教程操…

    2025年3月7日 编程技术
    200
  • webstorm怎样新建vue.js的项目

    webstorm新建vue.js项目的方法:首先安装git,并填写相关地址;然后填写项目名;接着选中【package.json】右键选择show npm scripts;最后选择dev双击即可进行测试。 本教程操作环境:windows7系统…

    2025年3月7日 编程技术
    200
  • webstorm搭建vue项目新手教程

    本文的目的是为首次使用webstorm搭建vue项目的新手介绍具体的搭建流程。 首先我们来介绍几个名词。 Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。  立即学习“前端免费学习笔…

    2025年3月7日 编程技术
    200
  • WebStorm2021如何安装?安装教程详解【附图】

    对于入门javascript 开发的者,最重要的就是安装webstorm软件,一款非常优秀的javascript工具,在互联网上查询目前还没有一篇写得比较详细的webstorm教程。今天分享webstorm2021.3.2版本的安装教程,从…

    2025年3月7日 编程技术
    200
  • – Nodejs 简介:它是什么、为什么需要它以及何时使用它

    node.js:后端开发的革命性工具 Node.js彻底改变了服务器端开发,让开发者能够在浏览器之外使用JavaScript。无论您是经验丰富的Web开发者还是编程新手,本文都将带您了解Node.js是什么、为什么如此流行以及何时应该使用它…

    2025年3月7日
    200
  • webstorm怎么运行jsp文件

    要在 WebStorm 中运行 JSP 文件:1. 将项目根目录标记为 Web 应用程序根目录。2. 创建 JSP 文件。3. 编写 JSP 代码。4. 配置 Tomcat 或其他服务器。5. 运行 JSP 文件。6. 在浏览器中验证文件运…

    2025年3月6日
    200
  • webstorm怎么写javaweb

    要在 WebStorm 中编写 Java Web:创建 Java EE Web 应用程序项目。配置 Web 模块。创建 Servlet。配置 Servlet。编写 Servlet 代码。配置 web.xml(可选,使用 @WebServle…

    2025年3月6日
    200
  • webstorm运行方法

    WebStorm 的运行方式因项目类型而异,需要选择不同类型的运行环境。核心包括自定义运行配置,包括环境变量、参数和启动脚本,以控制代码执行和调试。文章介绍了各种调试技巧,如断点、条件断点和表达式求值,以及常见的错误和优化技巧,帮助用户高效…

    2025年3月6日
    200
  • webstorm用什么语言写的

    WebStorm的核心是用Kotlin编写的,一种专注于简洁性和跨平台支持的静态类型编程语言。此外,它还使用了Java、JavaScript、TypeScript、Python、C#、VB.NET和Rust等语言,为Web开发人员提供全面的…

    2025年3月6日
    200

发表回复

登录后才能评论