使用Vue-CLI腳手架快速創建Vue項目

前言

Vue CLI是用於快速Vue.js開發的完整系統。俗稱Vue CLI腳手架，是一套大衆化的前端自動化解決方案，他的核心是 webpack ，框架是vue，還有相關輔助插件組成。

準備環境，安裝Vue CLI

安裝步驟省略，輸入命令 vue -V 輸出如下版本信息，即安裝成功了，提示：2.0以下版本是沒有提供圖形化界面的，只能通過命令創建。

使用參考文檔

1、https://cli.vuejs.org/guide/

2、https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#%E5%BC%80%E5%A7%8B

一、創建項目存儲文件夾

二、CMD打開當前文件夾所在路徑

通過以下vue ui命令使用圖形界面來創建和管理項目：

vue ui

三、項目的配置

1、創建項目存儲位置

2、項目名命名

3、項目預設

選擇手動，這樣自己定製，項目會比較簡潔。

4、項目功能配置

es6語法檢查，默認選中，最好去掉，不然你會爆炸的。

5、項目歷史記錄配置

6、是否保存模板（下一次可以使用該配置模板開發）

看你喜好，想存就存。

7、測試

項目創建完成之後，可測試是否成功，


8、擴展，集成Element-ui

其實如上步驟，我們使用腳手架就已經快速創建好了一個前端項目了，實際中，你可能還要依賴於其他框架如Element-ui和vue完成整個項目頁面的開發，以及還要其他必要的庫，如axios庫。你可以通過命令的方式在開發工具中，進行安裝，也可以直接在vue_cli可視化界面進行安裝。

如下已經成功安裝了。

9、安裝Axios依賴庫

根據實際需求，可選擇依賴的環境。

10、本地測試

使用開發工具打開剛剛我們使用腳手架創建好的項目。

運行測試（不同的開發工具方式可能不一樣，有的開發工具不需要命令啓動），這裏以IDEA爲開發工具：

輸入命令：

npm run serve

輸出以上信息表示成功了。

11、測試element-ui

找到入口頁面，App.vue，我們試着使用element-ui的button將該行代碼換掉。

element-ui官網：https://element.eleme.cn/#/zh-CN/component/button

瀏覽器頁面效果

12、測試axios庫

導入axios庫

import axios from 'axios'

編寫業務請求HTTP接口：

 // GET請求
 axios.get('/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

關於axios的具體使用，有如下推薦文檔：

1、https://github.com/axios/axios

2、https://www.kancloud.cn/yunye/axios/234845

3、http://www.axios-js.com/zh-cn/docs/

13、axios發送HTTP請求解決後端跨越問題

穿越該篇博文，你想要的都有