vue 进阶学习（二）：node.js、npm、webpack、vue-cli

node.js、npm、webpack、vue-cli

前言：主要对插件的描述，安装，卸载、使用以及注意点

1 node.js

1. 说明：是一个基于 Chrome V8 引擎的 JavaScript 运行环境，即运行时建立的一个平台，是运行在服务端的 JavaScript；相当于 java 体系中对应的 jdk；也可以使用 node.js 可以单独用来编写 javascript。
2. 安装：安装的方式很多种，可以从官网获取安装包；node.js 中文官网下载链接
3. 查看版本：node -v；安装之后可以通过查看版本看是否安装成功。

2. npm

1. 说明：包管理工具，相当于 maven 中的包依赖管理，解决包依赖问题，可以从 npm 服务器下载别人的包使用，也可以将自己的包上传到 npm 服务器供别人使用；
2. 安装：无需手动安装，node.js 中已经集成了 npm；
3. 查看版本：npm -v
4. 升级更新：npm install npm -g，如果版本不兼容，需要升级版本
5. 使用 npm 命令安装模块
   • 安装命令：npm install
   • 查看所有版本号：npm view versions --json
   • 全局和本地安装区别：本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g 而已
   • 如果要安装指定的版本，使用@拼接，如 npm install webpack@5.35.1 -g
   • 卸载命令：npm uninstall

3. webpack 静态模块打包器

1. 说明：是基于 nodejs 实现的，是一款前端模块加载器兼工程化打包工具，是一种模块化的解决方案，相当于 maven 中工程自动化，能够把各种资源作为模块来处理和使用，主要作用打包、压缩、合并、按序加载
2. 安装：npm install webpack webpack-cli --save-dev （两个模块同时一起安装）
3. 检查安装是否成功：webpack -v

4. vue-cli

1. 说明：基于 Vue.js 进行快速开发的完整系统，实现的交互式的项目脚手架。
2. 安装：
   • 2.0 版本：npm install -g vue-cli
   • 3.0 版本：npm install -g @vue/cli（保证 node 版本>=8.9）
3. 查看安装是否成功(版本)：vue -V 或者 vue --version
4. 卸载：npm uninstall -g vue-cli
5. 基于 vue-cli3.0 搭建项目，网上教程挺多的，就不写了；命令：vue create 项目名称

vue3.0 是没有 webpack 配置文件的，vue3.0 自己封装了 webpack 的配置；我们只需要在根目录创建 vue.config.js 文件，即可对 webpack 进行配置