Vue.js 提供一個官方命令行工具,可用於快速搭建大型單頁應用。
1.Seup node.js
2. npm install -g cnpm --registry=https://registry.npm.taobao.org
3. cnpm sync connect
4.cnpm install vue
5.cnpm install -g vue-cli
6.vue -V
7. vue init webpack my-project
先列出我們接下來需要的東西:
- node.js環境(npm包管理器)
- vue-cli 腳手架構建工具
- cnpm npm的淘寶鏡像
1) 安裝node.js
解釋器安裝(windows):
1、下載:到官網下載https://nodejs.org/en/download/
2、安裝和普通的軟件一樣安裝,主要就是一個安裝目錄的問題而已,隨便選擇目錄。
3、檢查系統的path環境變量中是否配置了node.exe的目錄路徑:
請參考:https://www.cnblogs.com/zhouyu2017/p/6485265.html
IDE是WebStorm,界面跟pycharm相似。
(2)安裝cnpm
在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org ,沒報錯表示安裝成功,
3) 安裝vue-cli 腳手架構建工具
在命令行中運行命令 npm install -g vue-cli ,然後等待安裝完成。
是否安裝成功:vue -V
# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 這裏需要進行一些配置,默認回車即可
cd 項目名;進入項目中
安裝項目package.json所需要的依賴:執行 cnpm install (npm可能會有警告,這裏可以用cnpm代替npm了,運行別人的代碼需要先安裝依賴)
介紹一下目錄及其作用:
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了)
運行項目
在項目目錄中,運行命令 npm run dev ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。