前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Django+Vue项目学习第二篇:vue项目创建

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

作者头像
冰霜
发布2022-03-15 15:42:01
9480
发布2022-03-15 15:42:01
举报
文章被收录于专栏:冰霜的软件测试技术分享

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

1. 创建一个vue项目

打开cmd窗口,切换到自己想放项目的目录,执行如下命令

代码语言:javascript
复制
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标签下的代码先默认不动,如下

代码语言:javascript
复制
<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代码也删掉

代码语言:javascript
复制
<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代码,调通前后端

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-12-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 冰霜blog 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档