lisp 写前端一点也不难
2019-10-13 本文已影响0人
Issacs
github
https://github.com/HuangChen1989/cljsinone
Why
- shadow-cljs 轻松整和了npm，安装npm包和编译只需几行命令，支持live reload 和错误提示。
- 使用Vue 写前端，html 加clojurescript 很轻松。
How
- 使用shadow-cljs 官方案例为基础 git clone 它
- 可以看到这是一个npm项目，而clojurescript 依赖 Java 安装依赖包括 nodejs Java
-
npx shadow-cljs watch app这是启动shadow-cljs 的命令，安装依赖，更新包，打开nrepl, 开启网页服务，一条命令完成 - 浏览器打开http://localhost:8020 就能看到hello world
- 安装 Vue vue-router
- 修改
public/index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Browser Starter</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="/js/main.js"></script>
<script>starter.browser.init();</script>
</body>
</html>
- 修改
src/starter/browser.cljs
(ns starter.browser
(:require ["vue/dist/vue.js" :as Vue]
["vue-router/dist/vue-router.js" :as VueRouter]))
(defn ^:dev/after-load start []
(.use Vue VueRouter)
(js/console.log "start"))
(def Bar (clj->js {:template "<div>bar</div>"}))
(def routes (clj->js
[{:path "/bar" :component Bar}]))
(def router
(VueRouter. (clj->js {:routes routes})))
(defn app []
(Vue.
(clj->js
{:el "#app"
:router router})))
(defn ^:export init []
(js/console.log "init")
(start)
(app))
(defn ^:dev/before-load stop []
(js/console.log "stop"))
