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

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM