一、安装nodejs

建议大家下载zip压缩包，解压到F:盘，然后命名成nodejs

Win10 64位操作系统：https://nodejs.org/dist/v16.13.1/node-v16.13.1-win-x64.zip

在nodejs安装目录下新建立node_global、node_cache文件夹。

二、设置环境变量

三、检查是否安装成功

打开cmd窗口。运行node -v，npm -v 两个命令，如下图示表示安装成功

四、设置cache和global目录

在cmd终端里执行以下命令

npm config set prefix "F:\nodejs\node_global"
npm config set cache "F:\nodejs\node_cache"

五、设置淘宝镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。
npm更改为淘宝镜像的方法

1、命令行临时使用指定镜像

npm --registry https://registry.npmmirror.com install express

2、永久使用指定镜像

npm config set registry https://registry.npmmirror.com

3、使用cnpm

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

4、查看npm源地址设置

npm config get registry

5、如果需要解除镜像并恢复到官方源，请执行以下命令：

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

参考资料：使用阿里云npm镜像加速：https://developer.aliyun.com/article/919782

六、安装VUE

npm i -g vue-cli 或者 npm install -g @vue/cli

测试是否安装成功：

vue -V //注意：-V是大写的V，不是小写的v

Microsoft Windows [版本 10.0.17134.1304]
(c) 2018 Microsoft Corporation。保留所有权利。
C:\Users\18056822>vue -V
2.9.6
C:\Users\18056822>

七、安装webpack

安装Webpack前的准备工作：

1. 由于webpack执行打包压缩时依赖nodeJS，先确保你的系统安装了nodeJS 5.0.0及以上的版本。

2. 因为npm是nodeJS 平台默认的包管理工具，这里用npm安装webpack。

Webpack有两种安装方式：

1、全局安装：安装Webpack到全局后，可以在任何地方共用一个Webpack可执行文件，而不用各个项目重复安装。

2、局部安装：（推荐）安装到某个项目中，可防止不同项目依赖不同版本的 Webpack 而导致冲突。

1、全局安装

# --install：安装 | 简写：i

# --global: 全局 | 简写：-g

# 安装最新版本

npm i -g webpack

# 安装指定版本

npm i -g webpack@

如果你使用 webpack 4+ 版本，还需要安装 webpack-cli（webpack）：

npm i -g webpack-cli

以上命令如果运行后报错：

Error: Cannot find module 'webpack-cli/package.json'

解决方案：全局安装webpack-cli

npm i -g webpack-cli

查看版本，验证安装成功：

webpack -v

2、局部安装Webpack到项目

1）、创建一个新的本地项目目录名为webpack-learning，如图：

2）、进入webpack-learning目录，创建package.json文件：

# 从当前目录中提取的信息生成默认的package.json

npm init -y

# 或

npm init --yes

出现一串文本表示执行成功：

