快速原型开发

VueCli提供一个插件可以进行原型快速开发

• 安装

  npm install -g @vue/cli-service-global
  

• 使用 vue serve

  在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
  
  Options:
  
    -o, --open  打开浏览器
    -c, --copy  将本地 URL 复制到剪切板
    -h, --help  输出用法信息
  

• 创建App.vue文件

• 运行

  vue serve
  

  vue serve会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个

  可以显式地指定入口文件：

  vue serve MyComponent.vue
  

安装ElementUI

• 创建文件，初始化package.json

  mkdir custom-component
  cd custom-component
  yarn init -y
  

• 安装ElementUI

  vue add element
  

• 创建main.js，加载ElementUI，使用Vue.use()安装插件

  import Vue from 'vue'
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  import Login from './src/Login.vue'
  
  Vue.use(ElementUI)
  
  new Vue({
    el: '#app',
    render: h => h(Login)
  })
  

• 创建src/Login.vue，并使用vue serve运行

组件开发

步骤条组件

• 创建Steps.vue

  使用vue serve ./Steps.vue运行，打开页面访问此组件

• 创建Steps-test.vue组件，进行测试

表单组件

• 模仿Element的Form组件，在src下创建form文件夹

• 创建Form.vue、FormItem.vue、Input.vue以及Button.vue组件

• 创建Form-test.vue测试组件

  vue serve ./src/Form-test.vue运行

• 设置表单验证

  表单验证原则：input组件中触发自定义事件validate、FormItem渲染完毕注册自定义事件validate

  修改Input.vue

  ...
  
  

  需要在Fome.vue中将Form组件实例注册依赖

  provide () {
      return {
        form: this
      }
    }
  

  修改FormItem.vue，使用async-validator进行验证

  ...
  
  
  
  
  

  修改Form.vue，提供validate方法

  methods: {
      validate (cb) {
        // 过滤出含有prop验证的节点 执行validate方法 返回promise对象
        const tasks = this.$children
          .filter(child => child.prop)
          .map(child => child.validate())
  
        Promise.all(tasks)
          .then(() => cb(true))
          .catch(() => cb(false))
      }
  }
  

• 此时重新运行，开启表单验证
  项目地址