周海龙 / mail-serve · 文件

这个是使用vue扩展

• 加载的是element-ui
• 不能使用ts只能使用js

• 必须使用双标签 这里无法自动补全结束标签

  <el-table>
  <!--错误-->
  <el-table-column prop="address" label="Address" sortable />
  <!--正确-->
  <el-table-column prop="address" label="Address" sortable ></el-table-column>
  </el-table>

  使用实例

  // 必须先设置 vue的运行目录
  Vue::runPath('path');
  // 不含 .vue文件后缀 的模板文件 在 运行目录下面 填写相对路径
  Vue::view('home/index'); // 这个是半组件模式 使用了混淆数据
  Vue::view2('home/index'); // 这个是纯组件模式
  // 数据渲染
  Vue::view('home/index',['data'=>'hello','tableData'=>['id'=>1]]);

  // laravel 中 return response(Vue::view2('home',[]),200,['Content-Type'=>'text/html']); // 或者使用异常返回 throw new HttpResponseException(response(Vue::view2('home',[]),200,['Content-Type'=>'text/html']));

  // 混合使用，把vue嵌套在其他html页面上 $var = Vue::viewBlade('模板名字',['参数，就是需要渲染在页面上的服务器数据'],'这个是模板所在目录'); // $var = ['html'=>'','css'=>'','js'=>'']; // 在页面上 {{$var['html']}}{{$var['css']}}{{$var['js']}} 放入对应的位置即可

> 混合使用示例 xxx.blade.php 

@extends(config('view.layout'))

@section('content')

@endsection

@section('custom_js') 放入css代码 {!! $vue['css'] !!}

放入js代码
{!! $vue['js'] !!}

@endsection

> 后端数据传入vue进行数据渲染
* 标签 <{#data#}> 普通数据模式
~~~vue
<!-- 模板使用 --->
<template>
  <{#data#}>
</template>

<!--最后页面呈现的是-->
<template>
    hello
</template>

• 标签 <[{#data#}]> 对象模式 注意 一定要用引号把标签给引起来 否则vue页面会报错 ~~~vue <!-- 模板使用 --->

> vue页面的组件使用 组件也必须在运行目录中 
~~~vue
<template>
<!--    使用my_component组件-->
    <my_component></my_component>
</template>
<script>
export default {
    data(){
        return {
            tableData: {id:1}
        }
    },
    components:{
        my_component: "@component(component/my)", // 这里引号可以单双
    }
}
</script>

• @component() 必须 括号中间的是组件文件名称
• 不要使用无限嵌套的组件，不要嵌套组件过多

使用 axios 进行数据请求

• axios已做了公共的响应和请求处理 当message有值时 页面会自动弹出提示 非200弹出的是错误提示
• 后端无需在渲染 X-CSRF-TOKEN了，已在请求时自动加入
• 如有特殊需求需要用 X-CSRF-TOKEN 在页面使用 常亮 CSRF_TOKEN ~~~vue ~~~
• 后端返回的数据必须是json 格式如下 ~~~json { "status": 200, "message": "提示消息", "data": [] } ~~~

组件的规范

• 组件示例 如 index.vue ~~~vue 我是组件 index

* 注意 css 可以加 scoped 限定标识

### ajax() 的使用
* 是对axios的再次封装
* ajax()不会执行catch了,已经统一处理过了
~~~vue
<script>
export default { // 必须这样写 这一行
    methods:{
        getList(){
          // post 请求 url 请求数据
            ajax().post('url',{}).then(res=>{
              // 处理结果
            })
            // get 请求
            ajax().get('url').then(res=>{
              // 处理结果
            })
            // delete请求
            ajax().delete('url').then(res=>{
              // 处理结果
            })
        }
    }
}
</script>

elMsg 弹窗消息提示

• elMsg是对element-ui的消息提示进行了缩减写法 ~~~javascript elMsg.error('') // 错误提示 elMsg.success('') // 成功提示 ~~~
• elMsgBox 弹出确认框 ~~~javascript elMsgBox.confirm('提示信息').then(()=>{ // 你的逻辑代码 }) ~~~