Vue2.0專案開發流程—通俗易懂
看具體內容之前,,想聽聽我的嘮叨。沒興趣的朋友可以直接掠過。
其實早在去年就已經接觸到Vue,但無奈,在一個二線城市。Vue這個東西大多人都是隻聞其聲,沒有幾個公司會在專案中具體用。而我也是出於興趣就把文件大概的掃射了一遍,也就放下了。
我想大家應該知道今年對於Vue有件大事。520那天,咱們的尤大大在全球首屆 VueConf 上,介紹了 Vue.js 2017 的現狀,並對 Vue 的未來做了展望。當然了。。雖然很想親臨現場。。但是現實的種種(你們懂的)讓我只能在會後的視訊中去感受了。
別的不多說我們只來看看尤大公佈的資料:
Vue 的現狀
-
GitHub 超過 53,986 個 Star
-
每月 55 萬 + 次 NPM 下載(不算阿里爸爸 CNPM 映象)
-
Chrome DevTool 外掛 17.4 萬日活
-
國內使用者:
-
當然還有活躍的社群,vue全家桶,與阿里爸爸合作的Weex。。。。。
-
看了這些,,我只能說,身為一個前端。。我得把它搞下來。於是我覺定先將一個公司的小專案轉到vue上來。
-
好了,不閒扯那我們正式開始。
-
-------------------------------------------------------------------------華麗的分割線---------------------------------------------------------------------------、
-
還是那句老話。。文件文件文件(https://vuefe.cn/v2/guide/)
我知道很多人同我一樣,不太喜歡看這玩意。但是對於Vue來說我強烈推薦在做專案之前大家必須去過一遍文件,或者說最起碼也要了解到Vue的基礎用法,基礎API,生命週期這些東西。我說了。。是瞭解,所以不用急。 -
在我看來,Vue的用法無非就是倆種
-
1.CDN(就如咱們之前引用jq一樣的在官方穩定中下載直接引用到你的html <script src="*****">)
好處呢,就是方便-可以快速的使用。這邊也推薦大家在初期看文件的時候就用CDN的方式去練DEMO。。莫不要一上來就NPM...Cli...WebPack...會把自己整懵逼的,原因很簡單,全是新知識就一塊一塊去學,沒有誰能一口吃成一個胖子。。。我就是吃過這個虧的人。
2.用官方提供一個
當然我們實際中的專案當然要用第二種用法 -
一:開發環境(vue賴以開發和生存的環境)
1.安裝node.js(win下前往node.js官網安裝即可) 安裝個穩定版就行 這個沒什麼可講的一路下一步 -
-
檢查這步是否完成 可以開啟命令列輸入 node -v -----這步的意思檢視node的版本號,如果回車後你看到版本號那就OK了。go-下一步
這步完成的同時,node中自帶的 npm 一個nodejs的包管理器,用於node外掛管理(包括安裝、解除安裝、管理依賴等)的東西也安裝到你電腦裡了。以後我們要安裝其他外掛模組(比如 vue-cli sass了什麼的)都靠這個玩意。同樣可以 npm -v 看一下它的版本號
友情提示,這塊可以安裝一個cnpm(這是淘寶npm映象 就是中國版的npm 好處就是下載東西快推薦安裝) -
淘寶npm安裝
-
2.安裝Vue腳手架-Vue-cli ------為什麼叫腳手架呢,其實就是和蓋樓房一樣,這個就是個基礎設施,是萬丈高樓平地起的重要工具。
安裝完成後,可以使用 vue -V (注意 V 大寫)檢視是否安裝成功。2 npm install -g vue-cli 或者cnpm install -g vue-cli -
3.安裝好咱們的腳手架之後咱們就可以用它來搭咱們的專案了。同樣一條命令 -
先 cd到你想要存放vue專案的目錄
3 cd E:\VUE
用命令來建立一個webpack專案。vue-cli就是基於webpack的。 -
4 vue init webpack my-project-name(專案名字)
-
-
好了。見證奇蹟的時刻就要到了
-
你會看到剛才的專案檔案已經自動建立好了
-
5 cd one-vue-project cd進剛才自動建立好的專案目錄 6 npm install 這一步的意思呢官方解釋是 安裝專案所需依賴。換一個通俗的話就是剛才使用vue-cli建立的這個專案只是個方案 描述了這個專案需要什麼外掛,還沒有實際的內容。 這就是來安裝這個方案所需的外掛 7 npm run dev 最後 看看終極效果吧 哈哈~~~~~~~~~大V
大家可以關注下我這個個人前端公眾號,我也會第一時間在上面通知大家的。如果有可能我會出一個免費的vue視訊放上面哦~~。。