本篇介绍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代码，调通前后端