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】项目的基础依赖项的安装,后面会根据项目需求逐步完善相关依赖项和相关配置;
这篇文章先讲到这里,下篇文章继续。