首先新建一個(gè)空的項(xiàng)目文件夾：yydpt_vue_base
圖1
然后用vscode開發(fā)此項(xiàng)目文件
圖2
因?yàn)榇隧?xiàng)目準(zhǔn)備用vue+webpack胸哥，
因此可以先安裝webpack這個(gè)項(xiàng)目打包工具稀拐，
以下是詳細(xì)步驟地址：
這里就不過多的解釋了拐邪，直接新建終端，然后在終端中輸入：npm init
如下圖：
圖3
圖片的左邊氮帐，也就是剛剛新建的空項(xiàng)目之中就多了一個(gè)package.json的文件嗅虏，而文件的初始內(nèi)容如下：
{
? "name": "yydpt_vue_base",
? "version": "1.0.0",
? "description": "",
? "main": "index.js",
? "scripts": {
? ? "test": "echo \"Error: no test specified\" && exit 1"
? },
? "author": "",
? "license": "ISC"
}
接著在終端中輸入：npm install vue@next
用來安裝最新穩(wěn)定版的vue框架，
圖4
就像圖4之中揪漩，終端輸入npm install vue@next之后旋恼，顯示安裝了最新穩(wěn)定版vue@3.2.33版本，并且在package.json文件中內(nèi)容對象之中
也加上了
? "dependencies": {
? ? "vue": "^3.2.33"
? }
dependencies 表示的發(fā)布環(huán)境需要的依賴項(xiàng)的屬性奄容，
還有一個(gè)是本地環(huán)境開發(fā)時(shí)候所所需要的依賴項(xiàng)放devDependencies這個(gè)屬性對象之中冰更，因?yàn)楝F(xiàn)在是在本地開發(fā)，因此我們自己在package.json中加上該屬性和vue昂勒，
如下圖：
圖5
而項(xiàng)目文件中也多出了node_modules文件夾和package-lock.json文件蜀细，
node_modules里面存放著項(xiàng)目中所需要的依賴項(xiàng)，而package-lock.json是用來鎖定安裝時(shí)的包的版本號戈盈；
接著在終端中輸入：npm install webpack
圖6
同樣將dependencies中的"webpack": "^5.72.0"放入到devDependencies中去奠衔；
然后在終端中輸入：npm install vue-cli 和 npm install webpack-dev-server；
同樣將下載的依賴也加入到devDependencies中去塘娶；
因?yàn)楝F(xiàn)在沒有對webpack進(jìn)行配置归斤，而webpack的默認(rèn)打包入口文件為src/index.js，
因此在項(xiàng)目根目錄新建一個(gè)src的文件夾刁岸，再在src文件夾下面新建一個(gè)index.js文件脏里；
這樣就完成了vue+webpack項(xiàng)目的基礎(chǔ)依賴項(xiàng)的安裝，后面會根據(jù)項(xiàng)目需求逐步完善相關(guān)依賴項(xiàng)和相關(guān)配置虹曙；
這篇文章先講到這里迫横，下篇文章繼續(xù)。
關(guān)注公眾號（月影WEB）酝碳，了解更多的前后端知識矾踱；
歡迎大家關(guān)注互相交流學(xué)習(xí)；
