canihelpyou

662 经验值

在laravel 5.3中使用element-UI,不是使用前后端分离的方式开发,
先按照这篇文章进行了配置http://codesky.me/archives/try-laravel5-vue2-element-cn.wind
demo已经正常显示,即welcome.blade.php是下面这样的:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <div id="app">
    <example></example>
    <el-button>Hello</el-button>
  </div>
  <script src="  asset('js/app.js')  "></script>
</body>
</html>

问题:
1、思路仍然有点混乱,不知道element-UI组件该怎么使用,比如要使用下面这个开关http://element.eleme.io/#/zh-CN/component/switch#switch-kai-guan
组件代码应该放哪里?是弄成.vue文件还是直接在页面需要的位置写?

<el-switch
  v-model="value1"
  on-text=""
  off-text="">
</el-switch>
<el-switch
  v-model="value2"
  on-color="#13ce66"
  off-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
        value1: true,
        value2: true
      }
    }
  };
</script>

2、这种js渲染的表单类元素,要提交的时候可以用传统方式提交吗?还是只能用ajax提交?

以前都是用cdn,现尝试打包到一个js文件中,
app.js文件中require()要打包的文件,例如下面的tethercropper

require('tether');//因为tether要在Bootstrap的前面引入,所以放在./bootstrap前面,但仍会报错
require('./bootstrap');

require('cropper');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: 'body'
});

运行gulp,这一步倒是没什么问题,但是浏览器运行时却有错误:

Uncaught Error: Bootstrap tooltips require Tether
Uncaught TypeError: $image.cropper is not a function

怎么一回事?

本站的js好像是打包到一个文件的,站长是怎么弄的?

备注一下:

上面bootstrapBootstrap是两个东西, bootstrapresources/assets/js的一个文件bootstrap.js,Bootstrap` 是 Twitter的UI.

像这种html和vuejs混写的方式,如果vuejs用到了es6的语法,浏览器不能运行,要编译成es5,怎么做呢?