Vue项目开发

创建项目：

1、全局安装vue-cli脚手架：npm install --global vue-cli

2、创建vue项目：vue init webpack myProject

3、切换到项目文件夹下，运行项目：npm run dev

一、组件开发

一般项目中会有很多都是板块都是一样的，所以使用模块化开发会减少很多工作量，没个模块都抽成单独的组件，在各个位置复用，不仅能够有效的提升开发的速度，也能更好的控制和修改项目。

组件中最重要的就是彼此之间的通信，值得注意的是组件之间通信必须是父子关系，不能跨组件，组件之间的通信大体分为两种情况，子传父和父传子。父传子用props，子传父用$emit()，具体怎么传值这里就不做具体介绍。

抽成出来的组件，不仅要考虑接收父组件传过来的值，也要考虑接受子组件传出来的值，因此我讲抽成组件分成三步。

第一步：先定义出组件单纯的样式

第二步：绑定属性

第三部：绑定事件

组件的使用：

二、接口调用

项目开发中前后台通信是必不可少的，但是如果在项目中直接输入接口地址也不便于管理。此时我们可以统一管理。通过axios封装：

扫描二维码关注公众号，回复： 11264920 查看本文章

三、数据验证

验证数据分一下几步：

1、先绑定需要验证的数据表单：在form表单中添加ref属性绑定一个名字，例如：ref="ledgerform"

2、需要验证的选项必须添加在el-form-item元素里面，并在该元素中添加prop属性，属性值为验证的名字

<el-form-item label="" prop="hotLine">
                  <el-input v-model="form.hotLine" placeholder="请输入热线电话"></el-input>
                </el-form-item>

3、在该页面的data对象中定义验证规则

export default{
  data(){
     return {
       rules: {
          /* 对应变量名: [
            { type: 'array', required（是否必填）: true, message（未填写时标记信息）: '请选择图片', trigger（触发方法）: 'change' }
          ],*/
          propertyId: [
            { required: true, message: '请选择设备属性', trigger: 'change' }
          ],
          classifyId: [
            { required: true, message: '请选择系统分类', trigger: 'change' }
          ],
          equipmentTypeId: [
            { required: true, message: '请选择设备分类', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入设备名称', trigger: 'change' }
          ],
          code: [
            { required: true, message: '请输入设备编号', trigger: 'change' }
          ],
          patternId: [
            { required: true, message: '请输入设备型号', trigger: 'change' }
          ]
        }
     }
  }
}

4、在提交方法中进行验证

this.$refs.ledgerform.validate(valid => {
   if(valid){
      //验证通过
   }else{
      //验证不通过
    }
})

四、mock的使用

mock的使用是为了当后台接口还没有开发完成时，不影响前端的开发进度，自己写一个mock数据，来模拟接口的请求和数据的获取，实现前后端分离。

1、添加axios：npm install axios --save

2、引入mock.js文件：npm install mockjs --save-dev

3、在入口js（main.js）里引入mockjs

// 引入mockjs
require('./mock.js')

4、添加一个mock规则（mock.js）

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
    let articles = [];
    for (let i = 0; i < 100; i++) {
        let newArticleObject = {
            title: Random.csentence(5, 30), //  Random.csentence( min, max )
            thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        }
        articles.push(newArticleObject)
    }
 
    return {
        articles: articles
    }
}
 
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/news/index', 'post', produceNewsData);

创建项目：

一、组件开发

二、接口调用

三、数据验证

四、mock的使用

猜你喜欢