Django+Vue项目学习第二篇：vue项目创建

冰霜

发布于 2022-03-15 15:42:01

9480

发布于 2022-03-15 15:42:01

文章被收录于专栏：冰霜的软件测试技术分享

本篇介绍vue项目的搭建过程

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/ 访问一下，显示的是我自定义的页面，如下