WebStorm进行Vue.js项目的零起点、搭建、开发、浏览器测试
近几个月一来,一直在研究vuejs的高级用法,无意中发现自己用的开发工具,已经无法满足自己的开发需求,严重阻碍了开发进程。
索性抛弃了旧IDE,研究了一下webstorm这款新的编辑器。果然是事半功倍啊!
为了更好更有价值的给大家提供参考,这里我们零起点开始,说明 “如何使用WebStorm进行Vue.js项目的零起点、搭建、开发、测试?”
一、步骤讲解
-
安装node.js (同时npm会跟随nodejs自动化安装)
-
npm安装(这里默认上一步已经共同安装OK)
-
npm 转 cnpm 安装(使用淘宝镜像)
如下图所示:
这一步容易报错npm WARN
版本问题:npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at leas t 2.1.6 to avoid a ······
.
解决办法:
npm降配具体操作:
cmd命令分别执行如下指令npm install npm@4.6.1 -g npm update -d
代码运行成功之后,截图如下:
-
上述报错解决之后,CMD再重新操作npm淘宝cnpm镜像,指令如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org
验证安装成功?
方法如下,CMD指令:cnpm -v
-
安装
webpack
(CMD指令如下)
npm webpack -g
cmd截图如下:
验证安装成功?
方法如下,CMD指令:webpack -v
-
全局安装
vue-cli
(CMD指令如下)
cnpm install vue-cli -g
cmd截图如下:
验证安装成功?
方法如下,CMD指令:vue -V
【-v字母V
必须大写】 -
安装软件:
Git
-
安装软件:
WebStorm
,设置软件使用权限,汉化等等(永久[查看方法])
-
修改相关配置,为下一步新建vue.js项目做最后的准备。
打开
WebStorm
软件,更改配置参数:圈中的复选框(设置为非选中状态
,如下图所示
)
-
新建vue项目
,选择左侧边栏靠近底部的vue.js
,默认路径不需要修改,只需要设置你的项目文件夹路径即可,enter回车之后进行项目命名、描述、作者等等的相关配置
如:my53 , 截图略
. -
执行
Ctrl + E
或者 鼠标悬停package.json+单击右键
并选择Show npm Scripts
,然后双击
选择dev
运行,演示项目
截图示下:
二、 浏览器演示效果:
三、附图 · 所有版本检测截图
相关文章阅读:
以上就是关于“ WebStorm 零起点搭建Vuejs项目 - 全程篇 ” 的全部内容。