1.安裝node.js
從node.js官網下載
官網地址:https://nodejs.org/zh-cn/download/ (這是中文的官網)
並安裝node
安裝過程很簡單,一直點下一步就ok了。
1.1我們通過打開命令行工具(win+R),輸入node -v查看node的版本,若出現相應的版本號說明你安裝成功了
1.2.npm包管理器,是集成在node中的,所以安裝了node也就有了npm,直接輸入 npm -v 命令,顯示npm的版本信息。
現在node環境已經安裝完成了,npm包管理器也有了,聽說由於有些npm資源被屏蔽或者是國外資源的原因,經常會導致npm安裝依賴包的時候失敗,所以我們還需要npm的國內鏡像----cnpm(淘寶的鏡像)
2.安裝cnpm
在命令行中輸入以下的指令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后等待,沒報錯表示安裝成功,(我的已經安裝過了,顯示更新成功的信息),如下圖:
完成之后,我們就可以用cnpm代替npm來安裝依賴包了。
3.安裝vue-cli腳手架構建工具
在命令行運行命令:
npm install -g vue-cli
然后等待安裝完成。如下圖:
通過以上三個步驟,我們所需要准備的環境和工具都准備好了,接下來就開始使用vue-cli來構建項目。
首先我們要選擇存放項目的位置(在這里我就進入E盤了,你也可以進入其他盤符來創建)用DOS命令e:先進到我的E盤,再輸入dir查看所有E盤中所有的文件及文件夾(可以看到現在E盤並沒有NodeDemo這個文件夾)
2.接下來我們開始新建一個文件夾,(在這里我就把創建的NodeDemo文件夾放在E盤了,你也可以選擇其他盤符來存放demo)輸入md NodeDemo然后按回車鍵,注意md后面有一個空格。然后可以用dir查看一下文件夾是否創建完成:如下圖(我已創建好了)
3.然后再用cd命令將目錄轉到選定的目錄:如下圖:
在NodeDemo目錄下,在命令行中運行命令:
vue init webpack firstApp
解釋一下這個命令,這個命令的意思是初始化一個項目,其中webpack是構建工具,也就是整個項目是基於webpack的。其中firstApp是整個項目文件夾的名稱,這個文件夾會自動生成在你指定的目錄中(我的實例中,會在NodeDemo 目錄生成該文件夾),
運行初始化命令的時候會讓用戶輸入幾個基本的配置選項,如項目名稱、項目描述、作者信息,對於有些不明白或者不想填的信息可以一直按回車去填寫就好了如下圖:
等待一會,就會顯示創建項目創建成功,如下圖:
接下來,我們去看NodeDemo目錄下去看是否已創建文件:
打開firstApp項目,項目中的目錄如下:
介紹一下目錄及其作用:
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目錄中做修改。
(第一次創建vue項目的話 好像node_modules這個依賴包資源就會沒有,反正沒有的話就cnpm install 安裝一下依賴就好了)我這個項目現在創建完就有 node_modules這個依賴包資源文件夾了就不用 再cnpm install 安裝依賴包資源。
安裝項目所需要的依賴先cd 進入到firstApp文件夾先
然后:執行 cnpm install (這里可以用cnpm代替npm了)
安裝完成之后,我們到自己的項目中去看,(如果沒有的話)會多一個node_modules文件夾,這里面就是我們所需要的依賴包資源。
安裝完依賴包資源后,我們就可以運行整個項目了。運行項目前一定要確保依賴包資源存在
運行項目
在項目目錄中,運行命令 npm run dev ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果。
項目啟動后,在瀏覽器中輸入項目啟動后的地址:http://localhost:8080
在瀏覽器中會出現vue的logo: