前言:
最近在考慮搭建個人網站,想了想決定采用前后端分離模式
前端使用Vue,負責接收數據
后端使用Spring Boot,負責提供前端需要的API
就這樣開啟了我邊學習邊實踐之旅
Vue環境搭建步驟:
1、安裝node.js
a)進入node.js官網(https://nodejs.org/en/download/),選擇對應版本下載,並進行安裝(安裝時,按照提示,一直next)
b)驗證node.js是否有安裝好:打開命令行窗口,輸入node -v,會返回對應的node.js版本號
c)npm包管理器是集成在node.js中,在安裝node.js時已安裝了npm,所以不需要特別再安裝,在命令行窗口中,輸入npm -v,即可得到npm版本號
d)輸入以下命令npm -g install npm,可更新npm至最新版本
2、安裝cnpm
a)輸入以下命令npm install -g cnpm --registry=https://registry.npm.taobao.org,使用npm國內鏡像(https://npm.taobao.org/)
3、使用cnpm安裝vue腳手架vue-cli
a)輸入以下命令cnpm install -g vue-cli,安裝腳手架
b)輸入以下命令vue -V,查看vue版本號
創建項目:
可自定義將項目創建到某個路徑下(Eg:G:\workspace-vue)
a)通過命令進入該路徑
b)輸入以下命令新建項目vue init webpack annewebsite,執行后會自動生成vue項目
c)在實體目錄下進行查看
安裝項目依賴:
以上通過腳手架創建的vue項目,還不能直接運行,需要加載上項目需要的依賴包才能運行
a)通過命令進入到項目所在目錄(G:\workspace-vue\annewebsite)
b)輸入以下命令cnpm install,安裝項目所需的依賴包
運行項目:
項目已經配置完畢,可以開始運行項目,看一看初始效果了
a)通過命令進入到項目所在目錄(G:\workspace-vue\annewebsite)
b)輸入以下命令npm run dev,來運行項目
c)在瀏覽器中訪問項目,查看效果
備注:
以上就是整個項目的環境搭建過程,可以在工具中查看項目目錄,后續的開發工作都將在src目錄下進行