WebStorm创建第一个vue项目

我会带着你远行 2022-03-24 14:50 898阅读 0赞

最近几天最折腾vue的项目  ！  刚开始懵懵懂懂   后来搞清楚了  就出个教程吧！ 很基础啊

先你得[下载node.js][node.js] (Windows)

安装node.js     安装路径我默认安装在C盘

*  ## 安装node ##

随便贴几张图    都是下一步下一步的操作！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 2][]

安装成功！

我们可以检测一下是否安装成功  以及版本！

> 打开cmd    输入node -v

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 3][]

ok   没有什么问题 ！

*  ## 配置全局安装路径和缓存 ##

现在配置全局模块的安装路径到`node-global`文件夹，npm缓存到`npm-cache`文件夹

默认是会在C盘  我们给它换成其他盘

我是在D:\\Nodejs目录下创建了node\_cache和node\_global文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 4][]

打开一个cmd 窗口    输入命令

> npm config set prefix "D:\\Nodejs\\node\_global"
> 
> npm config set cache "D:\\Nodejs\\node\_cache"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 5][]

设置好了  我们去配置环境变量！

*  ## 配置node的环境变量 ##

在系统变量里新增NODE\_PATH 值为刚刚设置node\_global路径  加一级node\_modules目录（会自动创建）下载的全局东西会放这里面！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 6][]

在用户变量的Path  点击编辑！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 7][]

改成我们刚刚配置的node\_global路径！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 8][]

*  ## 下载安装Vue相关的全局配置 ##

**安装cnpm**

我们来安装一下**cnpm**

主要是为了cnpm 替代 npm

访问外网比较慢，我们使用淘宝的镜像 [https://npm.taobao.org/][https_npm.taobao.org]

> 打开命令终端 npm install -g cnpm --registry=[https://registry.npm.taobao.org][https_registry.npm.taobao.org]

这里用的是Git Bash（相信大家都装好了Git）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 9][]  
回车之后，我就可以可以快乐的用 cnpm 替代 npm（npm安装node就会有的）（-g 是安装在全局文件夹中！也就是在我们的node\_global目录下）

**我们现在用cnpm 安装vue-cli **

> 输入命令 cnpm install -g vue-cli

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 10][]

ok（其实已经差不多了  但是我们得安装一个webpack   得会就知道为什么了！先安装！）

**安装webpack**

> 输入命令 cnpm install -g webpack

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 11][]

（这图有点长  没截完！） 安装成功！

*  ## 使用WebStorm创建Vue项目！ ##

一切大功告成！打开我们的WebStorm右键新建一个项目!

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 12][]

（不报错就直接跳过）如果创建会报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 13][]

> 创建时还是报错：
> 
> Error: Can not install ‘ij-rpc-client': npm ERR! Unexpected end of JSON input…
> 
> 解决：cmd下全局安装 ij-rpc-client包：npm install ij-rpc-client -g
> 
> （重启一下webstorm）然后创建，输入项目名称，一步步配置就ok了

输入项目名称！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 14][]

项目描述

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 15][]

项目的作者

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 16][]

选择运行和编译

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 17][]

是否安装官方路由  （按照自己的实际情况来）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 18][]

是否使用ESLint管理代码  ，ESLint是个管理代码风格的工具 统一代码风格  在多人协作的项目都会用到！

新手就不用了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 19][]

单元测试和e2e测试 根据个人爱好

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 20][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 21][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 22][]

创建好后  项目结构就是这样了！（其他东西我都屏蔽了！）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 23][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 24][]

左侧栏有个npm 双击dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 25][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 26][]

输入localhost:8080就可以访问到了啦！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 27][]

[node.js]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70]: /images/20220323/a8e084a983ee46f39a89f5804f1a059b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 1]: /images/20220323/8ec67d228ce345e5997a74fdc3246180.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 2]: /images/20220323/28189a48daa048c5ad0a4b00ae15f110.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 3]: /images/20220323/b8e2955e9fb74d2b993de56a69ffc939.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 4]: /images/20220323/e7a3afb4185a4f31902c5703a35d625b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 5]: /images/20220323/9b7f9195f0a14217821e085630d37fca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 6]: /images/20220323/7c97bf29728a4fc9a4b5496768469a73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 7]: /images/20220323/eaa23114ef154a67831504634e05b6cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 8]: /images/20220323/006f3f90eb414e21a07bad4449b79734.png
[https_npm.taobao.org]: https://npm.taobao.org/
[https_registry.npm.taobao.org]: https://registry.npm.taobao.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 9]: /images/20220323/f8ab8ad4637144539493045242942485.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 10]: /images/20220323/2ceed74164f747c79a500f60429df175.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 11]: /images/20220323/a7a658a911f0453a8dabbbc35e882d28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 12]: /images/20220323/fa5b975d85cd4c2fbed33f5150484aa8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 13]: /images/20220323/bb90ca4e06ce457785bff4d03d9ed6f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 14]: /images/20220323/a2202f4d4d944515bce7360c05a0297e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 15]: /images/20220323/3d5b7763cbee47dfa5826c6e9a132222.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 16]: /images/20220323/5decf3c556df4cd2bb4250cb6eb14ce7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 17]: /images/20220323/a6cec30711bd42358e55bfc682357c74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 18]: /images/20220323/77dd308968a44b069ef5ebd9224edc8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 19]: /images/20220323/6073b9f1a46744a0ba5f5b89d099a87b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 20]: /images/20220323/96236341b05a4d958e7dbe56856b8bc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 21]: /images/20220323/ca12c7fff450455dadaced6d226b5733.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 22]: /images/20220323/d41cbe507029461399a7e69bf30cf15f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20190122123642924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 24]: /images/20220323/ebdeaf0e2c2f48fc99ba11669c8950f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 25]: /images/20220323/368f58ec7188444098d17d7544ec14e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 26]: /images/20220323/5003ca9889a8469490be50bbd0781254.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzUwNzA2_size_16_color_FFFFFF_t_70 27]: /images/20220323/36cd0b5d21864c138aae3a4269511b63.png