Vue系列之-nmp安装

小咪咪 2022-12-11 07:59 633阅读 0赞

### 1.nodejs下载地址 ###

[nodejs下载][nodejs]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center]  
安装过程没什么好描述的，傻瓜式安装即可。

### 2.nodejs检查 ###

1.  环境变量输出“echo %PATH%”  
    ![在这里插入图片描述][20200929163013792.png_pic_center]
2.  版本检查“node -v”  
    ![在这里插入图片描述][20200929163055915.png_pic_center]

### 3.环境配置 ###

npm config set prefix "D:\Program Files\nodejs\node_global"
    npm config set cache "D:\Program Files\nodejs\node_cache"

1.  本地仓库查看

npm list -global

![在这里插入图片描述][20200929164301147.png_pic_center]

1.  配置镜像站

npm config set registry=http://registry.npm.taobao.org

![在这里插入图片描述][20200929164347202.png_pic_center]

1.  查看所有配置信息

npm config list

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 1]

1.  查看本地文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 2]  
    ![在这里插入图片描述][2020092916505079.png_pic_center]
2.  检查镜像站是否可以使用

npm config get registry

![在这里插入图片描述][20200929165301883.png_pic_center]

1.  查看Vue信息

npm info vue

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 3]

1.  npm更新  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 4]
2.  查看npm 目录结构

npm list -global

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 5]

1.  增加环境变量NODE\_PATH

D:\Program Files\nodejs\node_global\node_modules

![在这里插入图片描述][20200929170930329.png_pic_center]

1.  测试npm 安装 vue.js  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 6]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 7]
2.  npm安装vue-router

npm install vue-router -g

![在这里插入图片描述][20200929171511872.png_pic_center]

1.  安装vue脚手架

npm install vue-cli -g

![在这里插入图片描述][20200929171609412.png_pic_center]

1.  添加环境变量  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 8]
2.  查看Vue 版本  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 9]

### 4.Vue项目部署 ###

1.  项目初始化

vue init webpack vue20200929

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 10]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 11]

1.  运行服务  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 12]
2.  页面展示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 13]  
    项目打包，目录结构

npm run build

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 14]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 15]

[nodejs]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c7e89bdca73644dd9727dc2d30521cff.png
[20200929163013792.png_pic_center]: /images/20221123/1b1b457de67c4538b8f2170a7c5e9718.png
[20200929163055915.png_pic_center]: /images/20221123/d053576f43e945c280138731adfbfeed.png
[20200929164301147.png_pic_center]: /images/20221123/404df315e4d74858abe5c74253988e86.png
[20200929164347202.png_pic_center]: /images/20221123/d6d9870d80b041dd83e97d1b1a14be21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/2389be97f17148cdb3247fb34726738f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/7076d4f2a71749f2b59d287b703951ac.png
[2020092916505079.png_pic_center]: /images/20221123/75c8472e885942b49fac654129015874.png
[20200929165301883.png_pic_center]: /images/20221123/7effa4dab0d8411cbf3f78962fa43837.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/0ad6d427e5634e6a93b9edd5452eaf43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/bf80a843ee044529b9a33221aa920b9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/11e7b61527994693b95e83b7fdd7dacc.png
[20200929170930329.png_pic_center]: /images/20221123/b5c6608967bb49588fbadd2ba5d835ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20200929171324986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/818c98332b2e4aa0a413abbda91a1ee5.png
[20200929171511872.png_pic_center]: /images/20221123/d01f901e480541779d7eacc3d4ed6d1d.png
[20200929171609412.png_pic_center]: /images/20221123/02fa333d0f0d465e96127fabbbc4c8e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/b978dc43612d4c8ab0158d558daac7b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/9460360076394783afb26f3c266dd02f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 10]: https://img-blog.csdnimg.cn/20200929173457610.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/27ba8ad7de7a4ac787d035725a2175a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/485496be3fde43a18e14dceabd9566e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/f70232cb06a44fedab58d7ac72615729.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/ee01c3fe93dd4afd96c88953bfcded59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaW5pY2hlbmRpYW4_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221123/982449b8828b48b789e53492a27c4d53.png