Vue开发环境搭建详细操作（Node&Cnpm&Vue）

目录

一、安装node.js

二、安装cnpm

三、安装Vue

四、常用命令

五、其他扩展信息

---

一、安装node.js

1、官网下载地址：Download | Node.js

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

设置缓存文件夹：npm config set cache "E:\Decuments\Npm-Repostitory\node_cache"

设置全局缓存路径：npm config set prefix "E:\Decuments\Npm-Repostitory\node_global"

二、安装cnpm

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

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

2、配置 npm 为淘宝镜像

     查看npm当前镜像源

npm get registry

      配置 npm 为淘宝镜像

npm config set registry https://registry.npm.taobao.org

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

三、安装Vue

1、通过cnpm安装vue

cnpm install vue -g

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

cnpm install vue-cli -g

3、根据模版进入对应的目录创建新项目

vue init webpack-simple mytest

4、初始化完成后的目录结构

5、安装工程依赖模块，进入到项目目录

cnpm install

6、运行该项目

cnpm run dev

---

四、常用命令

npm install //安装项目所需要的依赖

npm run dev //运行项目

npm run build //编译打包

npm prune //清除项目中不需要的插件

npm cache clean --force //清除缓存

webpack：模块打包机，它就是这样一个「工具集」，聚集了非常多的小工具，最终集合到一起，分析你的项目结构，打包以提供浏览器使用，这个就是node里面有个module，其中module.exports表示出水口，module.require表示依赖，表示入水口

vue-cli脚手架：生成uve项目模板

---

五、其他扩展信息

npm/npm镜像地址查看：

镜像地址查看

npm config get registry

npm镜像地址设置（淘宝镜像地址）：

npm config set registry https://registry.npm.taobao.org

npm镜像地址删除（恢复默认地址）：

npm config delete registry

cnpm安装：

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

cnpm卸载：

npm uninstall cnpm -g

---