安装Vue +webpack ,以及出现的问题d的解决

一时失言乱红尘 2024-04-19 16:20 89阅读 0赞

经历：一开始安装webpack  是成功的，后来，新建了一个项目开始安装webpack一直不成功，出现不了webpack -v这个东西。

# 1. 检查各种版本使用情况 #

npm -v

node -v

# 2. 配置镜像 #

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

# 3. 检查镜像是否配置成功 #

npm config ls

#  4. 安装cnpm #

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

# 5. 安装Vue #

[Vue 官网链接][Vue]

npm install vue

# 6. 安装Vue-cli 4 #

##  6.1 检查自己以前是否已经安装过Vue,已经安装过了，需要卸载，现在版本已经到4了 ##

vue -V

##  6.2 卸载Vue-cli ##

npm uninstall vue-cli -g

##  6.3 安装Vue-cli 4 ##

npm install @vue/cli -g

#  7. 安装 webpack  #

## 7.1 webpack 4.0 以后分成两部分了webpack+webpack-cli ##

npm install webpack -g

# 7.2 安装webpack-cli #

npm install webpack-cli –g

## 7.3 检查安装是否成功 ##

webpack -v

8.创建项目

vue create 项目名

# 9. 错误解决 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1amluZzFfMQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1amluZzFfMQ_size_16_color_FFFFFF_t_70 1][]

# 找到这个地址：C:\\\\Users\\\\Administrator\\\\AppData\\\\Roaming\\\\npm，然后配置环境变量 ，这样子就可以使用webpack -v #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1amluZzFfMQ_size_16_color_FFFFFF_t_70 2][]

特别说明，一开始的时候，我发现这个地址下没有webpack.cmd，说明没有安装成功，这个时候要打开 dos  的命令行

然后输入npm install webpack -g ，这个时候就会出现webpack.cmd 了，然后配置环境的话，就可以了。

[Vue]: https://cn.vuejs.org/v2/guide/installation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1amluZzFfMQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7b1b5e81d7c54c448b170fad6f982114.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1amluZzFfMQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e2aefd854ce848dbb8b08cecdaf240d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1amluZzFfMQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/87414244d6aa42f38a691bd2e719bfd3.png