我需要将 riot js 添加到我的 laravel 项目中,但不确定我是否采用正确的方法将 riot 集成到 laravel 项目中。
我在 laravel 视图文件夹中的blade.php 文件中进行了如下尝试。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Laravel</title>
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,600"
rel="stylesheet"
type="text/css"
/>
<script src="../js/riotcompiler.js" type="riot/tag"></script>
</head>
<body>
<hello></hello>
<script src="../tags/hello.tag" type="tag"></script>
<script>
riot.mount("hello");
</script>
njk
</body>
</html>
然后当我运行 laravel 项目时,它会生成一个异常,说 riot is not Defined。但我已经在全球范围内安装了 riot。那么我该如何解决这个问题呢?我需要通过composer安装riot吗?
如果将 js 文件移动到
public/js
文件夹,您可以在 Blade 文件中使用以下命令调用它:
<script type="text/javascript" src="{{ URL::asset('js/riotcompiler.js') }}"></script>
函数
URL::asset()
将为您生成必要的网址。
我相信这会成功:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Laravel</title>
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,600"
rel="stylesheet"
type="text/css"
/>
<script src="../js/riotcompiler.js" type="riot/tag"></script>
</head>
<body>
<hello></hello>
<script src="../tags/hello.tag" type="tag"></script>
<script>
riot.compile(function() {
// here tags are compiled and riot.mount works synchronously
riot.mount('hello')
})
</script>
</body>
</html>
问题在于没有将标记文件和 riotcompiler 文件保留在公共目录中,并且没有在 Laravel 中以正确的方式给出路径。所以可行的代码如下。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Laravel</title>
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,600"
rel="stylesheet"
type="text/css"
/>
<script
type="text/javascript"
src="{{ URL::asset('js/riotcompiler.js') }}"
></script>
</head>
<body>
<hello></hello>
<script
src="{{ URL::asset('tags/hello.tag') }}"
type="riot/tag"
></script>
<script>
riot.mount("hello");
</script>
njk
</body>
</html>