如何使用vue搭建腳手架，nodejs如何進(jìn)行拉包處理，簡(jiǎn)述如何基于webpack創(chuàng)建項(xiàng)目模板
版權(quán)聲明：本文為CSDN博主「NanQiao1716」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/NanQiao1716/article/details/104495173
重要的事要說三遍，比如我們搭建項(xiàng)目中的文件代表什么含義，##關(guān)注查看搭建項(xiàng)目生成文件的含義基于vue搭建項(xiàng)目和基于webpack搭建項(xiàng)目的含義##點(diǎn)擊鏈接查看
1.首先我們要先進(jìn)入nodejs官網(wǎng)下載nodejs程序包
—下載鏈接：官網(wǎng)鏈接
安裝nodejs之前簡(jiǎn)單了解一下什么是nodejs點(diǎn)擊查看
2.選擇自己熟悉的磁盤，建議安裝在除c盤之外的磁盤（便于管理，不易與本地系統(tǒng)文件混淆）
—在這里我選擇安裝的是D盤（D:\node）并在node文件下新建一個(gè)Nodejs文件又來存儲(chǔ)nodejs程序）
3.配置nodejs的變量環(huán)境
- 1.粘貼復(fù)制你安裝nodejs程序的文件夾
- 2.進(jìn)入Windows系統(tǒng)
-
3.將粘貼的路徑復(fù)制到path目錄中
image.png
4.打開cmd命令行輸入node -v查看nodejs版本號(hào),輸入npm -v 查看npm版本號(hào)
5.使用npm進(jìn)行拉包，用于搭建vue腳手架便于項(xiàng)目開發(fā)
- 1.node > 8.9 Node版本必須要大于8.9，不然創(chuàng)建搭建vue項(xiàng)目會(huì)出現(xiàn)不可描述的意思
- 2.如果之前已經(jīng)安裝過舊版本（非3.x）腳手架，需先卸載舊版本:
- 3.npm uninstall vue-cli -g 卸載舊版本
-
4.npm install -g@vue/cli 安裝腳手架，用于生成項(xiàng)目
image.png
5.npm install -g@vue/cli-service-global 快速原型開發(fā) 編譯.vue文件（常用與開發(fā)大型項(xiàng)目）
查看vue-cli 版本: vue --version或Vue -V
后面的步驟跟之前拉取npm install -g@vue/cli 和npm install -g@vue/cli-service-global的過程一樣的，小博就不敘述了，復(fù)制粘貼代碼執(zhí)行就OK
如果仍然需要使用舊版本的vue init功能,可以全局安裝一個(gè)橋接工具：
npm install -g @vue/cli-init 拉取舊版本
小博有上傳軟件你們可以點(diǎn)擊下載鏈接下載
使用的軟件是vistauo code
則需要安裝插件：Vetur
5.安裝完所有的依賴之后查看文件夾D:\node\Nodejs\node_modules@vue下有沒有成功安裝之前拉過的包文件夾，如下
cli安裝的腳手架
cli-init腳手架初始化
cli-service-global腳手架快速開發(fā)原型項(xiàng)目
6.開始搭建我們的vue腳手架，##關(guān)注查看搭建項(xiàng)目生成文件的含義基于vue搭建項(xiàng)目和基于webpack搭建項(xiàng)目的含義##
第一步在node下新建一個(gè)文件夾
第二步在選中當(dāng)前文件如何輸入cmd，回車之后成功進(jìn)入命令行工具
第三部成功進(jìn)入命令行工具之后，輸入 vue create vue-app(創(chuàng)建項(xiàng)目vue-app(項(xiàng)目名自己可以另取別名))
注意成功啟動(dòng)之后不能關(guān)閉窗口，只能最小化，不然在瀏覽器輸入端口號(hào)找不到我們搭建的項(xiàng)目
第三步，在瀏覽器中輸入localhost：8080
第四步查看我們的新建vue文件夾中有我們剛剛創(chuàng)建的項(xiàng)目則說明項(xiàng)目已經(jīng)創(chuàng)建成功了
7.搭建完項(xiàng)目之后開始編輯我們的項(xiàng)目，這里我使用的軟件為vs code 還需要安裝插件Vetur 不然編寫vue文件無法進(jìn)行高亮
將我們搭建的項(xiàng)目拉入軟件vs code編輯器，需要獲取編輯器的點(diǎn)擊鏈接//download.csdn.net/download/NanQiao1716/12191874
修改項(xiàng)目代碼之后，瀏覽器展示
8.如果我們不小心關(guān)掉命令行窗口，導(dǎo)致項(xiàng)目無法在瀏覽器中展示
~~第一步找到我們創(chuàng)建項(xiàng)目的目錄地址，如何在地址欄中輸入cmd
~~第二步在命令行輸入 npm run serve
~~第三步瀏覽器中打開命令行中提示的端口htpp://localhost:8080
9.重要的事要說三遍，比如我們搭建項(xiàng)目中的文件代表什么含義，##關(guān)注查看搭建項(xiàng)目生成文件的含義基于vue搭建項(xiàng)目和基于webpack搭建項(xiàng)目的含義##
10.Vue一些常用命令：
1.安裝vue-cli
npm install -g@vue/cli
npm install -g@vue/cli-service-global
2.創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目(上面敘述是基于vue模板的)//步驟與上面的步驟一樣，不過運(yùn)行命令有點(diǎn)不一樣了,這里小博簡(jiǎn)單示范一下。
執(zhí)行命令 ： vue init webpack 項(xiàng)目名稱
~~運(yùn)行npm run dev (窗口不小心關(guān)掉了查看##第8模塊##步驟一樣)找到文件所在，直接輸入cmd回車進(jìn)入命令行工具之后在輸入npm run dev，而第8點(diǎn)重新啟動(dòng)基于vue項(xiàng)目的執(zhí)行命令為nmp run serve
~~在瀏覽器中復(fù)制粘貼端口號(hào)
安裝需要開發(fā)依賴：
利用bower 拉需要的包
包管理工具，bower拉前端需要的依賴包 ，npm 拉后端需要的依賴包
npm install bower - g將bower全局安裝
4.項(xiàng)目運(yùn)行：
npm run dev
5.安裝vue-resource插件（通過XMLHttpRequest或JSONP發(fā)起請(qǐng)求并處理響應(yīng) //get post請(qǐng)求）：
npm install vue-resource --save
6.安裝路由插件：
npm install vue-router --save
7.安裝element-ui:
npm i element-ui -S
(安裝好之后要記得在main.js中引入）
8.安裝axios
npm install axios --save
9.安裝Echarts
npm install echarts --save
10.如果想要終止終端（cmd）正在運(yùn)行的命令，則ctrl +c
重要的事要說三遍，比如我們搭建項(xiàng)目中的文件代表什么含義，##關(guān)注查看搭建項(xiàng)目生成文件的含義基于vue搭建項(xiàng)目和基于webpack搭建項(xiàng)目的含義##
————————————————
版權(quán)聲明：本文為CSDN博主「NanQiao1716」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/NanQiao1716/article/details/104495173
