1. 程式人生 > >Vue的入門之安裝

Vue的入門之安裝

學習 字段 文件中 指定 size 打開 方式 前端框架 cnpm

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 ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼後不用手動刷新瀏覽器就能實時的看到修改後的效果。

技術分享圖片

這裏簡單介紹下 npm run dev 命令,其中的“run”對應的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一個快捷方式。 項目運行成功後,瀏覽器會自動打開localhost:8080(如果瀏覽器沒有自動打開,可以手動輸入)。運行成功後,會看到如下所示的界面。 技術分享圖片

Vue的入門之安裝