Vue.js(讀音 /vjuː/, 類似於 view)是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅易於上手,還便於與第三方庫或既有項目整合。
下面介紹以NPM方式來Vue.js 的安裝方法:
在用Vue.js構建大型應用的時候推薦使用NPM安裝方法,NPM能很好的和諸如Webpack或者Browserify 模塊打包器配合使用。Vue.js 也提供配套工具來開發單文件組件。
首先,先列出我們接下來需要的東西:
- node.js環境(npm包管理器)
- vue-cli 腳手架構建工具
- cnpm npm的淘寶鏡像
1) 安裝node.js
從node.js官網下載並安裝node,安裝過程很簡單,這裏我以下載壓縮包方式來,解壓就能用了
首先下載安裝包
https://nodejs.org/en/download/
點擊下載相應的zip版本
然後將文件夾解壓到任意目錄
比如我這裏解壓到了:C:\Program Files\nodejs中
然後在這個目錄下新建兩個文件夾
node-cache
node-global
這是用來放npm全局模塊的安裝目錄,也可以放到其他地方。
配置環境變量
新建一個系統變量
變量名:NODE_HOME
變量值(你的安裝目錄):C:\Program Files\nodejs
編輯Path變量
新增兩個條目
%NODE_HOME%
%NODE_HOME%\node-global
打開CMD,如果執行的時候報錯,試着換用管理員運行
運行下面的命令,這裏的地址也是安裝目錄
npm config set prefix "C:\Program Files\nodejs\node-global"
npm config set cache "C:\Program Files\nodejs\node-cache"
設置npm國內源(可選):
npm config set registry "https://registry.npm.taobao.org"
測試,運行下面的命令有版本出現即可
若出現相應的版本號,則說明你安裝成功了。
到目前爲止,node的環境已經安裝完成,npm 包管理器也有了,由於有些npm資源被屏蔽或者是國外資源的原因,經常會導致npm安裝依賴包的時候失敗,所以我們還需要npm的國內鏡像----cnpm.
2) 安裝cnpm
在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org ,然後等待,沒報錯表示安裝成功,如下圖:
完成之後,我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步瞭解cnpm的,查看淘寶npm鏡像官網。
3) 安裝vue-cli 腳手架構建工具
在命令行中運行命令 npm install -g vue-cli ,然後等待安裝完成。
通過以上三部,我們需要準備的環境和工具都準備好了,接下來就開始使用vue-cli來構建項目。
首先我們要選擇存放項目的位置,然後再用命令行將目錄轉到選定的目錄,在這裏,我選擇在D盤下創建新的目錄(nodetest 目錄),用cd 將目錄切到該目錄下,如下圖:
在nodetest 目錄下,在命令行中運行命令 vue init webpack firstapp 。解釋一下這個命令,這個命令的意思是初始化一個項目,其中webpack是構建工具,也就是整個項目是基於webpack的。其中firstapp是整個項目文件夾的名稱,這個文件夾會自動生成在你指定的目錄中(我的實例中,會在nodetest 目錄生成該文件夾),如下圖。
運行初始化命令的時候會讓用戶輸入幾個基本的配置選項,如項目名稱、項目描述、作者信息,對於有些不明白或者不想填的信息可以一直按回車去填寫就好了,等待一會,就會顯示創建項目創建成功,如下圖:
接下來,在notetest目錄下去看是否已創建文件:
介紹一下目錄及其作用:
build:最終發佈的代碼的存放位置。
config:配置路徑、端口號等一些信息,我們剛開始學習的時候選擇默認配置。
node_modules:npm 加載的項目依賴模塊。
src:這裏是我們開發的主要目錄,基本上要做的事情都在這個目錄裏面,裏面包含了幾個目錄及文件:
assets:放置一些圖片,如logo等
components:目錄裏放的是一個組件文件,可以不用。
App.vue:項目入口文件,我們也可以將組件寫這裏,而不使用components目錄。
main.js :項目的核心文件
static:靜態資源目錄,如圖片、字體等。
test:初始測試目錄,可刪除
.XXXX文件:配置文件。
index.html:首頁入口文件,可以添加一些meta信息或者同統計代碼啥的。
package.json:項目配置文件。
README.md:項目的說明文件。
這就是整個項目的目錄結構,其中,我們主要在src目錄中做修改。這個項目現在還只是一個結構框架,整個項目需要的依賴資源都還沒有安裝。
安裝項目所需要的依賴:執行 cnpm install (這裏可以用cnpm代替npm了)
安裝完成之後,會多一個node_modules文件夾,這裏面就是我們所需要的依賴包資源。
運行項目
在項目目錄中,運行命令 npm run dev ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。
看到這裏 你已經把握使用npm方式安裝vue了