PHP + Vue + require之不打包使用

前言

现在主流的vue写法都是采用vue脚手架工具然后打包，然而实际工作却不能。不知道你们有没有遇到过，由于项目、管理等等原因限制，不能或者不想使用vue主流的方式。

当你在网上搜索vue的使用教程，会发现都是采用脚手架工具。并没有我想要的。然而功夫不负有心人，终于让我找到解决的方法：require.js + require.text.js（重要）。

框架

• PHP MVP框架 (使用自带权限验证、获取信息、前端输出模板等)
• Vue.js
• vue-router.js (前端路由)
• require.js (js文件/模块加载器)
• require.text.js (可载入html等) 重要

目录结构

project 
│  addons 
│ │ └─── static  (静态文件)
│ │ │     └─── lib  
│ │ └─── component  (组件)
│ │ │      └────── component1
│ │ │ |              └─── index.js (vue组件js部分)
│ │ │ |              └─── index.html (vue组件template部分)
...

require使用与vue模块编写

requirejs配置

requirejs.config({
    baseUrl: sysinfo.siteroot + "addons/" + sysinfo.module + "/static",
    paths:{
        "text": "./lib/text.min", // 
    }
});

requirejs模块 （component1-->index.js）（vue组件）

// 使用requirejs异步载入template并返回会一个vue组件
define(["text!./index.html"], function(template) {
    'use strict';
    return {
        // 这里编写vue组件
        template: template,
        data(){
            return {
                name: 'zhansan',
            }
        }
    }

requirejs模块 （component1-->index.html）（vue组件）

<!-- 这里编写vue组件的template -->
<div>{{ name }}</div>

完整代码

PHP

namespace app\index\controller;
use think\View;
class Index {
    public function index(){
        $view = new View();
        $this->assign('info', ['name'=> 'lisi', 'age' => 18]);
        return $view->fetch('index');
    }
}

index.html

<div id="app">
    <div>{$info['name']}</div>
    <router-view></router-view>
</div>
<script>
    const routes = [
        {
            path: '/', 
            // 路由载入编写的vue组件component1
            component: function (resolve) { return require(['component1/index.js'], resolve)}
        },
    ];
    const router = new VueRouter({
        routes: routes
    });
    const vm = new Vue({
        el: "#app",
        router: router,
    });
</script>

代码到此结束。

结语

这边文章只是我在工作中遇到的问题，于是记录一下仅此而已，如果对你有帮助我很高兴，没有也无妨。希望工作顺利。