前言
四月份已經(jīng)要悄悄過(guò)去了，從三月份辭職到進(jìn)入新的公司，一切都顯得特別的快，心情也是越發(fā)的靜不下來(lái)，趁著今天心情特別輕松越快，感緊來(lái)寫篇筆記先。隨便說(shuō)下，我的個(gè)人網(wǎng)站已經(jīng)換了一套風(fēng)格了，更加的適合閱讀，有興趣可以去看看啦~zhengyepan.com
首先，做vue的項(xiàng)目，我們?nèi)绻挥霉俜教峁┑哪_手架，我們就必須自己去搭建項(xiàng)目所需的一切東西。這些項(xiàng)目所需要的目錄結(jié)構(gòu)啊 ，等等，感覺有點(diǎn)重復(fù)并且做項(xiàng)目的時(shí)候老是自己搭建未免太無(wú)趣。
腳手架是指通過(guò)輸入簡(jiǎn)單指令幫助你快速搭建好一個(gè)基本環(huán)境的工具。
vue官方提供了vue-cli腳手架。下面我把我搭建的步驟和所需要注意的點(diǎn)列出來(lái)，做一個(gè)參考，如果你覺得對(duì)你有幫助，請(qǐng)一定不要節(jié)省你的贊~.
步驟一、安裝vue-cli，配置vue命令環(huán)境
如果你還沒有安裝nodejs的話，請(qǐng)先安裝nodejs
全局安裝vue-cli
npm install vue-cli -g
當(dāng)然了，我們是在國(guó)內(nèi)，npm安裝的速度和下載的時(shí)候可能會(huì)出問題，所以我現(xiàn)在用cnpm 安裝
具體安裝
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
然后運(yùn)行
$ cnpm install [name]
安裝完vue命令環(huán)境后，我們測(cè)試是不是安裝成功，直接
vue -version
vue-cli提供了幾個(gè)模板給開發(fā)者用于不同類型的項(xiàng)目，我們可以通過(guò)查看，一般我們用webpack和webpack-simple的比較多，其他幾種，大家可以去官網(wǎng)了解下具體用法了，這里我選擇用webpack.
vue list
步驟二、初始化項(xiàng)目，生成項(xiàng)目模板
vue init webpack demo
vue init 模板名稱 + 項(xiàng)目名字
上面的意思是，首先我們選擇webpack的模板還有demo作為項(xiàng)目名字
選擇相應(yīng)的選項(xiàng)，我是直接按Enter就默認(rèn)了，為了演示，如果有特別需要可以進(jìn)行相關(guān)選項(xiàng)，接下來(lái)就等待安裝完整即可
步驟三、進(jìn)入生成的項(xiàng)目目錄，安裝依賴和運(yùn)行項(xiàng)目
經(jīng)過(guò)一番焦急的等待，我終于等到安裝好的這一刻了，可以看到element-ui-test目錄下已經(jīng)新建好了一個(gè)demo文件夾了，里面就是我們安裝的目錄結(jié)構(gòu)了。
然后我們可以看到那個(gè)命令行提示消息說(shuō)，運(yùn)行這個(gè)項(xiàng)目只要進(jìn)入這個(gè)文件夾，然后run一下就可以了，在這里要說(shuō)一下，有的讀者安裝后還多了一步就是在cd [文件名]下面還有個(gè)npm install這一步，這一步為啥我沒有呢，原因是我已經(jīng)裝過(guò)依賴了，所有沒有安裝依賴的同學(xué)要進(jìn)行多一步操作就是安裝依賴了，具體做法是
cd demo
cnpm install
npm run dev
還是使用cnpm 安裝 npm 運(yùn)行，下載的適合就用國(guó)內(nèi)淘寶的鏡像會(huì)比較快速，也不會(huì)下載中斷或出錯(cuò)。
現(xiàn)在我的demo項(xiàng)目已經(jīng)運(yùn)行在8080端口了，現(xiàn)在我們打開瀏覽器輸入http://localhost:8080就可以看到效果,當(dāng)然啦，如果你的8080端口被其他項(xiàng)目占用了，vue也會(huì)用其他端口的，這個(gè)不用擔(dān)心。
當(dāng)然啦，關(guān)于wenpack的只是也是一個(gè)大體系，為什么我們需要和webpack一起用呢，這是因?yàn)?，我們用的單文件組件的時(shí)候，需要用vue-loader來(lái)解析.vue后綴的文件，還有其他不同類型文件也需要不同的loader來(lái)解析，所以vue的項(xiàng)目最好配合webpack。
還有一點(diǎn)就是運(yùn)行npm run dev 是啟動(dòng)測(cè)試服務(wù)，實(shí)際上線上線的話是
npm run build
將項(xiàng)目打包輸出dist目錄，這個(gè)目錄就拷貝到服務(wù)器上即可，相關(guān)知識(shí)可以百度了解更多哈，這里就不跑題啦
到此項(xiàng)目的腳手架就搭好了，接下來(lái)就是你發(fā)揮的時(shí)候了騷年 謝謝大家觀看，請(qǐng)不要節(jié)省你的贊啊~
歡迎訪問我的個(gè)人網(wǎng)站zhengyepan.com
歡迎討論交流~
