64 lines
1.8 KiB
Org Mode
64 lines
1.8 KiB
Org Mode
#+title: vue hello example
|
|
#
|
|
# org-publish options
|
|
# H:2 controls section numbering.
|
|
# number top-level and second-level headings only
|
|
# ^:{} require a_{b} before assuming that b should be subscripted.
|
|
# without this option a_b will automatically subscript b.
|
|
#+options: ^:{}
|
|
#
|
|
# options used exclusively by emacs
|
|
#+startup: showall
|
|
#
|
|
# options used exclusively by the html exporter
|
|
#+language: en
|
|
#+infojs_opt: view:showall toc:nil ltoc:nil mouse:#ffc0c0 path:/ext/org/org-info.js
|
|
#+html_head: <link rel="stylesheet" type="text/css" href="../../css/notebook.css" />
|
|
#+html_link_home: ../../index.html
|
|
#+html_link_up: ../../index.org
|
|
#
|
|
|
|
* Introduction
|
|
Creating an initial project using Vue (a slightly-more-recent alternative to React)
|
|
- hello.html from https://vuejs.org/v2/guide/installation.html
|
|
- also have /Learning Vue.js 2/ (kindle)
|
|
|
|
|
|
* Prerequisites
|
|
1. A directory tree ~$HTTP_ROOT~ that you can visit in a browser or serve via http.
|
|
I'm using ~$HOME/Dropbox/public_html~, symlinked from ~$HOME/public_html~.
|
|
|
|
2. ~vue~ installed in ~$HTTP_ROOT/ext/vue~:
|
|
Donwload vue:
|
|
|
|
#+begin_example
|
|
mkdir -p $HOME/public_html/ext/vue
|
|
(cd ~/$HOME/public_html/ext/vue && wget https://unpkg.com/vue && mv vue vue.js)
|
|
#+end_example
|
|
|
|
#+begin_src sh :results output :exports both
|
|
ls -l $HOME/public_html/ext/vue
|
|
#+end_src
|
|
|
|
#+RESULTS:
|
|
: total 264
|
|
: -rw-rw-r-- 1 roland roland 264975 Jul 21 00:28 vue.js
|
|
|
|
3. Optionally, a webserver making ~$HTTP_ROOT~ available over http,
|
|
for example:
|
|
|
|
#+begin_example
|
|
cd $HOME/public_html
|
|
python -m SimpleHTTPServer 8080
|
|
#+end_example
|
|
|
|
* Hello world in Vue
|
|
[[http:hello.html]]
|
|
|
|
#+include: "hello.html" example
|
|
|
|
* skeleton shopping app in Vue
|
|
http:shopping.html
|
|
|
|
#+include: "shopping.html" example
|
|
|