本篇介紹vue專案的搭建過程

傳送門：

Django+Vue專案學習第一篇：django後臺搭建

前提：已經安裝好相關的執行環境

1、建立一個vue專案

開啟cmd視窗，切換到自己想放專案的目錄，執行如下命令

D:\vue_project>vue create datafactory

這裡選擇最後一個【Manually select features】,敲回車

選手動主要是為了去掉eslint檢測，不然後續寫程式碼會有各種嚴格的程式碼檢測，令人頭大（其他的暫時用不到，只選擇【Babel】即可）

下一步會讓你選擇vue版本，這裡我選的是2.x，然後一路回車即可

2、啟動專案

使用自己的IDE開啟專案工程檔案，如下

開啟終端，輸入命令 npm run serve 啟動專案

瀏覽器輸入http://localhost:8080/ 顯示是vue啟動後的預設歡迎頁

3、編寫前端頁面

在 src/components內新建一個vue元件，命名為main_page.vue

這裡面就是我的前端頁面，在template標籤下寫html程式碼，在style標籤下寫css程式碼，script標籤下的程式碼先預設不動，如下

<template>
  <div id="main_hmk">
    <div class="b1"><button type="button" id="b01">
 
手機號碼</button></div>
    <div class="b1">
        <button  type="button" id="b02">身份證ID</button>
        <label>
          <input class="input_style" type="text" name="card_id" id="id_num" value="" placeholder="請輸入個數">
        </label>


    </div>
    <
 
div class="b1"><button type="button" id="b03">人名</button>
      <input class="input_style" type="text" name="name" id="name_num" value="" placeholder="請輸入個數">
    </div>
    <div class="b1"><button type="button" id="b07">清空輸出</button></div>

    <div><textarea class="textera" id="result"></textarea></div>
  </div>

</template>

<script>
　　export default {
　　　　name: "main_page"
}
</script>

<style scoped>
.b1 {
  float: left;

  margin-right: 20px;
  margin-left: 50px;
  margin-top: 20px;
}

.textera {
  position:absolute;
  left: 60px;
  top: 80px;
  resize: both;  /*使用者可調整元素的高度和寬度*/
  height: 244px;
  width: 823px;
}

.input_style {
  margin-left: 8px
}
</style>

把main_page.vue元件引入到App.vue

我把App.vue中原先呼叫HelloWorld.vue元件的相關程式碼刪掉了，並且原先的css程式碼也刪掉了

<template>
  <div id="app">

      <main_page></main_page>

  </div>
</template>

<script>
import main_page from "./components/main_page";

export default {
  name: 'App',
  components: {
    main_page
  }
}
</script>

<style>

</style>

瀏覽器輸入http://localhost:8080/ 訪問一下，顯示的是我自定義的頁面，如下

這樣前端頁面也寫好了，下一步開始寫js程式碼，調通前後端