Django+Vue項目學習第二篇：vue項目創建

本篇介紹vue項目的搭建過程

傳送門：

Django+Vue項目學習第一篇：django后台搭建

Django+Vue項目學習第三篇：使用axios發送請求，解決跨域問題，調通前后端 

Django+Vue項目學習第四篇：使用axios發送攜帶參數的get請求

Django+Vue項目學習第五篇：vue+django發送post請求，解決csrf認證問題

Django+Vue項目學習第六篇：vue+django發送post請求，設置不同content-type，前后端如何處理參數

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

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代碼，調通前后端