看具體內容之前,,想聽聽我的嘮叨。沒興趣的朋友可以直接掠過。
其實早在去年就已經接觸到Vue,但無奈,在一個二線城市。Vue這個東西大多人都是隻聞其聲,沒有幾個公司會在項目中具體用。而我也是出於興趣就把文檔大概的掃射了一遍,也就放下了。
我想大家應該知道今年對於Vue有件大事。520那天,咱們的尤大大在全球首屆 VueConf 上,介紹了 Vue.js 2017 的現狀,並對 Vue 的未來做了展望。當然了。。雖然很想親臨現場。。但是現實的種種(你們懂的)讓我只能在會後的視頻中去感受了。
別的不多說我們只來看看尤大公佈的數據:
Vue 的現狀
-
GitHub 超過 53,986 個 Star 數,已經是歷史的 Top 10
-
每月 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-Cli(腳手架工具:快速建立一個Vue項目的工具),用於快速搭建大型單頁面應用程序
當然我們實際中的項目當然要用第二種用法 -
一:開發環境(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 大寫)查看是否安裝成功。2npm install -g vue-cli 或者cnpm install -g vue-cli -
3.安裝好咱們的腳手架之後咱們就可以用它來搭咱們的項目了。同樣一條命令 -
先 cd到你想要存放vue項目的目錄
3cd E:\VUE
用命令來創建一個webpack項目。vue-cli就是基於webpack的。 -
4
vue init webpack my-project-name(項目名字)
-
-
-
-
好了。見證奇蹟的時刻就要到了
-
你會看到剛纔的項目文件已經自動創建好了
-
5
cd one-vue-project cd進剛纔自動創建好的項目目錄 6npm install 這一步的意思呢官方解釋是 安裝項目所需依賴。換一個通俗的話就是剛纔使用vue-cli創建的這個項目只是個方案 描述了這個項目需要什麼插件,還沒有實際的內容。 這就是來安裝這個方案所需的插件 7npm run dev 最後 看看終極效果吧 哈哈~~~~~~~~~大V
大家可以關注下我這個個人前端公衆號,我也會第一時間在上面通知大家的。如果有可能我會出一個免費的vue視頻放上面哦~~。。