Vue.js入門(1)—安裝并生成自己的vue項(xiàng)目(vue.js入門書籍)

?Vue.js 引用百度百科的話：是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。一．項(xiàng)目所需環(huán)境：

   Node.js環(huán)境
   Npm環(huán)境（建議使用cnpm國(guó)內(nèi)淘寶鏡像）

   Vue-cil 腳手架構(gòu)造環(huán)境

二．如何安裝node.js

1.百度搜索node官網(wǎng)

2、選擇合適的安裝包，然后傻瓜式安裝。
3、解壓下載好的node.js安裝包，并新建node_global"及"node_cache"兩個(gè)文件夾

未建立文件夾之前：

新建后：
4、配置環(huán)境變量PATH

打開系統(tǒng)變量，選擇path，再點(diǎn)擊編輯：

把剛剛解壓的nodejs路徑粘貼進(jìn)去：
右擊【我的電腦】--》【屬性】--》【高級(jí)系統(tǒng)設(shè)置】--》【環(huán)境變量】--》【系統(tǒng)變量】--》【Path】-->增加兩個(gè)路徑（新建那兩個(gè)文件夾的路徑）

5、打開cmd，輸入node -v測(cè)試是否有node環(huán)境
溫馨提示：如果提示說找不到命令
第1種可能是設(shè)置錯(cuò)了
第2種就是需要重啟電腦

6、配置環(huán)境變量NODE_PATH
7、設(shè)置prefix和cache輸入以下兩行命令行：
npm config set prefix "D:\Program Files\node-v6.11.5-win-x64\node_global"

npm config set cache "D:\Program Files\node-v6.11.5-win-x64\node_cache"

三． 測(cè)試環(huán)境

1、打開cmd，輸入node -v測(cè)試是否有node環(huán)境。

2、在cmd，輸入npm-v測(cè)試是否有npm包

四、 使用淘寶鏡像文件cnpm代替npm
原因：如果使用npm是使用國(guó)外安裝包，可能由于一些原因會(huì)造成卡頓（傳輸時(shí)間過長(zhǎng)）或者無法使用（屏蔽問題）；所以，建議使用國(guó)內(nèi)的淘寶鏡像cnpm；
1. 輸入
npm install -g cnpm --registry=http://registry.npm.taobao.org
2. 命令安裝cnpm資源；

  Ps：過程可能會(huì)有點(diǎn)長(zhǎng)，請(qǐng)耐心等待；
五、安裝vue-cli腳手架安裝包
輸入cnpm install -g vue-cli命令行

溫馨提示：建議使用cnpm國(guó)內(nèi)資源安裝，這樣等待時(shí)間會(huì)短一些，也不會(huì)導(dǎo)致卡頓；
六、建立新的vue.js項(xiàng)目：

1、打開命令行工具 輸入cd desktop
2、輸入命令行vue init webpack firstVuejs

溫馨提示：這次整個(gè)項(xiàng)目是基于webpack搭建的vue.js項(xiàng)目；最后的firstVuejs為本項(xiàng)目名稱。
3、桌面自動(dòng)生成項(xiàng)目

4、使用命令行工具輸入cd desktop/firstvuejs進(jìn)入項(xiàng)目層

溫馨提示：如果像上圖一樣找不到路徑可以cd .. 退回上一路徑，再嘗試一下。
5、啟動(dòng)項(xiàng)目：

輸入npm run dev 啟動(dòng)項(xiàng)目

七、注意踩雷??！

比如index.html在項(xiàng)目里為index.vue;style.css也需要改成style.css(作用相同)。

以上就是關(guān)于Vue.js入門(1)—安裝并生成自己的vue項(xiàng)目(vue.js入門書籍)，希望對(duì)你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

名稱欄目：Vue.js入門(1)—安裝并生成自己的vue項(xiàng)目(vue.js入門書籍)
URL鏈接：http://www.muchs.cn/news5/317855.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站收錄

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)