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

手机游戏开发者 · 2024-9-9 18:56:51

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）

所属分类: 问答交流

新帖推荐: 30日

推荐作品