Vue.JS模块化-webpack安装，vueCLI3的搭建以及创建vueCLi3项目

1、webpack(web项目打包，模块打包工具)

1.1、概念

   本质上，webpack是一个用于现代JavaScript应用程序的模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图，这个依赖图对应到项目所需的成本。模块，并生成一个或多个约束，也就是说把项目中的每一块东西建立联系关系，做好依赖方便你去管理。（Vue依赖wbpack）

    总结：模块+打包

前端模块化：

• ES6之前想进行模块化开发必须借助其他工具
• webpack核心就是帮我们模块化开发，并且帮助我们维护依赖关系
• webpack不仅可以打包js文件，css、图片、json都可以打包成模块

1.2webpack安装

      注意：webpack需要依赖node环境，node中有一个npm工具，帮助我们管理node工具，也是我们需要使用的工具。（也就是说要想下载webpack必须先安装node，通过node里的npm工具来下载webpack ）

      node下载地址 ：https://nodejs.org/zh-cn/

(1)安装好node后，通过win+r快捷键打开cmd命令窗口，输入mode -v

出现如图所示就算安装成功了，14.17.4为版本号

（2）然后安装webpack

    在cmd 命令窗口中输入：nmp install webpack@5.47.0 -g (注：这里的5.47.0.指webpack的版本)

（3）webpack安装完成后，在cmd中输入 webpack -v ,查看版本 （安装时遇到让选yes/no时直接选yes就可以）

 

1.3、安装webpack之后，如果不习惯在cmd命令窗口中执行idea中所需的命令时也可在idea软件中直接输入命令

（1）在idea左下角找到Terminal->Local中写入之前的命令进行测试，如成功则出现下图

 （2）如不成功

 如果重启软件还不可以，直接重启电脑再执行所需要的命令

注：这里shell path所输入的 地址为你本机上cmd.exe所在的位置

2、vueCLI(脚手架)

2.1、vueCLI的简单介绍

注意：如使用vueCLI需升级webpack版本到5.47.0以上

2.2、脚手架使用前提

2.3、vueCLI3安装

安装vueCLI3命令：npm install  -g @vue/cli

安装完成后：vue -v 查看是否安装成功（安装的过车较慢，如不成功则可以用镜像进行安装）

3、vueCLI3创建项目

3.1、创建项目所前选择所要保存的位置（在idea中创建项目以及运行命令）

如当前位置不是想保存项目的位置，通过cd..(返回上一级目录)，cd+目录名（进入下一级目录/文件夹），来选择想要保存的位置

3.2、创建项目的过程

 （1）创建项目命令：vue create 项目名

创建的过程较慢，创建好名称后会出现下图所示：创建方式的选择：

最后一个是自行配置，前四个是已有的配置（有一些是之前配过的，系统会提供几个默认配置）

（2）选择配置的内容（空格选中，选择完成后摁Enter键进行下一步）

里面的内容按需求进行选择

基础配置至少需要勾选：第一个、第二个、第五个、第六个，其他初学时用不到

（3）选择vue.js的3.x版本

（4）路由的配置：y（history模式）

（5）第（3）步所选的配置文件放到哪：一般情况下选第二个

（6）当前所选择的配置是否要保存下来（也就是说是否要放在你第（1）步选择的配置里面）

（7）给保存的配置起一个名字

（8）项目创建完成后，进入到你创建的项目了：输入命令(npm run serve)启动项目

提示：如在上述创建项目过程中选择错误，通过快捷键：Ctrl+c结束创建，在从新创建项目