Vue环境搭建

最新推荐文章于 2025-11-21 08:18:51 发布

原创最新推荐文章于 2025-11-21 08:18:51 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #npm #nodejs

Vue 专栏收录该内容

1 篇文章

订阅专栏

Vue环境搭建

全局安装：将依赖包安装在本机，对所有项目有效，全局安装会锁定一个依赖包的版本，该版本可能不适应某个项目。全局安装需要添加参数 -g。
本地安装：仅将依赖包安装在当前目录的node_modules目录中，仅对当前目录有效。

1、node.js下载并安装

官网下载
node.js已经集成了npm，所有不需要再进行安装。
npm原理：远程下载node.js需要的依赖js包

查看node.js存放的包位置：
```
npm config ls
```
修改node.js存放的包位置：
```
npm config set profix "文件路径"
```
安装cnpm代替npm下载镜像包：
```
npm install -g cnpm --registry=http://registry.npm.taobao.org
```
安装完成查看是否安装成功：cnpm -v

安装nrm来查看可以镜像：

npm install nrm -g

// 查看镜像地址，*标记的当前选择的镜像
nrm ls

//如下：
* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

// 切换使用的镜像
nrm use taobao

2、安装webpack

webpack依赖环境：node.js > npm

本地安装：

// 方式一
npm install --save-dev webpack 
// 方式二
cnpm install --save-dev webpack 
// 4.0以后版本需要安装webpack-cli
npm install --save-dev webpack-cli

全局安装：

// 方式一
npm install webpack -g 
// 方式二
cnpm install webpack -g 
// 指定安装版本@+版本号，不加就是安装最新版本
npm install webpack@3.6.0 -g

删除
==注意：==不能直接把依赖包删除，一定要先使用命令，再将残余的依赖包文件夹删除，如果不行请多执行几次。
```
npm  uninstall  webpack  -g
```

3、安装webpack-dev-server

webpack-dev-server开发服务器，它的功能可以实现热加载并自动刷新浏览器。

本地安装：

// 本地安装
npm install  webpack-dev-server@2.9.1  --save-dev

配置package.json：

{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.1"
  }
}

指令	说明
–inline	自动刷新
–hot	热加载
–port	指定端口
–open	自动在默认浏览器打开
–host	指定服务器ip，默认为127.0.0.1，对外发布写服务器ip