VUE+Element-ui+Springboot環境配置

前端：搭建vscode+vue+element環境

一、vue

1.安裝最新的node.js
2.安裝vue-cli腳手架構建工具
   在命令行中運行命令 

npm install -g vue-cli 

3.進入項目文件夾存放目錄， 創建項目(vue init webpack firstVue),其中firstVue是項目文件夾的名稱，選項除了vue-router全部選No。

cd D:\Projects\softwareEproject
vue init webpack firstVue  //firstVue是項目文件夾的名稱，選項除了vue-router全部選No。

4.cd到項目文件夾（firstVue文件夾），然后運行命令 npm install ，安裝依賴

cd D:\Projects\softwareEproject\firstVue
npm install

5.如果npm安裝依賴失敗，則返回最初的系統用戶目錄，安裝cnpm（國內的)。若成功，則直接進入步驟7。

npm install -g cnpm --registry=http://registry.npm.taobao.org

6.cd到項目文件夾（firstVue文件夾），然后運行命令 cnpm install ，安裝依賴

cd D:\Projects\softwareEproject\firstVue
cnpm install

7.運行項目(進入項目文件夾)：cnpm run dev， 瀏覽器打開http://localhost:8080，查看項目的運行結果

cd D:\Projects\softwareEproject\firstVue
cnpm run dev 

 

【備注】1.這里是使用 CLI 構建出來的 Vue 項目。

               2.cnpm和npm用一個即可，盡量不要混用。

               3.start 即是執行 npm run dev 命令（查看package.json中的scripts可知）

（參考：https://blog.csdn.net/mao834099514/article/details/79138484）

 

二、vscode
1.安裝vscode
2.在vscode中添加插件vetur

 

三、集成element
1.安裝elenment-ui 

    命令行進入到項目根目錄輸入cnpm i element-ui -S，安裝完成之后，package.json文件會增加element-ui依賴（dependencies中）

cnpm i element-ui -S

2.用完整引入方式在main.js中寫入以下內容：

 import ElementUI from 'element-ui' //引入js

 import 'element-ui/lib/theme-chalk/index.css'//引入css

 Vue.use(ElementUI)

3. 運行項目：安裝依賴 cnpm install，運行 cnpm run dev，瀏覽器打開http://localhost:8080

cd D:\Projects\softwareEproject\firstVue
cnpm install
cnpm run dev

 

后端：