[零基础学习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】项目的基础依赖项的安装,后面会根据项目需求逐步完善相关依赖项和相关配置;

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

你可能感兴趣的:([零基础学习Vue2+webpack项目]的基础依赖项的安装详解(1))