Vue + Spring Boot從零開始搭建個人網站(一) 之 項目前端Vue.js環境搭建


前言:

        最近在考慮搭建個人網站,想了想決定采用前后端分離模式

        前端使用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目錄下進行

        

 


免責聲明!

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



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