Vue在Windows系統(tǒng)下本地項(xiàng)目的安裝與部署
轉(zhuǎn)自CSDN的：AI呂小布：?https://blog.csdn.net/qq_37495916/article/details/80626615
一班利、項(xiàng)目的前期準(zhǔn)備
1汹胃、node.js 的安裝
Vue項(xiàng)目通常通過(guò)webpack工具來(lái)構(gòu)建，而webpack命令是依賴(lài)node.js開(kāi)發(fā)環(huán)境的库正，所以首先要安裝node.js飒房。node.js的官方地址為：https://nodejs.org/en/download/，下載相應(yīng)的版本热康。
測(cè)試是否安裝成功：在終端輸入npm若顯示npm相關(guān)命令則安裝成功凝果。
2、cnpm 的安裝
npm包含開(kāi)發(fā)過(guò)程中依賴(lài)的包部署在國(guó)外婿奔，下載起來(lái)比較慢缺狠，國(guó)內(nèi)的淘寶對(duì)npm的鏡像服務(wù)器cnpm是比較快的。我們通過(guò)npm下載cnpm萍摊，完成以后在下載需要以來(lái)的包是就可以使用cnpm命令下載挤茄。
cnpm下載命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
備注：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安裝冰木、卸載驮樊、管理依賴(lài)等）, NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問(wèn)題，常見(jiàn)的使用場(chǎng)景有以下幾種：
允許用戶從NPM服務(wù)器下載別人編寫(xiě)的第三方包到本地使用囚衔。
允許用戶從NPM服務(wù)器下載并安裝別人編寫(xiě)的命令行程序到本地使用挖腰。
允許用戶將自己編寫(xiě)的包或命令行程序上傳到NPM服務(wù)器供別人使用。
3练湿、vue-cli 的安裝
vue-cli是vue官方提供的一個(gè)命令行工具猴仑，可用于快速搭建大型單頁(yè)應(yīng)用。該工具提供開(kāi)箱即用的構(gòu)建工具配置肥哎，帶來(lái)現(xiàn)代化的前端開(kāi)發(fā)流程辽俗。只需一分鐘即可啟動(dòng)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目篡诽。
Vue-cli安裝命令：cnpm install -g vue-cli
npm install -g @vue/cli? ? //升級(jí)3.0
測(cè)試是否安裝成功：在終端輸入vue若顯示vue相關(guān)命令則安裝成功崖飘。
二、創(chuàng)建一個(gè)vue項(xiàng)目
1杈女、
初始化名為first_vue的項(xiàng)目
在命令行中運(yùn)行命令?vue init webpack first_vue（如果不行朱浴，使用?vue-init webpack first_vue命令來(lái)安裝）。解釋一下這個(gè)命令达椰，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目翰蠢，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的啰劲。其中firstVue是整個(gè)項(xiàng)目文件夾的名稱(chēng)梁沧，這個(gè)文件夾會(huì)自動(dòng)生成在你指定的目錄中。
? Project description (A Vue.js project) vue-cli新建項(xiàng)目(項(xiàng)目描述)蝇裤；
? Author (*******)廷支；? Vue build?
? Runtime + Compiler: recommended for most users?
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere?
這里選擇Runtime + Compiler: recommended for most users；
? Install vue-router? (Y/n) y?是否使用vue-router栓辜，這里根據(jù)需求選擇恋拍；
? Use ESLint to lint your code? (Y/n)n?是否使用ESLint，這里根據(jù)需求選擇啃憎；
? Pick an ESLint preset (Use arrow keys)?
? Standard (https://github.com/feross/standard)?
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself)?這里選擇Standard (https://github.com/feross/standard)
?? Setup unit tests with Karma + Mocha? (Y/n) n?是否需要單元測(cè)試，這里根據(jù)需求選擇似炎；Setup e2e tests with Nightwatch? (Y/n) n是否需要單元測(cè)試辛萍，這里根據(jù)需求選擇；
2羡藐、啟動(dòng)first_vue項(xiàng)目
根據(jù)提示：
cd first_vue
然后
npm run dev
啟動(dòng)項(xiàng)目贩毕。
根據(jù)提示我們的項(xiàng)目在本地的8080端口上運(yùn)行。（若是你在本地想把項(xiàng)目啟動(dòng)在其他端口上仆嗦，只需在：項(xiàng)目/config/index.js文件下dev配置下的port改為你需要的端口就行）辉阶。
三、項(xiàng)目如何運(yùn)行
1、vue頁(yè)面結(jié)構(gòu)
vue頁(yè)面中有三大模塊<template></template>谆甜、<script></script>垃僚、<style></style>。
<template></template>中寫(xiě)我們的頁(yè)面规辱。template下必須只有一個(gè)根元素谆棺，可以使用一個(gè)容器元素包裹住，例如div罕袋。頁(yè)面從index.html（首頁(yè)入口文件）文件開(kāi)始改淑，繼承src/App.vue（項(xiàng)目入口文件），然后再顯示每個(gè)vue頁(yè)面浴讯。
<script></script>中寫(xiě)我們的腳本朵夏。其中可以包含：
data：定義我們的數(shù)據(jù)類(lèi)型。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter榆纽，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化仰猖。
created：在實(shí)例創(chuàng)建完成后被立即調(diào)用。
components：包含 Vue 實(shí)例可用組件的哈希表掠河。將引入的組件放在這里亮元。
methods：將定義的函數(shù)寫(xiě)到這里
<style></style>寫(xiě)頁(yè)面樣式。
2唠摹、路由如何跳轉(zhuǎn)
瀏覽器中請(qǐng)求的路由會(huì)在router文件夾中進(jìn)行映射爆捞。需要用到的vue在使用前import引入。
知識(shí)剖析
npm install moduleNames：安裝Node模塊
安裝完畢后會(huì)產(chǎn)生一個(gè)node_modules目錄勾拉，其目錄下就是安裝的各個(gè)node模塊煮甥。
node的安裝分為全局模式和本地模式。
一般情況下會(huì)以本地模式運(yùn)行藕赞，包會(huì)被安裝到和你的應(yīng)用程序代碼的本地node_modules目錄下成肘。
在全局模式下，Node包會(huì)被安裝到Node的安裝目錄下的node_modules下
為什么要保存至PACKAGE.JSON斧蜕？
因?yàn)閚ode插件包非常大双霍，版本龐雜，所以不加入package信息批销，模塊間的依賴(lài)變得非常困難洒闸，將配置信息寫(xiě)入package.json并將其加入版本管理，其他開(kāi)發(fā)者對(duì)應(yīng)下載即可（命令提示符執(zhí)行npm install均芽，則會(huì)根據(jù)package.json下載所有需要的包）丘逸。 每個(gè)項(xiàng)目的根目錄下面，一般都有一個(gè)package.json文件掀宋，定義了這個(gè)項(xiàng)目所需要的各種模塊深纲，以及項(xiàng)目的配置信息（比如名稱(chēng)仲锄、版本、許可證等元數(shù)據(jù)）湃鹊。npm install 命令根據(jù)這個(gè)配置文件儒喊，自動(dòng)下載所需的模塊，也就是配置項(xiàng)目所需的運(yùn)行和開(kāi)發(fā)環(huán)境涛舍。
PACKAGE.JSON 屬性說(shuō)明：
name - 包名澄惊。（不要把node或者js放在名字中）
version - 包的版本號(hào)。
dependencies - 項(xiàng)目運(yùn)行所依賴(lài)的模塊
devDependencies - 項(xiàng)目開(kāi)發(fā)所需要的模塊
bin - 這需要在你的package.json中提供一個(gè)bin字段富雅，它是一個(gè)命令名和本地文件名的映射掸驱。在安裝時(shí)，如果是全局安裝没佑，npm將會(huì)使用符號(hào)鏈接把這些文件鏈接到prefix/bin毕贼，如果是本地安裝，會(huì)鏈接到./node_modules/.bin/
npm常用命名
使用npm卸載插件：npm uninstall < name > [-g] [--save-dev] PS：不要直接刪除本地插件包
使用npm更新插件：npm update < name > [-g] [--save-dev]?
更新全部插件：npm update [--save-dev]?
查看npm幫助：npm help?
查看當(dāng)前目錄已安裝插件：npm list?
還有一些npm的簡(jiǎn)單命令就不多說(shuō)了
PS：npm安裝插件過(guò)程：從http://registry.npmjs.org下載對(duì)應(yīng)的插件包（該網(wǎng)站服務(wù)器位于國(guó)外蛤奢，所以經(jīng)常下載緩慢或出現(xiàn)異常）鬼癣，解決辦法就是cnpm
CNPM介紹：
官方網(wǎng)址：http://npm.taobao.org
安裝：命令提示符執(zhí)行npm install cnpm -g --registry=https://registry.npm.taobao.org
注意：安裝完后最好查看其版本號(hào)cnpm -v或關(guān)閉命令提示符重新打開(kāi)，安裝完直接使用有可能會(huì)出現(xiàn)錯(cuò)誤?
PS：cnpm跟npm用法完全一致啤贩，只是在執(zhí)行命令時(shí)將npm改為cnpm待秃。
3.常見(jiàn)問(wèn)題
bower 和 npm有什么區(qū)別
4.解決方案
npm 是伴隨 Node.js 出現(xiàn)的一個(gè)包管理器，最開(kāi)始只能支持 Node.js 的模塊管理痹屹，但是后來(lái)章郁， npm 官網(wǎng)經(jīng)過(guò)一次改版，打出的口號(hào)是志衍，javascript 的包管理器暖庄，所以，其已經(jīng)不在局限于是 Node.js 的模塊管理了楼肪，已經(jīng)通用到了所有 js 的包管理工具了培廓，可以說(shuō)，前后通吃了春叫。
bower 的話肩钠，從一開(kāi)始，就是專(zhuān)門(mén)為前端表現(xiàn)設(shè)計(jì)的包管理器暂殖，一切全部為前端考慮的价匠。npm 和 bower 的最大區(qū)別，就是 npm 支持嵌套地依賴(lài)管理央星，而 bower只能支持扁平的依賴(lài)（嵌套的依賴(lài)霞怀，由 程序員自己解決）惫东。
嵌套依賴(lài)莉给，指的就是毙石，你依賴(lài)的軟件包，還有它自己的依賴(lài)颓遏，好像摘葡萄徐矩，一摘一大串。在服務(wù)器環(huán)境的時(shí)候叁幢，這并沒(méi)什么關(guān)系滤灯，因?yàn)榇鎯?chǔ)空間夠大，一切代碼都是本地運(yùn)行曼玩，只要解決完依賴(lài)就行了鳞骤， 但是到了用戶產(chǎn)品的瀏覽器里，就很成問(wèn)題了黍判，你不能讓用戶去下載好幾M的js代碼豫尽，那就太糟糕了。在這個(gè)情況下顷帖，就需要程序員自己手動(dòng)解決用到的類(lèi)庫(kù)的嵌套依賴(lài)問(wèn)題美旧。比如確保各種各樣的插件 都依賴(lài)同一個(gè)版本的jQuery。
擴(kuò)展思考
cnpm有哪些問(wèn)題贬墩？
1.cnpm 的倉(cāng)庫(kù)只是 npm 倉(cāng)庫(kù)的一個(gè)拷貝榴嗅，它不承擔(dān) publish 工作，所以你用 cnpm publish 命令會(huì)執(zhí)行失敗的
2.不僅是 publish 會(huì)執(zhí)行失敗陶舞，其它的需要注冊(cè)用戶(npm adduser)嗽测、或者修改 package 狀態(tài)等命令都無(wú)法用 cnpm
7.參考文獻(xiàn)
開(kāi)發(fā)者對(duì) npm 公司不滿，unpublish 了自己的所有模塊
更多提問(wèn)
Q:全局安裝和本地安裝的區(qū)別吊说？
因?yàn)槿帜Ｊ桨惭b,包可以供所有的程序使用论咏。本地安裝則不可以。 npm 默認(rèn)會(huì)把包安裝到當(dāng)前目錄下颁井。這反映了 npm 不同的設(shè)計(jì)哲學(xué)厅贪。如 果把包安裝到全局,可以提高程序的重復(fù)利用程度,避免同樣的內(nèi)容的多 份副本,但壞處是難以處理不同的版本依賴(lài)。如果把包安裝到當(dāng)前目錄, 或者說(shuō)本地,則不會(huì)有不同程序依賴(lài)不同版本的包的沖突問(wèn)題,同時(shí)還減 輕了包作者的 API 兼容性壓力,但缺陷則是同一個(gè)包可能會(huì)被安裝許多次雅宾。
Q:為什么進(jìn)行了全局安裝還要進(jìn)行本地安裝
1养涮、在js實(shí)例代碼中，默認(rèn)下node.js會(huì)在NODE_PATH和目前js所在項(xiàng)目下的node_modules文件夾下去尋找模塊眉抬，因此贯吓，如果只是全局安裝，不能直接通過(guò)require()的方式去引用模塊蜀变，需要手動(dòng)解決包路徑的配置問(wèn)題悄谐，當(dāng)然你也可以復(fù)制全局安裝的node_modules文件夾到項(xiàng)目下，還有辦法可以選擇將環(huán)境變量的NODE_PATH設(shè)置為C:\Program Files\nodejs库北。
?2.對(duì)于包的更新不好管理爬舰，可能你需要為每個(gè)包重新命名们陆，如gulp@3.8.1、gulp@3.9.1...情屹，為了區(qū)別不同項(xiàng)目使用指定的包坪仇，保證模塊之間的相互依賴(lài)，區(qū)別每個(gè)項(xiàng)目正常運(yùn)行
Q：如何在package.JSON的dependencies和devDependencies寫(xiě)入信息
A:npm install --savebabel-cli和npm install -devbabel-cli使用這兩個(gè)命令安裝后可自動(dòng)寫(xiě)入文件
npm install --save-devbabel-cli也可以在一起用
鏈接：http://www.reibang.com/p/f581cf9360a2? ?來(lái)源：簡(jiǎn)書(shū)? ?作者：沒(méi)事兒啊
