2022Vue基于node.js(v14.16.0)版本搭建Vue脚手架环境的最全相关命令集合（避开各种坑）

一、什么是vue-cli

1、概念

vue-cli官方提供的一个脚手架（预先定义好的目录结构及基础代码），用于快速生成一个vue的项目模板。

2、主要功能

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

3、环境准备

Node.js(版本号：14.16.0)
git

4、node.js官网

node.js官网：node.js官网
（本文默认node.js安装成功且配置成功）

二、主要的命令（管理员运行命令，不然命令不能成功）

1、查看电脑安装Node.js是否成功

1.1 查看node.js的版本号

node -v

1.2 查看npm的版本号

npm -v

2、设置淘宝镜像源(解决npm速度慢的问题)

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

3、安装vue的脚手架（为项目开发做准备，搭建基础）

执行该项命令时，建议先上网搜索相关博主的建议或选项方案，然后自己判断自己所需要的，再选择相关选项。

npm install vue-cli -g

4、Webpack安装及使用（全局安装webpack以及webpack-cli）

这是我自己指定的版本，如果不是Node14版本的话，如果报错，建议上网找到指定版本的webpack或webpack-cli，然后下载就能成功了

npm install webpack@5.74.0 webpack-cli@4.10.0 -g

5、正式开始搭建项目

5.1 切换到目标文件夹（自己项目想放的地方）

cd D:\workspace\项目文件夹

5.2 初始化项目（项目名：vue-element）

vue init webpack vue-element

5.3 切换到项目文件夹

cd vue-element

5.4 下载vue-router（如果node14版本的下载vue-router4.xx版本的，运行会出现问题）

npm install vue-router@3.5.2 --save-dev

5.5 下载element-ui

npm i element-ui -S

5.6 下载sass

（1）首先修改sass安装的源，使用淘宝的npm（否则直接下载会失败）

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

（2）再下载node14所对应的指定版本的sass-loader和node-sass

npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev

5.7 安装模块到项目node_modules目录下。不会将模块依赖写入devDependencies或dependencies 节点。运行 npm install 初始化项目时不会下载模块。

npm install

5.8 安装axios

npm install axios -s

5.9 安装vuex（状态管理模式）

npm install vuex --save

5.10 运行该环境（来检验脚手架是否搭建成功）

npm run dev

这样一个完整的vue项目所需的依赖全部导入成功了