本篇內(nèi)容介紹了“vue項(xiàng)目搭建及打包運(yùn)行的方法”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)于2013年成立，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元北湖做網(wǎng)站,已為上家服務(wù),為北湖各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):18980820575

一、概述

我們使用Vue.js一定要安裝node.js嗎？準(zhǔn)確的說(shuō)是使用vue-cli 搭建項(xiàng)目的時(shí)候需要nodejs。你也可以創(chuàng)建一個(gè) .html 文件，然后通過(guò)如下方式引入 Vue，一樣可以使用Vue。

但是使用node是比較方便的，打包部署，解析vue單文件組件，解析每個(gè)vue模塊，拼在一起等，啟動(dòng)測(cè)試服務(wù)器localhost, 幫你管理 vue-router，vue-resource這些插件。所以通常情況下我們會(huì)使用Vue+node方式，方便省事。

二、vue推薦開(kāi)發(fā)環(huán)境

Node.js: javascript運(yùn)行環(huán)境(runtime),不同系統(tǒng)直接運(yùn)行各種編程語(yǔ)言

npm: Nodejs下的包管理器。由于國(guó)內(nèi)使用npm會(huì)很慢,這里推薦使用淘寶NPM鏡像

webpack: 它主要的用途是通過(guò) CommonJS 的語(yǔ)法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。

vue-cli: 用戶(hù)生成Vue工程模板

三、node介紹及安裝

1、npm是什么：

當(dāng)一個(gè)網(wǎng)站依賴(lài)的js代碼越來(lái)越多，程序員發(fā)現(xiàn)這是一件很麻煩的事情：
去 jQuery 官網(wǎng)下載 jQuery
去 BootStrap 官網(wǎng)下載 BootStrap
去 Underscore 官網(wǎng)下載 Underscore
……

有些程序員就受不鳥(niǎo)了，于是npm就出來(lái)了，全稱(chēng)是 Node Package Manager 包管理工具。
這一點(diǎn)和maven、gradle十分相似，只不過(guò)maven、gradle是用來(lái)管理java jar包的，而npm是用來(lái)管理js的。

NPM 的實(shí)現(xiàn)思路和maven、gradle是一樣的：
1、有一個(gè)遠(yuǎn)程代碼倉(cāng)庫(kù)（registry），在里面存放所有需要被共享的js代碼，每個(gè)js文件都有自己唯一標(biāo)識(shí)。
2、用戶(hù)想使用某個(gè)js的時(shí)候，只需引用對(duì)應(yīng)的標(biāo)識(shí)，js文件會(huì)自動(dòng)下載下來(lái)。

2、node是什么

Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime environment)，不是一個(gè)js文件，實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝。Node.js 是一個(gè)讓 JavaScript 運(yùn)行在服務(wù)端的開(kāi)發(fā)平臺(tái)，它讓 JavaScript 成為與PHP、Python 等服務(wù)端語(yǔ)言平起平坐的腳本語(yǔ)言。
[1]Node.js提供替代的API，使得V8在非瀏覽器環(huán)境下運(yùn)行得更好。V8引擎執(zhí)行Javascript的速度非常快，性能非常好。
[2]Node.js是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)， 用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。

3、npm和Node.js的發(fā)展

npm作者已經(jīng)將npm開(kāi)發(fā)完成，于是發(fā)郵件通知 jQuery、Bootstrap、Underscore 作者，希望他們把 jquery、bootstrap 、 underscore 放到npm遠(yuǎn)程倉(cāng)庫(kù)，但是沒(méi)有收到回應(yīng)，于是npm的發(fā)展遇到了瓶頸。
Node.js作者也將Node.js開(kāi)發(fā)完成，但是 Node.js 缺少一個(gè)包管理器，于是他和 npm 的作者一拍即合、抱團(tuán)取暖，最終 Node.js 內(nèi)置了 npm。
后來(lái)的事情大家都知道，Node.js 火了。隨著 Node.js 的火爆，大家開(kāi)始用 npm 來(lái)共享 JS 代碼了，于是 jQuery 作者也將 jQuery 發(fā)布到 npm 了。所以現(xiàn)在，你可以使用 npm install jquery 來(lái)下載 jQuery 代碼?，F(xiàn)在用 npm 來(lái)分享代碼已經(jīng)成了前端的標(biāo)配。

4、node安裝

去官網(wǎng)下載：node官網(wǎng)：Node.js

如果要下載其他版本請(qǐng)點(diǎn)擊其他下載即可找到對(duì)應(yīng)的版本

建議新手直接無(wú)腦下一步，也可以選擇自定義安裝

用管理員打開(kāi)dos命令框

查看node版本

node -v

查看npm版本

npm -v

雖然npm是node自帶的，但他未必是最新的版本，如果想要最新版本，可以執(zhí)行npm install -g npm

使用淘寶NPM鏡像

大家都知道國(guó)內(nèi)直接使用npm 的官方鏡像是非常慢的，這里推薦使用淘寶 NPM 鏡像。

npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

這樣就可以使用cnpm 命令來(lái)安裝模塊了

5、安裝vue-cli

cnpm install vue-cli -g      //全局安裝 vue-cli

查看vue-cli是否成功

vue list

四、新建vue項(xiàng)目

用管理員權(quán)限打開(kāi)dos窗口，切換到需要?jiǎng)?chuàng)建項(xiàng)目的路勁下

vue init webpack frontend

npm install

運(yùn)行項(xiàng)目
npm run dev

五、打包運(yùn)行

npm run build

vue項(xiàng)目打包后只有三個(gè)文件，如下：

這樣就直接可以通過(guò)自己定義的路由訪(fǎng)問(wèn)啦?。?！

“vue項(xiàng)目搭建及打包運(yùn)行的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！