怎么搭建vue.js的開(kāi)發(fā)環(huán)境-創(chuàng)新互聯(lián)

怎么搭建vue.js的開(kāi)發(fā)環(huán)境？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

專業(yè)從事成都網(wǎng)站制作、成都做網(wǎng)站,高端網(wǎng)站制作設(shè)計(jì),微信小程序開(kāi)發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用H5網(wǎng)站設(shè)計(jì)+CSS3前端渲染技術(shù)，成都響應(yīng)式網(wǎng)站建設(shè)公司，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過(guò)程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

vue.js開(kāi)發(fā)環(huán)境的搭建：首先安裝vue.js，安裝成功后分別安裝npm包管理器、模塊、webpack以及vue腳手架；全部安裝好后開(kāi)始初始化Vue環(huán)境以及安裝項(xiàng)目依賴，到這兒Vue開(kāi)發(fā)環(huán)境就搭建好了

環(huán)境準(zhǔn)備

Node.js Javascript的運(yùn)行時(shí)環(huán)境

npm Node.js下的包管理工具

webpack 前端資源模塊化管理和打包工具

vue-cli 腳手架構(gòu)建工具

cnpm npm的淘寶鏡像

Vue.js安裝

1. Node.js的安裝非常容易，首先從官網(wǎng)下載你所需操作系統(tǒng)的版本，然后一直下一步就ok了。
安裝完成之后，在命令行敲出node -v，如果出現(xiàn)對(duì)應(yīng)版本號(hào)，則表示安裝成功。

2. npm是隨同Node.js一起安裝的包管理工具,直接在命令行敲出npm -v就可以查看是否安裝成功。

npm包管理器雖然有了，但是由于npm下載需要依賴包的服務(wù)器地址在國(guó)外，導(dǎo)致很多資源訪問(wèn)會(huì)很慢。所以我們可以安裝淘寶的國(guó)內(nèi)鏡像。
3. 在命令行敲出 npm install -g cnpm --registry=http://registry.npm.taobao.org。
這樣就可以使用 cnpm 命令來(lái)安裝模塊了：

cnpm install [name]

4. 安裝webpack

cnpm install webpack -g

5. 安裝vue腳手架

npm install vue-cli -g

初始化一個(gè)Vue.js環(huán)境

在電腦上新建一個(gè)文件夾用來(lái)存放我們的代碼。然后使用命令行進(jìn)入這個(gè)文件夾cd 目錄路徑。
之后使用命令

vue init webpack name

來(lái)初始化一個(gè)vue環(huán)境，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的。在安裝過(guò)程會(huì)有一些初始化的設(shè)置，我們可以采用默認(rèn)配置，一路回車 。

從上圖的我們還可以看到vue很貼心的告訴了我們快速開(kāi)始(To get started)的命令

安裝項(xiàng)目依賴

一定要從官方倉(cāng)庫(kù)安裝，npm 服務(wù)器在國(guó)外所以這一步安裝速度會(huì)很慢。

npm install

不要從國(guó)內(nèi)鏡像cnpm安裝(會(huì)導(dǎo)致后面缺了很多依賴庫(kù))

cnpm install

安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請(qǐng)求模塊vue-resource

cnpm install vue-router vue-resource --save

啟動(dòng)項(xiàng)目

npm run dev

運(yùn)行成功以后他會(huì)告訴你ip和端口號(hào)

訪問(wèn)這個(gè)地址

如果出現(xiàn)上圖。恭喜你，已經(jīng)可以開(kāi)始Vue.js之旅了。

看完上述內(nèi)容，你們掌握怎么搭建vue.js的開(kāi)發(fā)環(huán)境的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

分享名稱：怎么搭建vue.js的開(kāi)發(fā)環(huán)境-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://muchs.cn/article20/djjico.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、小程序開(kāi)發(fā)、企業(yè)建站、做網(wǎng)站、品牌網(wǎng)站建設(shè)、Google

廣告

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