WebStorm 零起点搭建Vuejs项目 - 全程篇

WebStorm进行Vue.js项目的零起点、搭建、开发、浏览器测试

---

---

近几个月一来，一直在研究vuejs的高级用法，无意中发现自己用的开发工具，已经无法满足自己的开发需求，严重阻碍了开发进程。
索性抛弃了旧IDE，研究了一下webstorm这款新的编辑器。果然是事半功倍啊！

为了更好更有价值的给大家提供参考，这里我们零起点开始，说明 “如何使用WebStorm进行Vue.js项目的零起点、搭建、开发、测试？”

---

一、步骤讲解

1. 安装node.js （同时npm会跟随nodejs自动化安装）

2. npm安装（这里默认上一步已经共同安装OK）

3. npm 转 cnpm 安装（使用淘宝镜像）

   如下图所示: 这一步容易报错npm WARN版本问题：npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at leas t 2.1.6 to avoid a ······
   .
   解决办法： npm降配

   具体操作： cmd命令分别执行如下指令

     	npm install [email protected] -g
     	npm update -d
   

   代码运行成功之后，截图如下：
   

4. 上述报错解决之后，CMD再重新操作npm淘宝cnpm镜像，指令如下：
   npm install -g cnpm --registry=https://registry.npm.taobao.org

   验证安装成功？ 方法如下，CMD指令：cnpm -v
   

5. 安装 webpack（CMD指令如下）
   npm webpack -g

   cmd截图如下：

验证安装成功？ 方法如下，CMD指令：webpack -v

6. 全局安装 vue-cli（CMD指令如下）
   cnpm install vue-cli -g

   cmd截图如下：

验证安装成功？ 方法如下，CMD指令：vue -V 【-v字母V必须大写】

7. 安装软件： Git

8. 安装软件： WebStorm，

   设置软件使用权限，汉化等等（永久[查看方法]）

9. 修改相关配置，为下一步新建vue.js项目做最后的准备。

   打开WebStorm软件，更改配置参数：圈中的复选框（设置为非选中状态，如下图所示）
   

10. 新建vue项目 ，选择左侧边栏靠近底部的vue.js，默认路径不需要修改，只需要设置你的项目文件夹路径即可，enter回车

    之后进行项目命名、描述、作者等等的相关配置
    如：my53 ， 截图略
    .

11. 执行 Ctrl + E 或者 鼠标悬停package.json+单击右键并选择Show npm Scripts，然后 双击 选择 dev运行，演示项目

截图示下：

---

二、 浏览器演示效果：

---

三、附图 · 所有版本检测截图

---

相关文章阅读：

• WebStorm 2018 v1.5 安装教程 - 补丁激活篇

• WebStorm 开发工具 - 软件简介

• WebStorm 汉化教程 - 含汉化包

• WebStorm 零起点搭建Vuejs项目 - 全程篇

---

以上就是关于“ WebStorm 零起点搭建Vuejs项目 - 全程篇 ” 的全部内容。