1.windows下安装node.js vue

左手的ㄟ右手 2021-10-13 20:40 275阅读 0赞

**1.下载安装**

*  官网下载相应版本的包，然后一路next就可以了。

**2.检查是否安装成功**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDM4OTQy_size_16_color_FFFFFF_t_70][]

*  node -v： 输入node -v 显示node.js的版本说明已经安装成功。
 *  npm -v： 输入npm -v 显示npm版本说明node中自带的npm已经安装成功。
 *  npm的作用就是对node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西。

**3.环境配置**

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express \[-g\] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\\Users\\用户名\\AppData\\Roaming\\npm】路径中，占C盘空间。  
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\\Program Files\\nodejs】下创建两个文件夹【node\_global】及【node\_cache】

*  创建完两个空文件夹之后，打开cmd命令窗口，输入
 *  npm config set prefix "D:\\Program Files\\nodejs\\node\_global"
 *  npm config set cache "D:\\Program Files\\nodejs\\node\_cache"
 *  进入环境变量对话框，在【系统变量】下新建【NODE\_PATH】，输入【D:\\Program    Files\\nodejs\\node\_global\\node\_modules】，将【用户变量】下的【Path】修改为【D:\\Program Files\\nodejs\\node\_global】

**4.测试**

*  配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，
 *  输入如下命令进行模块的全局安装：

npm install express -g     # -g是全局安装的意思

*  安装完成后，可以看到express模块安装在刚才配置的全局模块路径的文件夹中，还可以看到express的版本。
 *  注意：如果安装时不加-g参数，则会安装在当前执行命令的文件夹下。

**5.查看npm的配置信息**

*  npm config list

**6.修改npm的镜像地址**

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

**7.检测镜像站是否可用**

*  npm config get registry

**8.检测是否可安装vue**

*  npm info vue

**9.安装vue**

*  npm install vue -g
 *  特别注意：安装软件时一定要加-g参数，不然就安装到C盘去了

**10.安装vue-router **

*  npm install vue-router -g

**11.安装vue-cli(脚手架)**

*  npm install vue-cli -g
 *  vue-cli工具中内置了模板包括webpack和webpack-simple，前者时比较复杂的专业项目。

**12.配置系统环境变量**

*  因为vue脚本在自定义的global目录下，不在path环境变量
 *  path：D:\\Program Files\\nodejs\\node\_global

**13.vue小demo搞一个**

*  **1.vue init webpack vue01**
    
     *  在当前路径下创建一个vue项目
     *  他的配置并不全放在根目录下的 webpack.config.js 中
 *  **2.cd vue01**
    
     *  进入项目
 *  **3.npm install **
 *  初始化项目，安装项目依赖。
 *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDM4OTQy_size_16_color_FFFFFF_t_70 1][]
 *  **可能会出错，缺啥装啥即可**
 *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDM4OTQy_size_16_color_FFFFFF_t_70 2][]
 *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDM4OTQy_size_16_color_FFFFFF_t_70 3][]
    
     *  fsevents是mac下用的，windows忽略即可
     *  如果是error错误: 
     *  npm update 
     *  npm install
     *  如果无法解决，请升级node版本
     *  **我是warn错误，我打算先忽略了，后续解决，不影响后续操作**
 *  **4.npm run dev**
    
     *  [http://localhost:8080/\#/][http_localhost_8080]
 *  **5.npm run build**
    
     *  生成静态文件，打开dist文件夹下新生成的index.html文件

参考链接：[https://www.cnblogs.com/zhouyu2017/p/6485265.html][https_www.cnblogs.com_zhouyu2017_p_6485265.html]

参考链接：[https://www.cnblogs.com/liluxiang/p/9592003.html][https_www.cnblogs.com_liluxiang_p_9592003.html]

参考链接：[https://blog.csdn.net/time888/article/details/79013036][https_blog.csdn.net_time888_article_details_79013036]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDM4OTQy_size_16_color_FFFFFF_t_70]: /images/20211013/92068d329e4942b8862f00061df6b089.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDM4OTQy_size_16_color_FFFFFF_t_70 1]: /images/20211013/88204c0b1130493d9618b5ffcb5f1035.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDM4OTQy_size_16_color_FFFFFF_t_70 2]: /images/20211013/93f7de6f882745f58930276312de116c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDM4OTQy_size_16_color_FFFFFF_t_70 3]: /images/20211013/81109fee4f4e472bb2a0953f27c3a297.png
[http_localhost_8080]: http://localhost:8080/#/
[https_www.cnblogs.com_zhouyu2017_p_6485265.html]: https://www.cnblogs.com/zhouyu2017/p/6485265.html
[https_www.cnblogs.com_liluxiang_p_9592003.html]: https://www.cnblogs.com/liluxiang/p/9592003.html
[https_blog.csdn.net_time888_article_details_79013036]: https://blog.csdn.net/time888/article/details/79013036