提交 63d31378 编写于 作者: E Evan You

handle babel/autoprefixer

上级 235dd907
......@@ -2,5 +2,5 @@
node_modules
*.log
.temp
docs/_dist
docs/.vuepress/dist
TODOs.md
<html lang="en">
<head>
<meta charset="utf-8">
<title>VuePress</title>
<link rel="preload" href="/_assets/js/app.5850f036.js" as="script">
<link rel="stylesheet" href="/_assets/css/styles.13ee9cc9.css">
</head>
<body>
<div id="app" data-server-rendered="true"><h1>404</h1></div>
<script src="/_assets/js/app.5850f036.js" defer></script>
</body>
</html>
code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
#nprogress{pointer-events:none}#nprogress .bar{background:#41b883;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #41b883,0 0 5px #41b883;opacity:1;-webkit-transform:rotate(3deg) translateY(-4px);-ms-transform:rotate(3deg) translateY(-4px);transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#41b883;border-left-color:#41b883;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
.theme-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}pre[class*=language-]{line-height:1.4;border-radius:5px}pre[class*=language-] code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px;-webkit-font-smoothing:antialiased}
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{17:function(n,t,i){n.exports=i(19)},18:function(n,t,i){"use strict";var u=function(){var n=this.$createElement;return(this._self._c||n)("div",[this._v("\n "+this._s(this.msg)+"\n")])},e=[];i.d(t,"a",function(){return u}),i.d(t,"b",function(){return e})},19:function(n,t,i){"use strict";i.r(t),t.default={data:()=>({msg:"hello this is a dynamic demo"})}},28:function(n,t,i){"use strict";i.r(t);var u=i(18),e=i(17),r=i.n(e);for(var s in e)"default"!==s&&function(n){i.d(t,n,function(){return e[n]})}(s);var a=i(1),c=Object(a.a)(r.a,u.a,u.b,!1,null,null,null);t.default=c.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{22:function(t,s,a){"use strict";a.r(s);var n=a(1),e=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"markdown"},[t._m(0),a("ul",[a("li",[a("router-link",{attrs:{to:"/"}},[t._v("Go home")])],1),a("li",[a("router-link",{attrs:{to:"../setup.html"}},[t._v("Setup")])],1)]),t._m(1),t._m(2),t._m(3),t._m(4),a("p",[a("demo-1",{attrs:{vue:""}})],1),t._m(5),a("ul",[a("li",[t._v("Foo is "+t._s(t.$page.frontmatter.foo))]),a("li",[t._v("Bar is "+t._s(t.$page.frontmatter.bar))])])])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"relative-links"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#relative-links","aria-hidden":"true"}},[this._v("")]),this._v(" Relative Links")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"syntax-highlighting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#syntax-highlighting","aria-hidden":"true"}},[this._v("")]),this._v(" Syntax Highlighting")])},function(){var t=this.$createElement,s=this._self._c||t;return s("pre",{staticClass:"language-js"},[s("code",{pre:!0},[s("span",{attrs:{class:"token keyword"}},[this._v("const")]),this._v(" a "),s("span",{attrs:{class:"token operator"}},[this._v("=")]),this._v(" "),s("span",{attrs:{class:"token number"}},[this._v("123")]),this._v("\n")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("pre",{staticClass:"language-html"},[a("code",{pre:!0},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("example"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('Original message: "{{ message }}"'),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('Computed reversed message: "{{ reversedMessage }}"'),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token script language-javascript"}},[t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" vm "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n el"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#example'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n data"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n message"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Hello'")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n computed"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// a computed getter")]),t._v("\n reversedMessage"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// `this` points to the vm instance")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("this")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("split")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("''")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("reverse")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("join")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("''")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")]),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"dynamic-component"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dynamic-component","aria-hidden":"true"}},[this._v("")]),this._v(" Dynamic Component")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"interpolation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#interpolation","aria-hidden":"true"}},[this._v("")]),this._v(" Interpolation")])}],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{27:function(t,a,e){"use strict";e.r(a);var s=e(1),n=Object(s.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"markdown"},[e("h1",{attrs:{id:"using-vue-in-markdown"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#using-vue-in-markdown","aria-hidden":"true"}},[t._v("")]),t._v(" Using Vue in Markdown")]),e("h2",{attrs:{id:"templating"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#templating","aria-hidden":"true"}},[t._v("")]),t._v(" Templating")]),e("h2",{attrs:{id:"using-components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#using-components","aria-hidden":"true"}},[t._v("")]),t._v(" Using Components")]),e("pre",{staticClass:"language-bash"},[e("code",{pre:!0},[e("span",{attrs:{class:"token keyword"}},[t._v(".")]),t._v("\n└── .vuepress\n └── components\n └── demo-1.vue\n")])]),e("h2",{attrs:{id:"style-script"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#style-script","aria-hidden":"true"}},[t._v("")]),t._v(" Style & Script")]),e("p",[t._v("(TODO)")])])}],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{26:function(e,t,a){"use strict";a.r(t);var n=a(1),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"markdown"},[a("h1",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[e._v("")]),e._v(" Custom Theme")]),a("p",[e._v("VuePress uses Vue single file components for custom themes. To use a custom layout, create a "),a("code",[e._v(".vuepress/theme")]),e._v(" directory in your docs root, and then create a "),a("code",[e._v("Layout.vue")]),e._v(" file:")]),a("pre",{staticClass:"language-bash"},[a("code",{pre:!0},[a("span",{attrs:{class:"token keyword"}},[e._v(".")]),e._v("\n└── .vuepress\n └── theme\n └── Layout.vue\n")])]),a("p",[e._v("From there it’s the same as developing a normal Vue application. There are only a few special things to note:")]),a("h2",{attrs:{id:"site-and-page-metadata"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#site-and-page-metadata","aria-hidden":"true"}},[e._v("")]),e._v(" Site and Page Metadata")]),a("p",[e._v("The "),a("code",[e._v("Layout")]),e._v(" component will be invoked once for every "),a("code",[e._v(".md")]),e._v(" file in "),a("code",[e._v("docs")]),e._v(", and the metadata for the entire site and that specific page will be exposed respectively in "),a("code",[e._v("$site")]),e._v(" and "),a("code",[e._v("$page")]),e._v(" properties which are injected into every component in the app.")]),a("p",[e._v("// TODO details about $site & $page")]),a("h2",{attrs:{id:"content-outlet"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#content-outlet","aria-hidden":"true"}},[e._v("")]),e._v(" Content Outlet")]),a("p",[e._v("The compiled content of the current "),a("code",[e._v(".md")]),e._v(" file being rendered will be available as a special "),a("code",[e._v("<Content/>")]),e._v(" global component. You will need to render it somewhere in your layout in order to display the content of the page.")]),a("p",[e._v("// TODO give an example")])])}],!1,null,null,null);t.default=o.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{25:function(t,s,e){"use strict";e.r(s);var n=e(1),a=Object(n.a)({},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"markdown"},[t._m(0),t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),t._m(6),e("p",[t._v("Start writing:")]),t._m(7),e("p",[t._v("To generate static assets, run:")]),t._m(8),e("p",[t._v("By default the built files will be in "),e("code",[t._v(".vuepress/dist")]),t._v(". The files can be deployed to any static file server. See "),e("router-link",{attrs:{to:"./deploy.html"}},[t._v("Deployment Guide")]),t._v(" for guides on deploying to popular services.")],1)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"setup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup","aria-hidden":"true"}},[this._v("")]),this._v(" Setup")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"quickstart"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#quickstart","aria-hidden":"true"}},[this._v("")]),this._v(" Quickstart")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("pre",{staticClass:"language-bash"},[e("code",{pre:!0},[e("span",{attrs:{class:"token comment"}},[t._v("# install globally")]),t._v("\n"),e("span",{attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),e("span",{attrs:{class:"token function"}},[t._v("install")]),t._v(" -g vuepress\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("# create a markdown file")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("echo")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v('"# Hello VuePress!"')]),t._v(" "),e("span",{attrs:{class:"token operator"}},[t._v(">")]),t._v(" index.md\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("# start writing")]),t._v("\nvuepress\n")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"inside-an-existing-project"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#inside-an-existing-project","aria-hidden":"true"}},[this._v("")]),this._v(" Inside an Existing Project")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("pre",{staticClass:"language-bash"},[e("code",{pre:!0},[e("span",{attrs:{class:"token comment"}},[t._v("# install as a dependency")]),t._v("\n"),e("span",{attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),e("span",{attrs:{class:"token function"}},[t._v("install")]),t._v(" -D vuepress\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("# create a docs directory")]),t._v("\n"),e("span",{attrs:{class:"token function"}},[t._v("mkdir")]),t._v(" docs\n"),e("span",{attrs:{class:"token comment"}},[t._v("# create a markdown file")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("echo")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v('"# Hello VuePress!"')]),t._v(" "),e("span",{attrs:{class:"token operator"}},[t._v(">")]),t._v(" docs/index.md\n")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Add scripts to "),s("code",[this._v("package.json")]),this._v(":")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("pre",{staticClass:"language-json"},[e("code",{pre:!0},[e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{attrs:{class:"token property"}},[t._v('"scripts"')]),e("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{attrs:{class:"token property"}},[t._v('"docs:dev"')]),e("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v('"vuepress dev docs"')]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{attrs:{class:"token property"}},[t._v('"docs:build"')]),e("span",{attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v('"vuepress build docs"')]),t._v("\n "),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("pre",{staticClass:"language-bash"},[s("code",{pre:!0},[s("span",{attrs:{class:"token function"}},[this._v("npm")]),this._v(" run docs:dev\n")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("pre",{staticClass:"language-bash"},[s("code",{pre:!0},[s("span",{attrs:{class:"token function"}},[this._v("npm")]),this._v(" run docs:build\n")])])}],!1,null,null,null);s.default=a.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{24:function(t,a,r){"use strict";r.r(a);var e=r(1),s=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,a=t.$createElement,r=t._self._c||a;return r("div",{staticClass:"markdown"},[r("h1",{attrs:{id:"markdown-extensions"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#markdown-extensions","aria-hidden":"true"}},[t._v("")]),t._v(" Markdown Extensions")]),r("p"),r("div",{staticClass:"table-of-contents"},[r("ul",[r("li",[r("a",{attrs:{href:"#links"}},[t._v("Links")])]),r("li",[r("a",{attrs:{href:"#header-anchors"}},[t._v("Header Anchors")])]),r("li",[r("a",{attrs:{href:"#table-of-contents"}},[t._v("Table of Contents")])]),r("li",[r("a",{attrs:{href:"#custom-containers"}},[t._v("Custom Containers")])]),r("li",[r("a",{attrs:{href:"#configuration"}},[t._v("Configuration")])])])]),r("p"),r("h2",{attrs:{id:"links"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#links","aria-hidden":"true"}},[t._v("")]),t._v(" Links")]),r("h2",{attrs:{id:"header-anchors"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#header-anchors","aria-hidden":"true"}},[t._v("")]),t._v(" Header Anchors")]),r("h2",{attrs:{id:"table-of-contents"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#table-of-contents","aria-hidden":"true"}},[t._v("")]),t._v(" Table of Contents")]),r("h2",{attrs:{id:"custom-containers"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#custom-containers","aria-hidden":"true"}},[t._v("")]),t._v(" Custom Containers")]),r("h2",{attrs:{id:"configuration"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#configuration","aria-hidden":"true"}},[t._v("")]),t._v(" Configuration")])])}],!1,null,null,null);a.default=s.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{20:function(t,e,a){"use strict";a.r(e);var i=a(1),s=Object(i.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"markdown"},[e("h1",{attrs:{id:"deploying"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#deploying","aria-hidden":"true"}},[this._v("")]),this._v(" Deploying")]),e("h2",{attrs:{id:"github-pages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#github-pages","aria-hidden":"true"}},[this._v("")]),this._v(" GitHub Pages")]),e("h2",{attrs:{id:"netlify"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#netlify","aria-hidden":"true"}},[this._v("")]),this._v(" Netlify")])])}],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{23:function(t,s,e){"use strict";e.r(s);var i=e(1),a=Object(i.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"markdown"},[s("h1",{attrs:{id:"configuration"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#configuration","aria-hidden":"true"}},[this._v("")]),this._v(" Configuration")]),s("h2",{attrs:{id:"vuepressconfigjs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vuepressconfigjs","aria-hidden":"true"}},[this._v("")]),s("code",[this._v(".vuepress/config.js")])])])}],!1,null,null,null);s.default=a.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{21:function(t,s,e){"use strict";e.r(s);var a=e(1),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"markdown"},[s("h1",{attrs:{id:"vuepress"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vuepress","aria-hidden":"true"}},[this._v("")]),this._v(" VuePress")]),s("p",[s("img",{attrs:{src:"/logo.png",alt:"logo"}})]),s("blockquote",[s("p",[this._v("Minimalistic docs generator with Vue component based layout system")])])])}],!1,null,null,null);s.default=i.exports}}]);
\ No newline at end of file
<html lang="en">
<head>
<meta charset="utf-8">
<title>VuePress | Configuration</title>
<link rel="preload" href="/_assets/js/app.5850f036.js" as="script"><link rel="preload" href="/_assets/css/styles.13ee9cc9.css" as="style">
<link rel="stylesheet" href="/_assets/css/styles.13ee9cc9.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><ul class="nav"><li><a href="/" class="router-link-active">/</a></li><li><a href="/config.html" class="router-link-exact-active router-link-active">/config.html</a></li><li><a href="/deploy.html">/deploy.html</a></li><li><a href="/markdown.html">/markdown.html</a></li><li><a href="/setup.html">/setup.html</a></li><li><a href="/theming.html">/theming.html</a></li><li><a href="/using-vue.html">/using-vue.html</a></li><li><a href="/kitchen/sink.html">/kitchen/sink.html</a></li></ul><div class="page"><div class="markdown"><h1 id="configuration"><a href="#configuration" aria-hidden="true" class="header-anchor"></a> Configuration</h1><h2 id="vuepressconfigjs"><a href="#vuepressconfigjs" aria-hidden="true" class="header-anchor"></a><code>.vuepress/config.js</code></h2></div></div></div></div>
<script src="/_assets/js/app.5850f036.js" defer></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VuePress | Deploying</title>
<link rel="preload" href="/_assets/js/app.5850f036.js" as="script"><link rel="preload" href="/_assets/css/styles.13ee9cc9.css" as="style">
<link rel="stylesheet" href="/_assets/css/styles.13ee9cc9.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><ul class="nav"><li><a href="/" class="router-link-active">/</a></li><li><a href="/config.html">/config.html</a></li><li><a href="/deploy.html" class="router-link-exact-active router-link-active">/deploy.html</a></li><li><a href="/markdown.html">/markdown.html</a></li><li><a href="/setup.html">/setup.html</a></li><li><a href="/theming.html">/theming.html</a></li><li><a href="/using-vue.html">/using-vue.html</a></li><li><a href="/kitchen/sink.html">/kitchen/sink.html</a></li></ul><div class="page"><div class="markdown"><h1 id="deploying"><a href="#deploying" aria-hidden="true" class="header-anchor"></a> Deploying</h1><h2 id="github-pages"><a href="#github-pages" aria-hidden="true" class="header-anchor"></a> GitHub Pages</h2><h2 id="netlify"><a href="#netlify" aria-hidden="true" class="header-anchor"></a> Netlify</h2></div></div></div></div>
<script src="/_assets/js/app.5850f036.js" defer></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VuePress | VuePress</title>
<link rel="preload" href="/_assets/js/app.5850f036.js" as="script"><link rel="preload" href="/_assets/css/styles.13ee9cc9.css" as="style">
<link rel="stylesheet" href="/_assets/css/styles.13ee9cc9.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><ul class="nav"><li><a href="/" class="router-link-exact-active router-link-active">/</a></li><li><a href="/config.html">/config.html</a></li><li><a href="/deploy.html">/deploy.html</a></li><li><a href="/markdown.html">/markdown.html</a></li><li><a href="/setup.html">/setup.html</a></li><li><a href="/theming.html">/theming.html</a></li><li><a href="/using-vue.html">/using-vue.html</a></li><li><a href="/kitchen/sink.html">/kitchen/sink.html</a></li></ul><div class="page"><div class="markdown"><h1 id="vuepress"><a href="#vuepress" aria-hidden="true" class="header-anchor"></a> VuePress</h1><p><img src="/logo.png" alt="logo"></p><blockquote><p>Minimalistic docs generator with Vue component based layout system</p></blockquote></div></div></div></div>
<script src="/_assets/js/app.5850f036.js" defer></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VuePress</title>
<link rel="preload" href="/_assets/js/app.5850f036.js" as="script"><link rel="preload" href="/_assets/css/styles.13ee9cc9.css" as="style"><link rel="preload" href="/_assets/js/0.2e9345d0.js" as="script">
<link rel="stylesheet" href="/_assets/css/styles.13ee9cc9.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><ul class="nav"><li><a href="/" class="router-link-active">/</a></li><li><a href="/config.html">/config.html</a></li><li><a href="/deploy.html">/deploy.html</a></li><li><a href="/markdown.html">/markdown.html</a></li><li><a href="/setup.html">/setup.html</a></li><li><a href="/theming.html">/theming.html</a></li><li><a href="/using-vue.html">/using-vue.html</a></li><li><a href="/kitchen/sink.html" class="router-link-exact-active router-link-active">/kitchen/sink.html</a></li></ul><div class="page"><div class="markdown"><h2 id="relative-links"><a href="#relative-links" aria-hidden="true" class="header-anchor"></a> Relative Links</h2><ul><li><a href="/" class="router-link-active">Go home</a></li><li><a href="/setup.html">Setup</a></li></ul><h2 id="syntax-highlighting"><a href="#syntax-highlighting" aria-hidden="true" class="header-anchor"></a> Syntax Highlighting</h2><pre class="language-js"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">123</span>
</code></pre><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Original message: &quot;{{ message }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Computed reversed message: &quot;{{ reversedMessage }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
<span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
el<span class="token punctuation">:</span> <span class="token string">'#example'</span><span class="token punctuation">,</span>
data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
message<span class="token punctuation">:</span> <span class="token string">'Hello'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// a computed getter</span>
reversedMessage<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// `this` points to the vm instance</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><h2 id="dynamic-component"><a href="#dynamic-component" aria-hidden="true" class="header-anchor"></a> Dynamic Component</h2><p><div vue="">
hello this is a dynamic demo
</div></p><h2 id="interpolation"><a href="#interpolation" aria-hidden="true" class="header-anchor"></a> Interpolation</h2><ul><li>Foo is 123</li><li>Bar is 234</li></ul></div></div></div></div>
<script src="/_assets/js/app.5850f036.js" defer></script><script src="/_assets/js/0.2e9345d0.js" defer></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VuePress | Markdown Extensions</title>
<link rel="preload" href="/_assets/js/app.5850f036.js" as="script"><link rel="preload" href="/_assets/css/styles.13ee9cc9.css" as="style">
<link rel="stylesheet" href="/_assets/css/styles.13ee9cc9.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><ul class="nav"><li><a href="/" class="router-link-active">/</a></li><li><a href="/config.html">/config.html</a></li><li><a href="/deploy.html">/deploy.html</a></li><li><a href="/markdown.html" class="router-link-exact-active router-link-active">/markdown.html</a></li><li><a href="/setup.html">/setup.html</a></li><li><a href="/theming.html">/theming.html</a></li><li><a href="/using-vue.html">/using-vue.html</a></li><li><a href="/kitchen/sink.html">/kitchen/sink.html</a></li></ul><div class="page"><div class="markdown"><h1 id="markdown-extensions"><a href="#markdown-extensions" aria-hidden="true" class="header-anchor"></a> Markdown Extensions</h1><p></p><div class="table-of-contents"><ul><li><a href="#links">Links</a></li><li><a href="#header-anchors">Header Anchors</a></li><li><a href="#table-of-contents">Table of Contents</a></li><li><a href="#custom-containers">Custom Containers</a></li><li><a href="#configuration">Configuration</a></li></ul></div><p></p><h2 id="links"><a href="#links" aria-hidden="true" class="header-anchor"></a> Links</h2><h2 id="header-anchors"><a href="#header-anchors" aria-hidden="true" class="header-anchor"></a> Header Anchors</h2><h2 id="table-of-contents"><a href="#table-of-contents" aria-hidden="true" class="header-anchor"></a> Table of Contents</h2><h2 id="custom-containers"><a href="#custom-containers" aria-hidden="true" class="header-anchor"></a> Custom Containers</h2><h2 id="configuration"><a href="#configuration" aria-hidden="true" class="header-anchor"></a> Configuration</h2></div></div></div></div>
<script src="/_assets/js/app.5850f036.js" defer></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VuePress | Setup</title>
<link rel="preload" href="/_assets/js/app.5850f036.js" as="script"><link rel="preload" href="/_assets/css/styles.13ee9cc9.css" as="style">
<link rel="stylesheet" href="/_assets/css/styles.13ee9cc9.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><ul class="nav"><li><a href="/" class="router-link-active">/</a></li><li><a href="/config.html">/config.html</a></li><li><a href="/deploy.html">/deploy.html</a></li><li><a href="/markdown.html">/markdown.html</a></li><li><a href="/setup.html" class="router-link-exact-active router-link-active">/setup.html</a></li><li><a href="/theming.html">/theming.html</a></li><li><a href="/using-vue.html">/using-vue.html</a></li><li><a href="/kitchen/sink.html">/kitchen/sink.html</a></li></ul><div class="page"><div class="markdown"><h1 id="setup"><a href="#setup" aria-hidden="true" class="header-anchor"></a> Setup</h1><h2 id="quickstart"><a href="#quickstart" aria-hidden="true" class="header-anchor"></a> Quickstart</h2><pre class="language-bash"><code><span class="token comment"># install globally</span>
<span class="token function">npm</span> <span class="token function">install</span> -g vuepress
<span class="token comment"># create a markdown file</span>
<span class="token keyword">echo</span> <span class="token string">&quot;# Hello VuePress!&quot;</span> <span class="token operator">&gt;</span> index.md
<span class="token comment"># start writing</span>
vuepress
</code></pre><h2 id="inside-an-existing-project"><a href="#inside-an-existing-project" aria-hidden="true" class="header-anchor"></a> Inside an Existing Project</h2><pre class="language-bash"><code><span class="token comment"># install as a dependency</span>
<span class="token function">npm</span> <span class="token function">install</span> -D vuepress
<span class="token comment"># create a docs directory</span>
<span class="token function">mkdir</span> docs
<span class="token comment"># create a markdown file</span>
<span class="token keyword">echo</span> <span class="token string">&quot;# Hello VuePress!&quot;</span> <span class="token operator">&gt;</span> docs/index.md
</code></pre><p>Add scripts to <code>package.json</code>:</p><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;docs:dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;docs:build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><p>Start writing:</p><pre class="language-bash"><code><span class="token function">npm</span> run docs:dev
</code></pre><p>To generate static assets, run:</p><pre class="language-bash"><code><span class="token function">npm</span> run docs:build
</code></pre><p>By default the built files will be in <code>.vuepress/dist</code>. The files can be deployed to any static file server. See <a href="/deploy.html">Deployment Guide</a> for guides on deploying to popular services.</p></div></div></div></div>
<script src="/_assets/js/app.5850f036.js" defer></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VuePress | Custom Theme</title>
<link rel="preload" href="/_assets/js/app.5850f036.js" as="script"><link rel="preload" href="/_assets/css/styles.13ee9cc9.css" as="style">
<link rel="stylesheet" href="/_assets/css/styles.13ee9cc9.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><ul class="nav"><li><a href="/" class="router-link-active">/</a></li><li><a href="/config.html">/config.html</a></li><li><a href="/deploy.html">/deploy.html</a></li><li><a href="/markdown.html">/markdown.html</a></li><li><a href="/setup.html">/setup.html</a></li><li><a href="/theming.html" class="router-link-exact-active router-link-active">/theming.html</a></li><li><a href="/using-vue.html">/using-vue.html</a></li><li><a href="/kitchen/sink.html">/kitchen/sink.html</a></li></ul><div class="page"><div class="markdown"><h1 id="custom-theme"><a href="#custom-theme" aria-hidden="true" class="header-anchor"></a> Custom Theme</h1><p>VuePress uses Vue single file components for custom themes. To use a custom layout, create a <code>.vuepress/theme</code> directory in your docs root, and then create a <code>Layout.vue</code> file:</p><pre class="language-bash"><code><span class="token keyword">.</span>
└── .vuepress
└── theme
└── Layout.vue
</code></pre><p>From there it’s the same as developing a normal Vue application. There are only a few special things to note:</p><h2 id="site-and-page-metadata"><a href="#site-and-page-metadata" aria-hidden="true" class="header-anchor"></a> Site and Page Metadata</h2><p>The <code>Layout</code> component will be invoked once for every <code>.md</code> file in <code>docs</code>, and the metadata for the entire site and that specific page will be exposed respectively in <code>$site</code> and <code>$page</code> properties which are injected into every component in the app.</p><p>// TODO details about $site &amp; $page</p><h2 id="content-outlet"><a href="#content-outlet" aria-hidden="true" class="header-anchor"></a> Content Outlet</h2><p>The compiled content of the current <code>.md</code> file being rendered will be available as a special <code>&lt;Content/&gt;</code> global component. You will need to render it somewhere in your layout in order to display the content of the page.</p><p>// TODO give an example</p></div></div></div></div>
<script src="/_assets/js/app.5850f036.js" defer></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VuePress | Using Vue in Markdown</title>
<link rel="preload" href="/_assets/js/app.5850f036.js" as="script"><link rel="preload" href="/_assets/css/styles.13ee9cc9.css" as="style">
<link rel="stylesheet" href="/_assets/css/styles.13ee9cc9.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><ul class="nav"><li><a href="/" class="router-link-active">/</a></li><li><a href="/config.html">/config.html</a></li><li><a href="/deploy.html">/deploy.html</a></li><li><a href="/markdown.html">/markdown.html</a></li><li><a href="/setup.html">/setup.html</a></li><li><a href="/theming.html">/theming.html</a></li><li><a href="/using-vue.html" class="router-link-exact-active router-link-active">/using-vue.html</a></li><li><a href="/kitchen/sink.html">/kitchen/sink.html</a></li></ul><div class="page"><div class="markdown"><h1 id="using-vue-in-markdown"><a href="#using-vue-in-markdown" aria-hidden="true" class="header-anchor"></a> Using Vue in Markdown</h1><h2 id="templating"><a href="#templating" aria-hidden="true" class="header-anchor"></a> Templating</h2><h2 id="using-components"><a href="#using-components" aria-hidden="true" class="header-anchor"></a> Using Components</h2><pre class="language-bash"><code><span class="token keyword">.</span>
└── .vuepress
└── components
└── demo-1.vue
</code></pre><h2 id="style-script"><a href="#style-script" aria-hidden="true" class="header-anchor"></a> Style &amp; Script</h2><p>(TODO)</p></div></div></div></div>
<script src="/_assets/js/app.5850f036.js" defer></script>
</body>
</html>
......@@ -23,9 +23,12 @@ npm install -D vuepress
mkdir docs
# create a markdown file
echo "# Hello VuePress!" > docs/index.md
# start writing
npx vuepress dev docs
```
Add scripts to `package.json`:
Or, add some scripts to `package.json`:
``` json
{
......@@ -36,7 +39,7 @@ Add scripts to `package.json`:
}
```
Start writing:
Then you can start writing with:
``` bash
npm run docs:dev
......
......@@ -61,6 +61,16 @@ module.exports = function createBaseConfig ({
}
})
config.module
.rule('js')
.test(/\.js$/)
.exclude.add(/node_modules/).end()
.use('babel-loader')
.loader('babel-loader')
.options({
presets: ['@vue/babel-preset-app']
})
config.module
.rule('markdown')
.test(/\.md$/)
......@@ -132,6 +142,10 @@ module.exports = function createBaseConfig ({
.use('css-loader').loader('css-loader')
}
rule.use('postcss-loader').loader('postcss-loader').options({
plugins: [require('autoprefixer')]
})
if (loader) {
rule.use(loader).loader(loader).options(options)
}
......
module.exports = function createServerConfig (options) {
const fs = require('fs')
module.exports = function createClientConfig (options) {
const path = require('path')
const WebpackBar = require('webpackbar')
const createBaseConfig = require('./baseConfig')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const config = createBaseConfig(options)
const { sourceDir, outDir } = options
config
.target('node')
.externals([/^vue|vue-router$/])
config
.entry('app')
.add(path.resolve(__dirname, '../app/serverEntry.js'))
config.output
.filename('server-bundle.js')
.libraryTarget('commonjs2')
config
.plugin('ssr-server')
.use(VueSSRServerPlugin, [{
filename: 'manifest/server.json'
}])
const publicDir = path.resolve(sourceDir, '.vuepress/public')
if (fs.existsSync(publicDir)) {
.add(path.resolve(__dirname, '../app/clientEntry.js'))
config.node
.merge({
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
global: false,
// process is injected via DefinePlugin, although some 3rd party
// libraries may require a mock to work properly (#934)
process: 'mock',
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
})
// generate client manifest only during build
if (process.env.NODE_ENV === 'production') {
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
config
.plugin('copy')
.use(CopyPlugin, [[
{ from: publicDir, to: outDir }
]])
.plugin('ssr-client')
.use(VueSSRClientPlugin, [{
filename: 'manifest/client.json'
}])
}
config
.plugin('bar')
.use(WebpackBar, [{
name: 'Server',
color: 'blue',
name: 'Client',
color: '#41b883',
compiledIn: false
}])
......
module.exports = function createClientConfig (options) {
module.exports = function createServerConfig (options) {
const fs = require('fs')
const path = require('path')
const WebpackBar = require('webpackbar')
const createBaseConfig = require('./baseConfig')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const config = createBaseConfig(options)
const { sourceDir, outDir } = options
config
.target('node')
.externals([/^vue|vue-router$/])
config
.entry('app')
.add(path.resolve(__dirname, '../app/clientEntry.js'))
config.node
.merge({
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
global: false,
// process is injected via DefinePlugin, although some 3rd party
// libraries may require a mock to work properly (#934)
process: 'mock',
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
})
// generate client manifest only during build
if (process.env.NODE_ENV === 'production') {
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
.add(path.resolve(__dirname, '../app/serverEntry.js'))
config.output
.filename('server-bundle.js')
.libraryTarget('commonjs2')
config
.plugin('ssr-server')
.use(VueSSRServerPlugin, [{
filename: 'manifest/server.json'
}])
const publicDir = path.resolve(sourceDir, '.vuepress/public')
if (fs.existsSync(publicDir)) {
config
.plugin('ssr-client')
.use(VueSSRClientPlugin, [{
filename: 'manifest/client.json'
}])
.plugin('copy')
.use(CopyPlugin, [[
{ from: publicDir, to: outDir }
]])
}
config
.plugin('bar')
.use(WebpackBar, [{
name: 'Client',
color: '#41b883',
name: 'Server',
color: 'blue',
compiledIn: false
}])
......
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册