[零基础学习Vue2+webpack项目]的基础依赖项的安装详解（1）

1.首先新建一个空的项目文件夹：【yydpt_vue2_base】

如下图：

图1

2.然后用【vscode】打开此项目文件

如下图：

图2

3.因为此项目准备用【vue2+webpack】来进行前端开发，因此可以先安装【webpack】这个项目打包工具；

以下是详细步骤地址：

webpack安装步骤及文件

https://www.jianshu.com/p/84583fe131dd

这里就不过多的解释了，直接新建终端，然后在终端中输入：【npm init】

然后会出现 package name(打包工具名称)、version(版本)、description(描述) 等等的包信息；

这里可以根据自己的项目来填写，也可以直接按 【Enter】 默认设置；

直到出现 Is this ok?（yes），这是输入 【yes】 之后点击 【Enter】 项目文件夹里面就会出现 package.json 文件了；

如下图：

图3

图片的左边，也就是刚刚新建的空项目之中就多了一个 package.json 的文件，而文件的初始内容如下：

{

  "name": "yydpt_vue2_base",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

4.接着在终端中输入：【npm install vue@2】，安装的是vue2.7.0的版本

vue的网站中目前写的最新稳定版本是：【2.6.14】

这个版本可以根据自己实际的情况去下载安装就可以了；

如下图：

图4

就像图4之中，终端输入 npm install vue@2 之后，显示安装了 vue 的 2.7.0 版本，并且在 package.json 文件中内容对象之中也加上了

  "dependencies": {

    "vue": "^2.7.0"

  }

【dependencies】： 表示的是发布环境需要的依赖项的属性；

【devDependencies】：表示的是本地环境开发时候所所需要的依赖项放；

因为现在是在本地开发，因此需要在项目中的 package.json 中加上该属性和vue，

如下图：

图5

而项目文件中因为终端输入 npm install vue@2 之后多出了 node_modules 文件夹和 package-lock.json 文件，

【node_modules】：里面存放着项目中所需要的依赖项；

【package-lock.json】：是用来锁定安装时包的版本号；

5.接着在终端中输入：【npm install webpack】

如下图：

图6

同样将 dependencies 中的 "webpack" : "^5.72.0" 放入到 devDependencies 中去；

6.然后在终端中输入：【npm install vue-cli】 和【npm install webpack-dev-server】 ；

【npm install vue-cli】：安装的是 2.9.6 的版本；

如下图：

图7

【npm install webpack-dev-server】：安装的是 4.9.3 的版本；

如下图：

图8

安装完【npm install vue-cli】 和【npm install webpack-dev-server】之后，同样将下载的依赖也加入到 devDependencies 中去；

7.因为现在没有对 webpack 进行配置，而 webpack 的默认打包入口文件为 【src/index.js】，因此在项目根目录新建一个 src 的文件夹，再在 src 文件夹下面新建一个 index.js 文件；

如下图：

图9

这样就完成了【vue2+webpack】项目的基础依赖项的安装，后面会根据项目需求逐步完善相关依赖项和相关配置；

这篇文章先讲到这里，下篇文章继续。