windows环境下搭建Vue开发环境

叁歲伎倆 2021-09-20 07:10 568阅读 0赞

## windows环境搭建Vue开发环境 ##

**一、安装node.js**  
官网下载地址：[https://nodejs.org/en/。][https_nodejs.org_en]  
选择最新版本下载，并安装node。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]  
下图默认全部安装就可以。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]  
下图箭头所指处打上勾，自动安装必要的工具。  
点击Next等待安装完成。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]

**二、设置nodejs prefix（全局）和cache（缓存）路径**

1、在nodejs安装路径下，新建node\_global和node\_cache两个文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]  
安装完成后打开CMD,编辑指令node -v 查看版本号确认是否安装成功。  
如下安装成功版本号是v12.4.0。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]  
2、设置缓存文件夹

npm config set cache "E:\NodeJS\node_cache"

设置全局模块存放路径

npm config set prefix "E:\NodeJS\node_global"

如下图没有提示就是设置成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 5]  
设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\\vueProject\\nodejs\\node\_global里

**三、基于 Node.js 安装cnpm（淘宝镜像）**

npm install -g cnpm --registry=https://registry.npm.taobao.org

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 6]  
设置cnpm的环境变量，将下面路径添加到Path系统变量值里：`E:\NodeJS\node_global\node_modules\cnpm\bin`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 7]

**四、设置环境变量（非常重要）**

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径  
1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。  
2、修改系统变量PATH，变量值中加入E:\\NodeJS;E:\\NodeJS\\node\_global。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 8]  
3、新增用户变量NODE\_PATH

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 9]  
编辑完所有环境变量后，需要重启命令窗口才能生效。

**五、安装Vue**

cnpm install vue -g

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

**六、安装vue命令行工具，即vue-cli 脚手架**

cnpm install vue-cli -g

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

**七、新项目的创建**

1.打开存放新建项目的文件夹

打开开始菜单，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录  
![在这里插入图片描述][20190620093250720.png]

2.根据模版创建新项目

在当前目录下输入“vue init webpack-simple 项目名称（使用英文）”。

#先手动安装webpack（不然会很慢）
    	cnpm install webpack webpack-cli --save-dev	
        cnpm install webpack-dev-server@2.9.1				
        vue init webpack-simple mytest

下图全部回车即可，会自动填充默认参数。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 12]

3、安装工程依赖模块

定位到mytest的工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\\node\_module目录下，node\_module文件夹会被新建，而且根据package.json的配置下载该项目的modules

cd mytest
    cnpm install

4、运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。

cnpm run dev

![在这里插入图片描述][20190620094021953.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 13]  
**怎么修改项目默认监听端口呢？**  
编辑webpack.config.js文件，在如下图位置添加端口号port，open参数是是否立即打开浏览器并浏览当前项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 14]

**安装结束。**

[https_nodejs.org_en]: https://nodejs.org/en/%E3%80%82
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]: /images/20210726/13d0a3a7b7ec4ba4bf639bbc547fffc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]: /images/20210726/2007d59a043245fb8d1195fe7bfe644d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]: /images/20210726/365ff619ed2844309012492a6888a70c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]: /images/20210726/6986a42a22824516898798613c25f36f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]: /images/20210726/bd5fa48441144ef2bad9782ebe2d0bb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 5]: /images/20210726/49baf6856f6944fbba97798d02d5c03c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 6]: /images/20210726/30700955031446689b1162a520285175.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 7]: /images/20210726/b1dacf63a9b84daf9fa3bf2f1f991918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 8]: /images/20210726/4738f9ce65f0404f8bab2faa49a467a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 9]: /images/20210726/e246d6bf33c44f1dbb6e7549679095e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 10]: /images/20210726/e2c8ce47603c4b7095fdfeadc55f98ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 11]: /images/20210726/781a146bfaf142e5847a2f350b1862bf.png
[20190620093250720.png]: /images/20210726/e7831fbeeabd412192b83fe7ebeec664.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 12]: /images/20210726/e98dcd4e2c57418994adbd9d99e65761.png
[20190620094021953.png]: /images/20210726/39ce81fc1f90474b9d49f91150812260.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 13]: /images/20210726/e6560b9471cb440fbad2174242b4e834.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 14]: /images/20210726/19da909961c5463dbc45e048ae72cc00.png