Vue的入門之安裝
vue.js是前端框架中比較熱門的,因為工作關系,也加入了浩浩蕩蕩的學習大潮中,用筆記記錄下點滴,便於後面學習查閱!
1 node.js環境的安裝包(npm包管理器)
2 vue-cli 腳手架構建工具
3 cnpm npm的淘寶鏡像
1安裝node.js
官網下載node.js安裝node,安裝過程簡單,傻瓜式一鍵安裝,安裝完之後cmd下查看安裝版本
node 環境已經安裝成功,npm包管理器也有了,有些npm的資源被屏蔽或者是國外的資源原因,會導致npm安裝依賴的時候會失敗或者比較慢,可以用npm國內鏡像---cnpm
安裝 cnpm
在命令行輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org
安裝完之後,就可以用cnpm代替npm來安裝依賴包了
3安裝vue-cli腳手架構建工具
在命令行輸入命令 npm install -g vue-cli 等待安裝
用vue-cli構建項目
要創建項目首先要選定項目目錄,在命令行中把目錄選定在指定目錄,存放新建的項目。比如項目就放在桌面上
在桌面目錄下,運行命令 vue init webpack firstVue,這個命令是初始化一個項目,其中webpack是構建工具,也就是整個項目是基於
webpack的,firstVue是整個項目文件夾的名稱,這個文件夾會自動生成在你指定的目錄下
打開文件夾,目錄結構是這樣的
這就是整個項目的目錄結構,其中,主要在 src 目錄中做修改,這個項目現在還只是一個結構框架,整個項目需要的依賴資源都還沒有安裝,如下圖
安裝項目所需要的依賴
要安裝依賴包,首先cd到項目文件夾(firstVue文件夾),然後運行命令 cnpm install ,等待安裝
安裝完之後,會在項目目錄firstVue文件夾下多一個node_modules文件夾,這裏是項目需要的依賴包資源
安裝完之後,就可以運行整個項目了。
運行項目
在項目目錄中,運行 npm run dev ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼後不用手動刷新瀏覽器就能實時的看到修改後的效果。
Vue的入門之安裝