1 、概述
Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,并且非常容易學習,非常容易與其它庫或已有項目整合。另一方面,Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。
首先vue.js的作者是中國人,所以說他是國產的,吸收了google的angular.js和facebook的react.js的特性,摒棄了jquery傳統的DOM操作,采用數據綁定和指令等概念,可以說是未來WEB端開發的趨勢,但是也并不代表jquey就淘汰了,存在即合理,jq應該在以后會有其他領域的價值。
2 、安裝說明
首先,vue.js是一種前端框架,一般利用vue創建項目是要搭配webpack項目構建工具的,而webpack在執行打包壓縮的時候是依賴node.js的環境的,所以,要進行vue項目的開發,我們首先要安裝node.js。node.js的官方地址為:https://nodejs.org/en/download/
3 、安裝 node.js
按照windows一般應用程序,一路next就可以安裝成功,建議不要安裝在系統盤(如C:)
安裝完成后,wind+r 彈出cmd,輸入node -v 和 npm -v 分別查看版本號,代表node.js安裝完成
4、安裝cnpm
由于許多npm包都是在國外,安裝起來特別慢,所以我們這里利用淘寶的鏡像服務器,來對我們依賴的module進行安裝。
安裝命令為:npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回車等待命令
5、安裝vue-cli
命令為:cnpm install -g vue-cli,回車,等待安裝
安裝完后,可以輸入vue,然后回車,如果出現vue的信息,則說明安裝成功了
6、創建項目
新建項目文件夾,我的命名為MyVue,然后,打開此文件夾,右鍵git bash here,定位到此文件夾,輸入:vue init webpack my-vue(項目文件夾名),回車
此時,觀察my-vue的文件夾下又多了一個my-vue文件夾,這個就是vue項目的文件夾
之后通過命令:cd my-vue 進入此文件夾,在利用命令:cnpm install,回車,等待一小會兒,回到項目文件夾,會發現項目結構里,多了一個node_modules文件夾(該文件里的內容就是之前安裝的依賴)
如下圖:
7、測試
在命令行里繼續輸入 cnpm run dev來測試環境是否搭建成功,如果出現如下圖說明成功了
8、訪問
在瀏覽器里輸入localhost:8080就可以查看頁面如下: