公司要開始分配給我做前后端分離專案了555555555555

讓我一個java的去了解vue并且還要會搭建=-=
莫得辦法那么就開始必不可少的安裝環節吧:
第一步!
安裝node.js:
首先進入官網node.js 附上官網url:https://nodejs.org/en/

按照箭頭 選擇下載windows64位的,然后等待下載完成
第二步:
裝完之后,我們通過打開命令列工具(win+R),輸入 node -v 命令
此命令是查看node.js版本:

看看版本號對不對應!如果是相應的版本號說明安裝成功,
npm包管理器,是集成在node中的,所以安裝了node也就有了npm,輸入 npm -v ,顯示npm的版本資訊:

到了這一步,node的環境已經安裝完成
第三步:
安裝cnpm
輸入 npm install -g cnpm --registry=https://registry.npm.taobao.org ,
然后等待,沒報錯表示安裝成功,如圖!

第四步:
安裝vue-cli 腳手架構建工具
輸入:npm install -g vue-cli ,然后等待安裝完成

通過以上三部,我們需要準備的環境和工具都ok了,現在就要開始使用vue-cli來構建專案
第五步:
要選擇存放專案的位置,我選擇在c盤下創建新的目錄:NodeTest
一定要手動創建!!!!!


就像我這樣!!!用cd 將目錄切到該目錄下
在NodeTest 目錄下,運行命令 vue init webpack firstApp

然后按照我這樣寫:

專案名稱、專案描述、作者資訊,對于有些不明白或者不想填的資訊可以一直按回車去填寫就好了
中間會等待,讓程式自己下載吧,會有很多的東西出來不用管!之后會顯示成功:

第六步:
現在我們去NoteTest目錄下去看是否已創建檔案:

打開firstApp,目錄如下:

介紹一下目錄及其作用:
build:最終發布的代碼的存放位置,
config:配置路徑、埠號等一些資訊
node_modules:npm 加載的專案依賴模塊,
src:這里是我們開發的主要目錄,基本上要做的事情都在這個目錄里面,里面包含了幾個目錄及檔案:
assets:放置一些圖片,如logo等
components:目錄里放的是一個組件檔案,可以不用,
App.vue:專案入口檔案,我們也可以將組件寫這里,而不使用components目錄,
main.js :專案的核心檔案
static:靜態資源目錄,如圖片
test:初始測驗目錄,可洗掉
.XXXX檔案:組態檔,
index.html:首頁入口檔案
package.json:專案組態檔,
README.md:專案的說明檔案,
第七步:
主要在src目錄中做修改,這個專案現在還只是一個結構框架,整個專案需要的依萊澩都還沒有安裝,
安裝專案所需要的依賴:控制臺執行 cnpm install
這時候可以用cnpm來代替npm了

安裝完成之后,我們到自己的專案中去看看,這時候會多一個node_modules檔案夾,這里面就是我們所需要的依賴包資源,

第八步:
運行專案!
控制臺輸入 npm run dev ,會用熱加載的方式運行我們的應用,
熱加載可以讓我們在修改完代碼后不用手動重繪瀏覽器就能實時看到修改后的效果:

第九步:
專案啟動后,在瀏覽器中輸入專案啟動后的地址:http://localhost:8081/#/

第十步!
整個專案就完成啦!來看看效果:

至此,vue的安裝就結束啦!供大家參考哦~
一如軟體深似海 既然選擇了就努力的學下去 這個年紀不拼一下誰知道未來會是什么樣子捏
如果作業不忙的話之后寫一寫spring的筆記吧 這可是每個java開發工程師必須學的一個東西~

加油!為了高薪!我們還年輕!
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/250456.html
標籤:Java
