【干貨】前端開發VUE實例

　　最近公司招聘前端開發----VUE方向。

　　技術面試是必不可少的，發現大多數人應該沒有掌握其開發技術，今天就大概總結一下

　　一、准備工作

　　需要用到VSCODE最新版，nodejs，vue2.0（現在vue3.0已經出來了，但是大多數公司還是用的vue2.0）

　　具體安裝配置就不說了，網上太多了，況且面試的電腦上一般都已經安裝好了。

　　二、創建工程

　　vue2.0創建工程有三種方式：分別是用vue-cli腳手架、命令行、圖形化ui

　　這三種方式最快捷方便的就是第二種。

vue create hello-world
cd hello-world
npm run serve  // 運行  http://localhost:8000

　　這里說明一下三種方式的區別

1、使用vue-cli腳手架創建新vuejs項目
用vue-cli腳手架可以快速的構建出一個前端vue框架的項目結構

前提條件：已安裝node可以正常使用npm命令，並全局安裝vue-cli工具。
nodejs可以到nodejs官網下載最新的版本，根據自己的操作系統選擇合適的版本，然后安裝，配置好環境變量即可。

全局安裝vue-cli腳手架
npm install vue-cli -g
開始創建項目
使用vue初始化基於webpack的新項目
vue init webpack my-project
項目創建過程中會提示是否安裝eslint，可以選擇不安裝，否則項目編譯過程中出現各種代碼格式的問題；

項目創建完成后，安裝基礎模塊
cd myproject
npm install
模塊安裝時間有可能會很長，依賴與網速；

安裝完成之后可在開發模式下運行項目並預覽項目效果
npm run dev;
如果項目可以正常啟動，即可繼續安裝vue的輔助工具
npm install vue-router --save （路由管理模塊）
npm install vuex --save （狀態管理模塊）
npm install vue-resource --save （網路請求模塊）
下面的兩種方法是基於Vue Cli3的，
 Vue CLI3 需要 Node.js 8.9 或更高版本

2、使用vue create命令創建vue項目
vue create hello-world

 

 安裝向導，直接選擇，非常方便

 

 

cd hello-world

 

 

npm run serve  // 運行  
3、使用vue cli3的ui命令基於圖形用戶界面創建vuejs項目
在命令行窗口中輸入命令vue ui創建vuejs項目
 vue ui //  自動運行圖形頁面 
 具體可以參考使用圖形化界面創建vue項目這篇文章，傻瓜式操作，基於圖片界面的，創建、安裝依賴和插件很方便。

　　二、連接后台接口，即axios的使用

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
          list:[],
            }
  },
  created(){
    axios.post('http://192.168.0.3:9001/api/Camera/GetAll',{})
    .then((res)=>{
      console.log(res)
      this.list=res.data.data;
    })
    
  }
}
</script>

　　沒有安裝axios的先在命令中安裝npm install axios,然后如上代碼，在helloword.vue的SCRIPT中引入axios，然后在create中加入連接，並把得到的數據賦給變量list

　　三、將得到的list變量，即JSON數據渲染到前端，為了說明問題，直接用table遍歷。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <table border="1">
      <tbody>
        <th><td>area</td></th>
        <th><td>cameracode</td></th>
        <th><td>cameraname</td></th>
        <th><td>ip</td></th>
        <th><td>user</td></th>
        <th><td>pwd</td></th>
      <tr v-for="item in list" :key="item.Id">
      <td>{{item.Area}}</td>
      <td>{{item.CarmeraCode}}</td>
      <td>{{item.CarmeraName}}</td>
      <td>{{item.Id}}</td>
      <td>{{item.User}}</td>
      <td>{{item.Pwd}}</td>
      </tr>
      </tbody>
    </table>
  </div>
  
</template>

　   四、如果深入一點可以使用常用的ui組件，如Element-ui

　　直接到官網看文檔，里面有詳盡的代碼可以直接復制。