本篇內(nèi)容介紹了“vue項目搭建及打包運行的方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

一、概述

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

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

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

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

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

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

vue-cli: 用戶生成Vue工程模板

三、node介紹及安裝

1、npm是什么：

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

有些程序員就受不鳥了，于是npm就出來了，全稱是 Node Package Manager 包管理工具。
這一點和maven、gradle十分相似，只不過maven、gradle是用來管理java jar包的，而npm是用來管理js的。

NPM 的實現(xiàn)思路和maven、gradle是一樣的：
1、有一個遠程代碼倉庫（registry），在里面存放所有需要被共享的js代碼，每個js文件都有自己唯一標識。
2、用戶想使用某個js的時候，只需引用對應的標識，js文件會自動下載下來。

2、node是什么

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

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

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

4、node安裝

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

如果要下載其他版本請點擊其他下載即可找到對應的版本

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

用管理員打開dos命令框

查看node版本

node -v

查看npm版本

npm -v

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

使用淘寶NPM鏡像

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

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

這樣就可以使用cnpm 命令來安裝模塊了

5、安裝vue-cli

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

查看vue-cli是否成功

vue list

四、新建vue項目

用管理員權限打開dos窗口，切換到需要創(chuàng)建項目的路勁下

vue init webpack frontend

npm install

運行項目
npm run dev

五、打包運行

npm run build

vue項目打包后只有三個文件，如下：

這樣就直接可以通過自己定義的路由訪問啦?。?！

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

名稱欄目：vue項目搭建及打包運行的方法
文章來源：http://m.newbst.com/article18/ppiedp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、微信小程序、自適應網(wǎng)站、響應式網(wǎng)站、、關鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)