一、安装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

6、设置苏宁镜像源

npm config set registry http://snpm.cnsuning.com/

参考资料：使用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

# 用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.htmlhttps://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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！