vue.js的安裝

公司要開始分配給我作先後端分離項目了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開發工程師必須學的一個東西~

 

 加油！爲了高薪！咱們還年輕！