1.首先新建一個空的項目文件夾：【yydpt_vue2_base】
如下圖：
圖1
2.然后用【vscode】打開此項目文件
如下圖：
圖2
3.因為此項目準(zhǔn)備用【vue2+webpack】來進行前端開發(fā)，因此可以先安裝【webpack】這個項目打包工具；
以下是詳細步驟地址：
http://www.itdecent.cn/p/84583fe131dd
這里就不過多的解釋了，直接新建終端，然后在終端中輸入：【npm init】
然后會出現(xiàn) package name(打包工具名稱)、version(版本)、description(描述) 等等的包信息；
這里可以根據(jù)自己的項目來填寫，也可以直接按 【Enter】 默認(rèn)設(shè)置；
直到出現(xiàn) Is this ok?（yes），這是輸入 【yes】 之后點擊 【Enter】 項目文件夾里面就會出現(xiàn) package.json 文件了；
如下圖：
圖3
圖片的左邊，也就是剛剛新建的空項目之中就多了一個 package.json 的文件，而文件的初始內(nèi)容如下：
{
? "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的網(wǎng)站中目前寫的最新穩(wěn)定版本是：【2.6.14】
這個版本可以根據(jù)自己實際的情況去下載安裝就可以了；
如下圖：
圖4
就像圖4之中，終端輸入 npm install vue@2 之后，顯示安裝了 vue 的 2.7.0 版本，并且在 package.json 文件中內(nèi)容對象之中也加上了
? "dependencies": {
? ? "vue": "^2.7.0"
? }
【dependencies】： 表示的是發(fā)布環(huán)境需要的依賴項的屬性；
【devDependencies】：表示的是本地環(huán)境開發(fā)時候所所需要的依賴項放；
因為現(xiàn)在是在本地開發(fā)，因此需要在項目中的 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.因為現(xiàn)在沒有對 webpack 進行配置，而 webpack 的默認(rèn)打包入口文件為 【src/index.js】，因此在項目根目錄新建一個 src 的文件夾，再在 src 文件夾下面新建一個 index.js 文件；
如下圖：
圖9
這樣就完成了【vue2+webpack】項目的基礎(chǔ)依賴項的安裝，后面會根據(jù)項目需求逐步完善相關(guān)依賴項和相關(guān)配置；
這篇文章先講到這里，下篇文章繼續(xù)。
