【前端28_Vue-Cli 腳手架】萌新指南、安裝腳手架、創建項目、項目目錄介紹、路由重定向、代碼規範ESlint、常用組件：Element、Vue-Axios

Vue-cli 腳手架

介紹

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。
就是說我們在開發的時候，前期需要配置很多東西（網絡組件，路由組件，打包組件等等），有了Vue-cli腳手架，他會幫我們集成這些功能

安裝

可以通過以下命令，在命令行裏敲

npm install -g @vue/cli
# OR
yarn global add @vue/cli

創建一個項目

創建項目有兩種方法

1. 代碼創建
2. 圖形界面GUI

代碼創建

• 找到想要創建項目的文件夾，在此文件夾下打開cmd，（按住shift + 鼠標右鍵），在右鍵菜單裏打開powershell或者是git bash。（PS:如果在PowerShell中出現cannot be loaded because running scripts is disabled on this system.）問題，打開鏈接閱讀。

• 輸入命令vue create 項目名字
  

• 選擇安裝依賴（babel 是es6轉es5的工具，eslint是代碼格式校驗工具，默認是安裝這兩個依賴的，如果沒選上，後期也可以選擇添加的，莫慌，router是路由模塊，是我自己加的，因爲會用到）
  

• 我的配置大概是這樣，這個自由性很高，沒必要都一樣
  

• 稍等幾分鐘，成功的話會提示你的

圖形界面GUI創建項目

• 在cmd中輸入命令vue ui，回車之後稍等一會，會在瀏覽器中彈出頁面。
• 緊接着跟着圖示走就可以了，建項目的時候也會很慢，稍等即可。

項目目錄介紹

新建好之後是如下這樣的（可能有些文件不一樣，莫慌）

• 其中最重要的是src了，以後打代碼都是在src裏打
  • App.vue： 首頁
  • main.js ：入口文件
  • assets：靜態文件
  • components：組件
  • router：路由配置

路由

在腳手架右上角會有提示，讓你安裝vue-router
安裝完之後就會在src文件夾生成router文件，裏面的js就是路由管理文件

• 路由重定向

  {
    path: '/',
    // 路由重定向
    redirect:'/Login'
  },

代碼規範

萌新會遇到如下的錯誤

這並不是代碼寫錯了，而是規範的問題

這個ESLint插件幫我們檢查的，前期的規範想養成的養成，也可以關掉規範檢查，如下

常用框架

Element ui

首先在依賴中安裝 element-ui，安裝好依賴之後，在main.js中引入

快速上手

Vue-Axios

axios是網絡請求，原生網絡請求的封裝

在腳手架中添加依賴

• 前臺發起請求可以這樣寫，首先要在組件腳本開頭引入axios

import axios from 'axios'

然後寫邏輯代碼，寫鏈式的話會比較清晰。

// 這裏的指針是爲了在axios裏使用組件裏的參數
let _this = this;

// 前臺發送請求
axios.get('http://localhost:3000/register', {
  params: {
    username:this.username,
    psw:this.psw
  }
})
  .then(function (response) {
    // 提示註冊成功
    // axios 中的this需要定向
    // console.log(response);
    if (response.data == '200'){
      _this.$message({
        message: `${_this.username}註冊成功`,
        type: 'success'
      })
    }
  })
  .catch(function (error) {
  	// 抓取錯誤
    console.log(error)
  })