E:\vue-learning>npm init -y
Wrote to E:\vue-learning\package.json:
{
  "name": "vue-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2）、在项目中安装webpack

# 要安装最新版本或特定版本，请运行以下命令之一：

# --save-dev: 安装到项目的依赖中 | 简写：-D

# 安装最新版本

npm i -D webpack 或者 npm install --save-dev webpack

# 安装指定版本

npm i -D webpack@ 或者 npm install --save-dev webpack@

3）、安装成功后，打开package.json文件查看 webpack 是否已经安装，并且查看 webpack 安装的版本。

由于 webpack 4.x 以上将命令相关的内容都放到了 webpack-cli，所以还需要安装 webpack-cli。

4）、安装 webpack-cli

# 不要忘记webpack4.+开始webpack-cli是必备的哦

npm i -D webpack-cli 或者 npm install --save-dev webpack-cli

在package.json文件中，devDependencies中能够看到webpack-cli的版本信息。

5）、验证成功我们可以进入项目的node_modules/.bin/webpack访问webpack的bin版本

# 查看webpack版本

node_modules/.bin/webpack -v

# 查看webpack-cli版本

node_modules/.bin/webpack-cli -v

因为是局部安装，要进入依赖包执行webpack的命令才有效，否则会被认为命令无效。或者，使用 npm 包执行器 npx 可以自动找到对应的包执行命令（一般安装了npm会自动安装npx），有了这个工具，执行局部的webpack命令就没有那么冗长了。

npx webpack -v

3、webpack和webpack-cli的卸载

1）、webpack-cli卸载

webpack4.x开始官方文档是说要安装cli所以如果的在用4.+就需要卸载cli

npm uninstall -g webpack-cli

# 注释给我这种小白提供参考

# 卸载 uninstall 可以简写成 un

# 全局 -g 的完整写法是 --global

# 现在问题来了这样真的卸载了webpack-cli吗？

# 答案是没有。到现在为止我还没有发现那个webpack-cli是全局安装的，至少官方文档没看到。

# 那就看下面怎么删除局部webpack-cli

删除本地（局部）webpack-cli

npm uninstall webpack-cli

# 仔细看你会发现去掉全局参数 -g

# 这时候你的命令行会快速滚动一些删除信息。

# webpack-cli删除成功

2）、webpack卸载

删除全局webpack

npm uninstall -g webpack

# 这个注释还是给小白看的

# 为什么要局部全局删除webpack

# 因为你可能在安装webpack时不确定自己是全局安装

# 还是本地安装，所以建议先执行全局删除命令

# 然后在执行下面的本地删除命令

删除本地webpack

npm un webpack

# 这时候小白的webpack是删除完成了

# 还没完看下面怎么说

3）、检查webpack残余文件

# 用ls命令查看一下是否有这几个文件

# node_modules

# package-lock.json

# package.json

# 有是最好的，如果没有那你可能还没找到自己本地安装webpack的准确位置

# 有时候我也找不到了

# 现在说有的事

rm -rf node_modules package-lock.json package.json

# 上面这行命令是删除这些文件的意思

# 同学你的webpack 彻底删除干净了

# 但是小白一定要好好去了解一下 rm 和 rm -rf 的区别，在这里我不科普怕说错。

4、webpack版本信息查看

npm view webpack versions

C:\Users\18056822>npm view webpack versions

[
  '0.1.0',          '0.1.1',          '0.1.2',          '0.1.3',
  '0.1.4',          '0.1.5',          '0.1.6',          '0.2.0',
  '0.2.1',          '0.2.2',          '0.2.3',          '0.2.4',
  '0.2.6',          '0.2.7',          '0.2.8',          '0.3.0',
  '0.3.1',          '0.3.2',          '0.3.3',          '0.3.4',
  '0.3.6',          '0.3.7',          '0.3.8',          '0.3.9',
  '0.3.10',         '0.3.11',         '0.3.12',         '0.3.13',
  '0.3.14',         '0.3.15',         '0.3.16',         '0.3.17',
  '0.3.18',         '0.3.19',         '0.3.20',         '0.4.0',
]

参考资料：

https://blog.csdn.net/u013408061/article/details/88238592
https://www.cnblogs.com/hi-gdl/p/15716091.html
https://blog.csdn.net/gdlzk/article/details/121876802
https://www.cnblogs.com/lee90/p/9156478.html https://www.cnblogs.com/yuanchaoyong/p/12612402.html

八、安装 TypeScript

全局安装：

Microsoft Windows [版本 10.0.17134.1304]
(c) 2018 Microsoft Corporation。保留所有权利。
C:\Users\18056822>npm install -g typescript
added 1 package, and audited 2 packages in 8s
found 0 vulnerabilities
C:\Users\18056822>tsc -V
Version 4.5.4
C:\Users\18056822>

九、yarn安装

### 下载yarn

npm install --global yarn

### 下载依赖

## yarn install

### 编译/运行

## yarn build

## yarn serve

九、VUE前端工程化

https://www.jianshu.com/p/cdacf6996c35

https://blog.csdn.net/qq_45206551/article/details/105753451

https://zhuanlan.zhihu.com/p/348570007

https://www.zhihu.com/column/c_1338557711341277185

https://zhuanlan.zhihu.com/p/348570007

https://www.cnblogs.com/lichking2017/p/9048557.html

十、VUE视频教程

https://learning.dcloud.io/#/

十一、VUE目录简介

build：项目构建(webpack)相关代码

config：配置目录，包括端口号等

node_modules：npm加载的项目依赖块

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets: 放置一些图片，如logo等

components：该目录里存放的我们的开发文件组件，主要的开发文件都存放在这里了

App.vue：项目入口文件

main.js：项目的核心文件

router：路由配置目录

static：放置一些静态资源文件

test：初始测试目录，可删除

.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

index.html：首页入口文件

package.json：项目配置文件

README.md：项目的说明文档，markdown 格式

十二、QA

1、npm WARN config global --global, --local are deprecated. Use --location=global instead.
解决办法：
1)、找到npm安装目录下的npm.cmd
2)、将npm.cmd中的"prefix -g"修改为"prefix --location=global",保存

2、'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。如图：

解决办法：

第一步：将node_module文件夹删除（如果没有则直接第二步）

第二步：在后台运行npm install(可简写为npm i )

npm install

//或者 npm i

这里出现警告不影响使用，只要没有红色的报错就可以啦

运行成功后，成功创建出新的node_modules文件夹

第三步：可以使用 npm run serve运行vue-cli创建的项目

npm run serve

3、Property 'XX' does not exist on type 'Element | Element[] | Vue | Vue[]'

解决办法(以el-select为例)：

参考资料：

vue中elementUi的el-select同时获取value和label的三种方https://blog.csdn.net/PJL13411055804/article/details/127612662

解决Vue+TypeScript开发中TS不识别this.$refs的问题：

https://blog.csdn.net/ZD717822023/article/details/107226585/

https://juejin.cn/post/6844904167870300173

VUE开发环境搭建

一、安装nodejs

二、设置环境变量

三、检查是否安装成功

四、设置cache和global目录

五、设置淘宝镜像

六、安装VUE

七、安装webpack

1、全局安装

2、局部安装Webpack到项目

3、webpack和webpack-cli的卸载

4、webpack版本信息查看

八、安装 TypeScript

九、yarn安装

九、VUE前端工程化

十、VUE视频教程

十一、VUE目录简介

十二、QA

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

VUE开发环境搭建

一、安装nodejs

二、设置环境变量

三、检查是否安装成功

四、设置cache和global目录

五、设置淘宝镜像

六、安装VUE

七、安装webpack

1、全局安装

2、局部安装Webpack到项目

3、webpack和webpack-cli的卸载

4、webpack版本信息查看

八、安装 TypeScript

九、yarn安装

九、VUE前端工程化

十、VUE视频教程

十一、VUE目录简介

十二、QA

热门文章

最新文章

相关课程

相关电子书