先後端分離-前端搭建（vue）

前端使用vue，那麼怎麼搭建vue呢

 

先安裝nodejs以及npm

如今基本的nodejs都包含有npm，下載安裝後，

能夠在cmd命令裏輸入 

node -v    和npm -v 分別查看安裝的版本 

兩個都顯示了版本就是安裝ok

 

nodejs安裝成功以後，就安裝vue

 

直接cmd命令裏運行

npm install -g  vue-cli   (只須要第一次安裝時執行) 

選定一個開發路徑

在文件裏運行cmd  執行命令   

vue init  webpack  project(文件下的項目名)        初始化你的項目，

cd project    進入你的項目目錄裏

npm install      下載依賴  

npm run  dev    啓動項目

 

兩個npm命令也能夠在軟件（就是下面說的那個前端開發軟件）中去執行

 

這樣弄好後 ，之後啓動項目直接在這右上角就能夠直接啓動了  ，就不用每次都去輸入命令

而後在瀏覽器裏輸入   http://localhost:8080  

有個綠色的倒三角形    以及下面一些英文   說明成功了

 

有個專門的前端開發軟件和idea是同一個公司開發的軟件  JetBrains WebStorm  

和idea一樣的快捷鍵 

下載好了前端軟件後，打開

選擇這裏的open  打開你剛剛建立的vue項目

 

 

大體框架以下

使用vue開發後端，只有一個靜態頁面    index.html

一樣是在src裏面進行開發

1. build 文件夾，用來存放項目構建腳本
2. config 中存放項目的一些基本配置信息，最經常使用的就是端口轉發
3. node_modules 這個目錄存放的是項目的全部依賴，即 npm install 命令下載下來的文件
4. src 這個目錄下存放項目的源碼，即開發者寫的代碼放在這裏
5. static 用來存放靜態資源
6. index.html 則是項目的首頁，入口頁，也是整個項目惟一的HTML頁面
7. package.json 中定義了項目的全部依賴，包括開發時依賴和發佈時依賴

對於開發者來講，之後 99.99% 的工做都是在 src 中完成的，src 中的文件目錄以下：

1. assets 目錄用來存放資產文件
2. components 目錄用來存放組件（一些可複用，非獨立的頁面），固然開發者也能夠在 components 中直接建立完整頁面。
3. 推薦在 components 中存放組件，另外單獨新建一個 page 文件夾，專門用來放完整頁面。
4. router 目錄中，存放了路由的js文件
5. App.vue 是一個Vue組件，也是項目的第一個Vue組件
6. main.js至關於Java中的main方法，是整個項目的入口js