vue环境搭建（新手，手把手教程）包教包会

1.安装node.js

1.1安装包下载

安装包已经在百度云中了==》node-v12.9.0-x64.msi

链接：https://pan.baidu.com/s/1Ja0FgAnjhYrvpzxMZxRTAA 
提取码：6gbd 

也可以去官网下载https://nodejs.org/en/ 

1.2运行msi文件

我存在E盘下nodejs文件夹下

1.3设置nodejs prefix（全局）和cache（缓存）路径

①在nodejs安装路径下，新建node_global和node_cache两个文件夹

②设置缓存文件夹

进入到Windows dos界面，进入nodejs文件夹目录下。执行下方命令

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

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

1.4 基于 Node.js 安装cnpm（淘宝镜像）

说明：由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue。淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

进入到Windows dos界面，进入nodejs文件夹目录下。执行下方命令

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

1.5 设置环境变量（非常重要，方便以后使用）

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

①鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

②修改系统变量PATH

③新增系统变量NODE_PATH

温馨提示：

记得点击保存，否则环境变量无法生效。

另外dos界面需要关闭重新开启，全局变量方可生效！

2.安装VUE

2.1 安装vue框架

进入到Windows dos界面，执行下方命令

cnpm install vue -g

2.2 安装vue命令行工具，即vue-cli 脚手架

进入到Windows dos界面，执行下方命令

cnpm install vue-cli -g

3.新项目的创建

3.1 新建文件夹

在E盘新建一个文件夹名为vueProject

3.2 新建命令

进入到Windows dos界面，进入到vueProject文件夹目录下，执行下方命令

vue init webpack mytest

新建项目后效果图

其中文件夹功能说明

3.3 安装工程依赖模块

进入到Windows dos界面，进入到vueProject/mytest文件夹目录下，执行下方命令

cnpm install

4.运行项目、测试

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

 

4.1启动项目

进入到Windows dos界面，进入到vueProject/mytest文件夹目录下，执行下方命令

cnpm run dev

4.2 启动成功

表示服务器等待连接

4.3 测试连接

 

 

觉得本文章对您有帮助，那么可以选择打赏。
打赏多少，您高兴就行，谢谢您对我的支持！ ~(@^_^@)~

             微信扫一扫