Windows 环境下vue+webpack前端开发环境搭建

 

 

一、开发环境搭建

1、前端框架一般依赖node.js，我们首先要安装node.js.

访问 Node.js 官方网站：https://nodejs.org/ 下载安装。

# 查看安装是否成功
node -v

1、由于网络原因，有时需要配置国内镜像源：
# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com/

# 恢复官方镜像
npm config set registry https://registry.npmjs.org/

# 查看当前配置
npm config list

# 查看镜像地址
npm config get registry

2 配置全局安装路径
默认情况下，全局包安装在【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。，可以自定义路径：
# 创建全局安装目录
mkdir D:\develop-software\NodeJS\global_modules
mkdir D:\develop-software\NodeJS\global_cache

# 配置 npm
npm config set prefix "D:\develop-software\NodeJS\global_modules"
npm config set cache "D:\develop-software\NodeJS\global_cache"

# 将路径添加到系统 PATH
# 1. 右键"此电脑" > "属性" > "高级系统设置"
# 2. 点击"环境变量"
# 3. 在"系统变量"中找到"Path"，点击"编辑"
# 4. 添加新路径：D:\develop-software\NodeJS\global_modules

环境变量配置: “我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
确保以下路径在系统 PATH 中：
D:\develop-software\NodeJS\install (Node.js安装目录)。

 

2、由于许多npm 的源都在国外的地址，安装起来特别慢，所以我们这里利用淘宝的镜像服务器。

 

# 安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

 

 

3、接着安装全局的vue-cli脚手架，用于帮助你快速搭建所需的Vue的开发模板框架
$ cnpm install -g vue-cli 回车，等待安装,

安装完成后，可以输入vue -v 然后回车，如果出现vue客户端版本号，则说明成功的安装了vue

4、用npm安装webpack
cnpm install webpack -g
此时webpack已经安装到了全局环境下，可以通过命令webpack -h试试.

 

5、在一个目录下新建一个vuepro文件夹，cd到该目录下，然后输入命令：

vue init webpack vue-test   (项目名称:vue-test)
启动调试，顺序输入下列命令：
cd vue-test
npm install(如果已经安装了npm此条命令不必输入)

如果已经执行npm install 初始化的vue项目下回多出一个依赖文件夹

npm run dev

 

启动成功，打开浏览器：

 

 

---

 

大概解释下每个文件夹代表的含义: