404
5 |{{ getMsg() }}6 |
5 | vue
6 |
13 | vue
14 |
21 | some link with code
22 |
.... 2 | // 3 | // If your plugin was chained before preWrapper, you can add additional eleemnt directly. 4 | // If your plugin was chained after preWrapper, you can use these slots: 5 | // 1. 6 | // 2. 7 | // 3. 8 | // 4. 9 | 10 | module.exports = md => { 11 | const fence = md.renderer.rules.fence 12 | md.renderer.rules.fence = (...args) => { 13 | const [tokens, idx] = args 14 | const token = tokens[idx] 15 | const rawCode = fence(...args) 16 | return `
` +
17 | `${rawCode}
`
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/.vuepress/components/Bit.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | This project is sponsored by
5 | 
6 |
7 |
6 |
7 |
14 |
15 | `;
16 |
17 | exports[`lineNumbers should render lineNumbers 1`] = `
18 |
19 |
8 |
9 |
10 |
new Vue()
11 |
12 |
13 | 10 |
20 |
25 |
26 | `;
27 |
--------------------------------------------------------------------------------
/test/markdown/slugify.spec.js:
--------------------------------------------------------------------------------
1 | import { Md } from './util'
2 | import anchor from 'markdown-it-anchor'
3 | import slugify from '@/markdown/slugify.js'
4 |
5 | const mdS = Md().use(anchor, {
6 | slugify,
7 | permalink: true,
8 | permalinkBefore: true,
9 | permalinkSymbol: '#'
10 | })
11 |
12 | const asserts = {
13 | /* header: slug */
14 | '# a b': 'a-b',
15 | '# a-b': 'a-b',
16 | '# ``': 'a',
17 | '# ``b': 'a-b',
18 | '# `` b': 'a-b'
19 | }
20 |
21 | describe('slugify', () => {
22 | test('should convert headers to slug correctly', () => {
23 | for (const input in asserts) {
24 | const output = mdS.render(input)
25 | expect(getSlug(output)).toBe(asserts[input])
26 | }
27 | })
28 | })
29 |
30 | function getSlug (output) {
31 | return output.match(/id=\\?"([^"]*)\\?"/)[1]
32 | }
33 |
--------------------------------------------------------------------------------
/test/markdown/__snapshots__/snippet.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`snippet import snippet 1`] = `
4 | new Vue()
21 | export default function () {
5 | // ..
6 | }
7 |
12 |
13 |
14 |
15 |
16 |
export default function () { // .. }
17 | `;
18 |
19 | exports[`snippet import snippet with highlight single line 1`] = `
20 | 16 |
21 |
22 |
23 |
24 |
25 |
export default function () { // .. }
26 | `;
27 |
--------------------------------------------------------------------------------
/test/default-theme/__snapshots__/NavLink.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`NavLink $i18n - renders nav link with external link 1`] = `
4 |
5 | Vue
6 | 23 |
25 |
outbound-link
7 | 8 | `; 9 | 10 | exports[`NavLink $i18n - renders nav link with internal link 1`] = `VuePress`; 11 | 12 | exports[`NavLink $simple - renders nav link with external link 1`] = ` 13 | 14 | Vue 15 |outbound-link
16 | 17 | `; 18 | 19 | exports[`NavLink $simple - renders nav link with internal link 1`] = `VuePress`; 20 | -------------------------------------------------------------------------------- /lib/markdown/slugify.js: -------------------------------------------------------------------------------- 1 | // string.js slugify drops non ascii chars so we have to 2 | // use a custom implementation here 3 | const removeDiacritics = require('diacritics').remove 4 | // eslint-disable-next-line no-control-regex 5 | const rControl = /[\u0000-\u001f]/g 6 | const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g 7 | 8 | module.exports = function slugify (str) { 9 | return removeDiacritics(str) 10 | // Remove control characters 11 | .replace(rControl, '') 12 | // Replace special characters 13 | .replace(rSpecial, '-') 14 | // Remove continous separators 15 | .replace(/\-{2,}/g, '-') 16 | // Remove prefixing and trailing separtors 17 | .replace(/^\-+|\-+$/g, '') 18 | // ensure it doesn't start with a number (#121) 19 | .replace(/^(\d)/, '_$1') 20 | // lowercase 21 | .toLowerCase() 22 | } 23 | -------------------------------------------------------------------------------- /src/zh/vue/Promise.md: -------------------------------------------------------------------------------- 1 | # Promise/Aysnc 2 | #### 1、es6定义变量 3 | 1. var 4 | 2. let 5 | 3. import 6 | 4. class 7 | 5. function 8 | 6. const 9 | 10 | #### 2、Promise 11 | - 是异步编程的一种解决方案 12 | - 是一个对象 13 | 14 | **缺点** 15 | 1. 无法取消 16 | 17 | ``` 18 | Promise.all() 会包装多个实例成为一个新的promise实例 19 | 20 | new Promise((resolve.reject) =>{ 21 | // do some async function 22 | if(true){ 23 | // resolve 代表成功的回调 24 | resolve(data); 25 | }else{ 26 | // reject 代表失败的回调 27 | reject(data); 28 | } 29 | }) 30 | ``` 31 | #### 3、异步加载图片 32 | 1. 数据请求 -> 接口(Interface) 33 | 2. 创建图片 34 | 3. 插入到页面当中 35 | #### 4、继承 36 | obj1 extends obj2 37 | 38 | 如果继承就一定要在contructor第一行加super()方法 39 | #### 5、异步加载 40 | 1. ajax 41 | 2. 加载图片 42 | 3. jsonp 43 | 44 | #### 6、语法糖 45 | 再不改变代码的情况下让代码更简洁 46 | #### 7、async 47 | 1. 内置执行器 48 | 2. 更好的语义 49 | 3. 更广的适用性 50 | 4. 返回Promise -------------------------------------------------------------------------------- /test/default-theme/DropdownLink.spec.js: -------------------------------------------------------------------------------- 1 | import { mount, RouterLinkStub } from '@vue/test-utils' 2 | import DropdownLink from '@/default-theme/DropdownLink.vue' 3 | import { modeTestRunner } from '../util' 4 | 5 | function test (mode, localVue) { 6 | it(`$${mode} - renders dropdown link.`, () => { 7 | const item = { 8 | text: 'VuePress', 9 | items: [ 10 | { 11 | text: 'Guide', 12 | link: '/guide/' 13 | }, 14 | { 15 | text: 'Config Reference', 16 | link: '/config/' 17 | } 18 | ] 19 | } 20 | const wrapper = mount(DropdownLink, { 21 | localVue, 22 | stubs: { 23 | 'router-link': RouterLinkStub 24 | }, 25 | propsData: { item } 26 | }) 27 | expect(wrapper.html()).toMatchSnapshot() 28 | }) 29 | } 30 | 31 | modeTestRunner('DropdownLink', test) 32 | -------------------------------------------------------------------------------- /lib/app/index.ssr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
5 |
8 | `;
9 |
10 | exports[`containers tip 1`] = `
11 | WARNING
6 |I am a danger
7 |
12 |
15 | `;
16 |
17 | exports[`containers tip-override 1`] = `
18 | TIP
13 |I am a tip
14 |
19 |
22 | `;
23 |
24 | exports[`containers v-pre 1`] = `
25 | 提示
20 |I am a tip
21 |
26 |
28 | `;
29 |
30 | exports[`containers warning 1`] = `
31 | I am a v-pre
27 |
32 |
35 | `;
36 |
--------------------------------------------------------------------------------
/docs/assets/js/8.928a4419.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{210:function(t,e,s){"use strict";s.r(e);var i=s(0),a=Object(i.a)({},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"content"},[s("h2",{attrs:{id:""}},[s("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[t._v("#")]),t._v(" "),s("div",{staticStyle:{"text-align":"center"}},[s("Bit")],1)]),t._v(" "),s("div",[s("center",[s("h4",[t._v("努力不是为了取悦别人 而是照亮自己的心 告诉自己有一股独立向上的力量.")])])],1),t._v(" "),s("div",[s("center",[s("h4",[t._v("努力不是为了取悦别人 而是照亮自己的心 告诉自己有一股独立向上的力量.")])])],1),t._v(" "),s("hr"),t._v(" "),t._m(0)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"warning custom-block"},[e("p",{staticClass:"custom-block-title"},[this._v("兼容性注意事项")]),this._v(" "),e("p",[this._v("VuePress 要求 Node.js >= 8。")])])}],!1,null,null,null);e.default=a.exports}}]);
--------------------------------------------------------------------------------
/test/app/Content.spec.js:
--------------------------------------------------------------------------------
1 | import Content from '@/app/components/Content'
2 | import { mount } from '@vue/test-utils'
3 | import { getRouter, modeTestRunner } from '../util'
4 |
5 | function test (mode, localVue) {
6 | it(`${mode} - add custom class by default.`, () => {
7 | const wrapper = mount(Content, {
8 | localVue,
9 | router: getRouter()
10 | })
11 | expect(wrapper.contains('.custom')).toBe(true)
12 | })
13 |
14 | it(`${mode} - remove custom when custom set to false.`, () => {
15 | const wrapper = mount(Content, {
16 | // https://vue-test-utils.vuejs.org/api/options.html#context
17 | context: {
18 | props: {
19 | custom: false
20 | }
21 | },
22 | localVue,
23 | router: getRouter()
24 | })
25 | expect(wrapper.contains('.custom')).toBe(false)
26 | })
27 | }
28 |
29 | modeTestRunner('Content', test)
30 |
31 |
--------------------------------------------------------------------------------
/lib/default-theme/styles/mobile.styl:
--------------------------------------------------------------------------------
1 | @require './config'
2 |
3 | $mobileSidebarWidth = $sidebarWidth * 0.82
4 |
5 | // narrow desktop / iPad
6 | @media (max-width: $MQNarrow)
7 | .sidebar
8 | font-size 15px
9 | width $mobileSidebarWidth
10 | .page
11 | padding-left $mobileSidebarWidth
12 |
13 | // wide mobile
14 | @media (max-width: $MQMobile)
15 | .sidebar
16 | top 0
17 | padding-top $navbarHeight
18 | transform translateX(-100%)
19 | transition transform .2s ease
20 | .page
21 | padding-left 0
22 | .theme-container
23 | &.sidebar-open
24 | .sidebar
25 | transform translateX(0)
26 | &.no-navbar
27 | .sidebar
28 | padding-top: 0
29 |
30 | // narrow mobile
31 | @media (max-width: $MQMobileNarrow)
32 | h1
33 | font-size 1.9rem
34 | .content
35 | div[class*="language-"]
36 | margin 0.85rem -1.5rem
37 | border-radius 0
38 |
--------------------------------------------------------------------------------
/test/prepare/util.spec.js:
--------------------------------------------------------------------------------
1 | import {
2 | isIndexFile,
3 | fileToPath
4 | } from '@/prepare/util.js'
5 |
6 | describe('prepare - util', () => {
7 | test('isIndexFile', () => {
8 | [
9 | 'README.md',
10 | 'readme.md',
11 | 'INDEX.md',
12 | 'index.md',
13 | 'foo/README.md',
14 | 'foo/index.md'
15 | ].forEach(file => {
16 | expect(isIndexFile(file)).toBe(true)
17 | });
18 | [
19 | 'foo/one.md',
20 | 'one.md'
21 | ].forEach(file => {
22 | expect(isIndexFile(file)).toBe(false)
23 | })
24 | })
25 |
26 | test('fileToPath', () => {
27 | const asserts = {
28 | 'README.md': '/',
29 | 'foo/README.md': '/foo/',
30 | 'foo.md': '/foo.html',
31 | 'foo/bar.md': '/foo/bar.html'
32 | }
33 | Object.keys(asserts).forEach(file => {
34 | expect(fileToPath(file)).toBe(asserts[file])
35 | })
36 | })
37 | })
38 |
--------------------------------------------------------------------------------
/src/zh/miniapp/小程序组件.md:
--------------------------------------------------------------------------------
1 | # 小程序组件
2 | ##### 什么是组件
3 | > 组件就是将一个功能进行封装，组件是视图层的基本组成单元，有自己独特的功能
4 | ##### 组件的规范
5 | 1. 结构
6 | 1. 样式
7 | 1. 逻辑
8 | 1. 通信方式
9 | 1. 生命周期
10 | 1. 可组合（可以嵌套）
11 | 1. 定义组件
12 | 1. 调用组件（标签的形式）
13 | ##### 组件的创建
14 |
15 | ```
16 | 1.小程序中组件由4个文件组成，.json .wxmll .wxss .js
17 | 2.创建组件实例需要通过Compoent(Object) 函数创建
18 | 3.创建组件需要在组件的json文件中定义 component:true 字段指定为一个组件
19 | 4.组件中的基础选项
20 | (1)Properties: 接受的数据
21 | (2)Data: 内部数据
22 | (3)Methods: 处理函数
23 | 5.使用组件
24 | 6.需要在对应的页面或者组件的json文件中定义 usingComponents: {} 选项
25 | usingComponets: {
26 | '名-称': '组件路径'
27 | }
28 | 7.在页面中可以实用 <名-称/>
29 | 8.名称中不能出现大写字母，规则就是(字母_-)
30 | 9.组件的组合可以实用slot插槽来完成，和vue一样，只不过没有作用域插槽， 可以有命名插槽和默认插槽
31 | 10.组件的通信可以通过props传递参数(父子)， 自定义事件（子父）
32 | (1)父子 WARNING
33 |I am a warning
34 |'),
10 | rawCode.indexOf('')
11 | )
12 |
13 | const lines = code.split('\n')
14 | const lineNumbersCode = [...Array(lines.length - 1)]
15 | .map((line, index) => `${index + 1}`).join('') 16 | 17 | const lineNumbersWrapperCode = 18 | `
${lineNumbersCode}
`
19 |
20 | const finalCode = rawCode
21 | .replace('', `${lineNumbersWrapperCode}`)
22 | .replace('extra-class', 'line-numbers-mode')
23 |
24 | return finalCode
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/zh/interview/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 面试必备知识点
3 | sidebar: auto
4 | sidebarDepth: 2
5 | ---
6 | # 面试必备知识点
7 |
8 | ## CSS
9 | - 盒模型
10 | - CSS的单位和应用场景及Rem的设置
11 | - 定位，回流与重绘
12 | - IFC、BFC与清除浮动
13 | - 兼容处理
14 |
15 | ## 原生JS
16 | - 变量提升配合作用域链
17 | - 原型链
18 | - 继承
19 | - 闭包
20 | - new与面向对象
21 | - event loop
22 | - event delegation/proxy
23 | - 节流与防动
24 | - Promise原理
25 | - SPA路由原理
26 | - 本地存储localStorage、sessionStorage与cookie之间的区别
27 |
28 | ## Vue
29 | - 深入Vue的响应原理?
30 | - Vue多版本之间的区别（运行时依赖，运行时编译）?
31 | - Vue中computed、watch与methods的区别
32 | - 多种指令与自定义指令
33 | - 路由传参与导航守卫
34 | - Element UI && so on
35 |
36 | ## React
37 | - 什么是MVVM？React与Vue的区别与联系？
38 | - JSX语法、Virtual DOM与DOM Diff算法？
39 | - 详细介绍生命周期(三个阶段，生命周期的触发顺序)？
40 | - 合成事件与改变this指向的三种方式及之间的区别？
41 | - 样式绑定与CSS Modules
42 | - 多种组件创建方式及其区别？什么是受控组件？
43 | - 高阶组件与装饰器
44 | - 组件通信的多种方式及其之间的区别
45 | - React Router及其简单实现
46 | - Redux数据流向及三个中间件（redux-logger、redux-thunk、redux-saga）
47 | - Ant Design && so on
--------------------------------------------------------------------------------
/lib/markdown/containers.js:
--------------------------------------------------------------------------------
1 | const container = require('markdown-it-container')
2 |
3 | module.exports = md => {
4 | md
5 | .use(...createContainer('tip', 'TIP'))
6 | .use(...createContainer('warning', 'WARNING'))
7 | .use(...createContainer('danger', 'WARNING'))
8 | // explicitly escape Vue syntax
9 | .use(container, 'v-pre', {
10 | render: (tokens, idx) => tokens[idx].nesting === 1
11 | ? `\n`
12 | : `
\n`
13 | })
14 | }
15 |
16 | function createContainer (klass, defaultTitle) {
17 | return [container, klass, {
18 | render (tokens, idx) {
19 | const token = tokens[idx]
20 | const info = token.info.trim().slice(klass.length).trim()
21 | if (token.nesting === 1) {
22 | return `${info || defaultTitle}
\n` 23 | } else { 24 | return `
2 | 
3 |
5 | VuePress
6 |
16 |
17 | `;
18 |
19 | exports[`DropdownLink $simple - renders dropdown link. 1`] = `
20 |
21 | VuePress
22 |
32 |
33 | `;
34 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | # next.js build output
61 | .next
62 |
--------------------------------------------------------------------------------
/docs/assets/js/64.4b0c2825.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[64],{150:function(e,a,t){"use strict";t.r(a);var s=t(0),n=Object(s.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("div",{staticClass:"content"},[t("h1",{attrs:{id:"babel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#babel","aria-hidden":"true"}},[e._v("#")]),e._v(" Babel")]),e._v(" "),t("h4",{attrs:{id:"_1、babel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、babel","aria-hidden":"true"}},[e._v("#")]),e._v(" 1、Babel")]),e._v(" "),t("ul",[t("li",[e._v("是javascript的编译器/解码器/转码器/解析器")])]),e._v(" "),t("h4",{attrs:{id:"_2、配置"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、配置","aria-hidden":"true"}},[e._v("#")]),e._v(" 2、配置")]),e._v(" "),t("ul",[t("li",[e._v(".babelrc")])]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v('命令:\n babel ./index.js -o ./_index.js\n下包：\n cnpm install --save-dev babel-cli babel-preset-env\n \n \n{\n "presets": [\n "env"\n ]\n}\n\nbabel-loader // es6转es5\n')])])])])}],!1,null,null,null);a.default=n.exports}}]);
--------------------------------------------------------------------------------
/lib/app/SWUpdateEvent.js:
--------------------------------------------------------------------------------
1 | export default class SWUpdateEvent {
2 | constructor (registration) {
3 | Object.defineProperty(this, 'registration', {
4 | value: registration,
5 | configurable: true,
6 | writable: true
7 | })
8 | }
9 |
10 | /**
11 | * Check if the new service worker exists or not.
12 | */
13 | update () {
14 | return this.registration.update()
15 | }
16 |
17 | /**
18 | * Activate new service worker to work 'location.reload()' with new data.
19 | */
20 | skipWaiting () {
21 | const worker = this.registration.waiting
22 | if (!worker) {
23 | return Promise.resolve()
24 | }
25 |
26 | console.log('[vuepress:sw] Doing worker.skipWaiting().')
27 | return new Promise((resolve, reject) => {
28 | const channel = new MessageChannel()
29 |
30 | channel.port1.onmessage = (event) => {
31 | console.log('[vuepress:sw] Done worker.skipWaiting().')
32 | if (event.data.error) {
33 | reject(event.data.error)
34 | } else {
35 | resolve(event.data)
36 | }
37 | }
38 |
39 | worker.postMessage({ type: 'skip-waiting' }, [channel.port2])
40 | })
41 | }
42 | }
43 |
44 |
--------------------------------------------------------------------------------
/lib/default-theme/styles/nprogress.styl:
--------------------------------------------------------------------------------
1 | #nprogress
2 | pointer-events none
3 | .bar
4 | background $accentColor
5 | position fixed
6 | z-index 1031
7 | top 0
8 | left 0
9 | width 100%
10 | height 2px
11 | .peg
12 | display block
13 | position absolute
14 | right 0px
15 | width 100px
16 | height 100%
17 | box-shadow 0 0 10px $accentColor, 0 0 5px $accentColor
18 | opacity 1.0
19 | transform rotate(3deg) translate(0px, -4px)
20 | .spinner
21 | display block
22 | position fixed
23 | z-index 1031
24 | top 15px
25 | right 15px
26 | .spinner-icon
27 | width 18px
28 | height 18px
29 | box-sizing border-box
30 | border solid 2px transparent
31 | border-top-color $accentColor
32 | border-left-color $accentColor
33 | border-radius 50%
34 | animation nprogress-spinner 400ms linear infinite
35 |
36 | .nprogress-custom-parent
37 | overflow hidden
38 | position relative
39 |
40 | .nprogress-custom-parent #nprogress .spinner,
41 | .nprogress-custom-parent #nprogress .bar
42 | position absolute
43 |
44 | @keyframes nprogress-spinner
45 | 0%
46 | transform rotate(0deg)
47 | 100%
48 | transform rotate(360deg)
49 |
--------------------------------------------------------------------------------
/src/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | heroImage: /avatar.jpg
4 | actionText: Let`s Go →
5 | actionLink: /zh/standard/Start.html
6 | sidebarDepth: 2
7 | sidebar: auto
8 | footer: MIT Licensed | Copyright © 1970-present 1z2s
9 | ---
10 |
11 |
12 |
14 | ---
15 |
16 |
19 | 努力不是为了取悦别人 而是照亮自己的心 告诉自己有一股独立向上的力量.
20 |
23 |
24 |
25 |
39 |
40 |
41 |
42 |
55 | ---
56 |
57 |
58 | :::warning 兼容性注意事项
59 | VuePress 要求 Node.js >= 8。
60 | :::
61 |
--------------------------------------------------------------------------------
/lib/webpack/DevLogPlugin.js:
--------------------------------------------------------------------------------
1 | const chalk = require('chalk')
2 | const logger = require('../util/logger')
3 |
4 | module.exports = class DevLogPlugin {
5 | constructor (options) {
6 | this.options = options
7 | }
8 |
9 | apply (compiler) {
10 | let isFirst = true
11 | compiler.hooks.done.tap('vuepress-log', stats => {
12 | clearScreen()
13 |
14 | const { displayHost, port, publicPath } = this.options
15 | const time = new Date().toTimeString().match(/^[\d:]+/)[0]
16 | const displayUrl = `http://${displayHost}:${port}${publicPath}`
17 |
18 | logger.success(
19 | `\n${chalk.gray(`[${time}]`)} Build ${chalk.italic(stats.hash.slice(0, 6))} ` +
20 | `finished in ${stats.endTime - stats.startTime} ms! ` +
21 | (
22 | isFirst
23 | ? ''
24 | : `${chalk.gray(`(${displayUrl})`)}`
25 | )
26 | )
27 | if (isFirst) {
28 | isFirst = false
29 | console.log(`\n${chalk.gray('>')} VuePress dev server listening at ${chalk.cyan(displayUrl)}`)
30 | }
31 | })
32 | compiler.hooks.invalid.tap('vuepress-log', clearScreen)
33 | }
34 | }
35 |
36 | function clearScreen () {
37 | process.stdout.write('\x1Bc')
38 | }
39 |
--------------------------------------------------------------------------------
/test/util.js:
--------------------------------------------------------------------------------
1 | import { createLocalVue } from '@vue/test-utils'
2 | import dataMixin from '@/app/dataMixin'
3 | import Router from 'vue-router'
4 | import { mockComponent } from './hoc'
5 | import { siteData as i18nSiteData } from './.temp/siteData-i18n'
6 | import { siteData as simpleSiteData } from './.temp/siteData-simple'
7 |
8 | export function getRouter () {
9 | return new Router()
10 | }
11 |
12 | export function getLocalVueByMode (mode) {
13 | const localVue = createLocalVue()
14 | localVue.use(Router)
15 |
16 | // register global component
17 | localVue.component('OutboundLink', mockComponent('outbound-link'))
18 |
19 | // register page component in root route.
20 | localVue.component(i18nSiteData.pages[0].key, mockComponent('page-component'))
21 | localVue.component(simpleSiteData.pages[0].key, mockComponent('page-component'))
22 |
23 | // data mixin
24 | if (mode === 'i18n') {
25 | localVue.mixin(dataMixin(i18nSiteData))
26 | } else {
27 | localVue.mixin(dataMixin(simpleSiteData))
28 | }
29 |
30 | return localVue
31 | }
32 |
33 | export function modeTestRunner (description, testFn, modes = ['simple', 'i18n']) {
34 | if (!Array.isArray(modes)) {
35 | modes = [modes]
36 | }
37 | modes.forEach(mode => {
38 | describe(description, () => {
39 | testFn(mode, getLocalVueByMode(mode))
40 | })
41 | })
42 | }
43 |
--------------------------------------------------------------------------------
/src/zh/miniapp/WXS.md:
--------------------------------------------------------------------------------
1 | # WXS
2 | ##### wxs是什么？
3 | > WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
4 | ##### 注意
5 | 1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
6 | 1. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
7 | 1. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript文件中定义的函数，也不能调用小程序提供的API。
8 | 1. wxs 函数不能作为组件的事件回调。
9 | 1. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
10 |
11 |
12 | ##### 页面渲染
13 |
14 | ```
15 |
16 | 努力不是为了取悦别人 而是照亮自己的心 告诉自己有一股独立向上的力量.
${code}
2 |
3 | 
4 |
5 |
44 |
50 | }
51 | }
52 | }
53 |
54 | 用的时候直接引入这个文件，然后抛出 export default widthAd(Tab)
55 | ```
56 |
57 | ##### 4、为什么要使用高阶组件？
58 | - 为了代码的复用性，减少代码的冗余
59 |
60 | #### js继承的几种方式
61 | 1. function （this指向当前的function）
62 | ```
63 | function A(){
64 |
65 | }
66 | A.protytype.add = ()=>{
67 |
68 | }
69 | ```
70 |
71 |
--------------------------------------------------------------------------------
/docs/assets/js/35.0d7b47e4.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[35],{179:function(a,t,e){"use strict";e.r(t);var s=e(0),r=Object(s.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var a=this,t=a.$createElement,e=a._self._c||t;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"思维导图版知识点总结"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#思维导图版知识点总结","aria-hidden":"true"}},[a._v("#")]),a._v(" 思维导图版知识点总结")]),a._v(" "),e("h2",{attrs:{id:"vue"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vue","aria-hidden":"true"}},[a._v("#")]),a._v(" Vue")]),a._v(" "),e("p",[e("img",{attrs:{src:"http://assets.processon.com/chart_image/5af6a37ae4b0a0f0f1a05a36.png",alt:"vue"}})]),a._v(" "),e("h2",{attrs:{id:"react"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#react","aria-hidden":"true"}},[a._v("#")]),a._v(" React")]),a._v(" "),e("p",[e("img",{attrs:{src:"http://assets.processon.com/chart_image/5b33428ae4b0a8a7ffb98bd7.png?_=1552542663250",alt:"react"}})]),a._v(" "),e("h2",{attrs:{id:"阶段一"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#阶段一","aria-hidden":"true"}},[a._v("#")]),a._v(" 阶段一")]),a._v(" "),e("p",[e("img",{attrs:{src:"http://assets.processon.com/chart_image/5bac8350e4b0bd4db94e9514.png?_=1552542696718",alt:"实训一"}})]),a._v(" "),e("h2",{attrs:{id:"阶段二"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#阶段二","aria-hidden":"true"}},[a._v("#")]),a._v(" 阶段二")]),a._v(" "),e("p",[e("img",{attrs:{src:"http://assets.processon.com/chart_image/5bc0198fe4b06fc64b17fa15.png?_=1552542798104",alt:"实训二"}})])])}],!1,null,null,null);t.default=r.exports}}]);
--------------------------------------------------------------------------------
/docs/assets/js/49.ebed9df6.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[49],{165:function(e,t,i){"use strict";i.r(t);var v=i(0),l=Object(v.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"content"},[i("h1",{attrs:{id:"mvvm"}},[i("a",{staticClass:"header-anchor",attrs:{href:"#mvvm","aria-hidden":"true"}},[e._v("#")]),e._v(" MVVM")]),e._v(" "),i("h4",{attrs:{id:"_1、mvvm是什么？"}},[i("a",{staticClass:"header-anchor",attrs:{href:"#_1、mvvm是什么？","aria-hidden":"true"}},[e._v("#")]),e._v(" 1、MVVM是什么？")]),e._v(" "),i("ol",[i("li",[e._v("MVVM是Model-View-ViewModel的简写")]),e._v(" "),i("li",[e._v("它本质上是MVC 的改进版")]),e._v(" "),i("li",[e._v("MVVM（Model-View-ViewModel）框架的由来是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架")])]),e._v(" "),i("h4",{attrs:{id:"_2、mvvm优点"}},[i("a",{staticClass:"header-anchor",attrs:{href:"#_2、mvvm优点","aria-hidden":"true"}},[e._v("#")]),e._v(" 2、MVVM优点")]),e._v(" "),i("ul",[i("li",[i("blockquote",[i("p",[e._v("MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点")])])])]),e._v(" "),i("ol",[i("li",[i("strong",[e._v("低耦合")]),e._v('：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变')]),e._v(" "),i("li",[i("strong",[e._v("可重用性")]),e._v("：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑")]),e._v(" "),i("li",[i("strong",[e._v("独立开发")]),e._v("：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码")]),e._v(" "),i("li",[i("strong",[e._v("可测试")]),e._v("：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写")])])])}],!1,null,null,null);t.default=l.exports}}]);
--------------------------------------------------------------------------------
/src/zh/guide/assets.md:
--------------------------------------------------------------------------------
1 | # 静态资源
2 |
3 | ## 相对路径
4 |
5 | 所有的 Markdown 文件都会被 webpack 编译成 Vue 组件，因此你可以，并且**应该更倾向于**使用相对路径（Relative URLs）来引用所有的静态资源：
6 |
7 | ``` md
8 | 
9 | ```
10 |
11 | 同样地，这在 `*.vue` 文件的模板中一样可以工作，图片将会被 `url-loader` 和 `file-loader` 处理，在运行生成静态文件的构建任务时，文件会被复制到正确的位置。
12 |
13 | 除此之外，你也使用 `~` 前缀来明确地指出这是一个 webpack 的模块请求，这将允许你通过 webpack 别名来引用文件或者 npm 的依赖：
14 |
15 | ``` md
16 | 
17 | 
18 | ```
19 |
20 | Webpack 的别名可以通过 `.vuepress/config.js` 中 [configureWebpack](../config/README.md#configurewebpack) 来配置，如：
21 |
22 | ``` js
23 | module.exports = {
24 | configureWebpack: {
25 | resolve: {
26 | alias: {
27 | '@alias': 'path/to/some/dir'
28 | }
29 | }
30 | }
31 | }
32 | ```
33 |
34 | ## 公共文件
35 |
36 | 有时，你可能需要提供一个静态资源，但是它们并不直接被你的任何一个 markdown 文件或者主题组件引用 —— 举例来说，favicons 和 PWA 的图标，在这种情形下，你可以将它们放在 `.vuepress/public` 中， 它们最终会被复制到生成的静态文件夹中。
37 |
38 | ## 基础路径
39 |
40 | 如果你的网站会被部署到一个**非根路径**，你将需要在 `.vuepress/config.js` 中设置 `base`，举例来说，如果你打算将你的网站部署到 `https://foo.github.io/bar/`，那么 `base` 的值就应该被设置为 `"/bar/"` (应当总是以斜杠开始，并以斜杠结束)。
41 |
42 | 有了基础路径（Base URL），如果你希望引用一张放在 `.vuepress/public` 中的图片，你需要使用这样路径：`/bar/image.png`，然而，一旦某一天你决定去修改 `base`，这样的路径引用将会显得异常脆弱。为了解决这个问题，VuePress 提供了内置的一个 helper `$withBase`（它被注入到了 Vue 的原型上），可以帮助你生成正确的路径：
43 |
44 | ``` vue
45 |
45 |
48 | 请下载淘票票
46 | 下载 47 |/
5 |
6 | module.exports = md => {
7 | const fence = md.renderer.rules.fence
8 | md.renderer.rules.fence = (...args) => {
9 | const [tokens, idx, options] = args
10 | const token = tokens[idx]
11 |
12 | const rawInfo = token.info
13 | if (!rawInfo || !RE.test(rawInfo)) {
14 | return fence(...args)
15 | }
16 |
17 | const langName = rawInfo.replace(RE, '').trim()
18 | // ensure the next plugin get the correct lang.
19 | token.info = langName
20 |
21 | const lineNumbers = RE.exec(rawInfo)[1]
22 | .split(',')
23 | .map(v => v.split('-').map(v => parseInt(v, 10)))
24 |
25 | const code = options.highlight
26 | ? options.highlight(token.content, langName)
27 | : token.content
28 |
29 | const rawCode = code.replace(wrapperRE, '')
30 | const highlightLinesCode = rawCode.split('\n').map((split, index) => {
31 | const lineNumber = index + 1
32 | const inRange = lineNumbers.some(([start, end]) => {
33 | if (start && end) {
34 | return lineNumber >= start && lineNumber <= end
35 | }
36 | return lineNumber === start
37 | })
38 | if (inRange) {
39 | return ` `
40 | }
41 | return '
'
42 | }).join('')
43 |
44 | const highlightLinesWrapperCode =
45 | `${highlightLinesCode}`
46 |
47 | return highlightLinesWrapperCode + code
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/zh/standard/Cooperation.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | sidebarDepth: 2
4 | ---
5 | # 前后端是如何交互的
6 | iOS，H5，安卓等前端开发的如何跟后台进行交互?
7 | 应该怎么去规避一些不该属于自己的任务而被后台强加于自己?
8 |
9 | ## 1.前端请求数据URL由谁来写?
10 | 在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数，这里的查询参数也就是URL请求的参数。
11 |
12 | ## 2.接口文档主要由谁来写?
13 | 接口文档也是主要由后台开发者来写的,因为直接跟数据打交道的就是后台,后台是最清楚,数据库里面有什么数据,能返回什么数据.前端开发只是数据的被动接受者.所以接口文档也主要是由后台来完成的,前端只是接口文档的使用者,使用过程中,发现返回的数据不对,则需要跟后台进行商量,由后台来修改.切记 前端不要随意更改接口文档,除非在取得后台开发人员的同意的情况下.总的来讲,接口文档主要由后台来设计,修改,前端开发者起到了辅助的作用.
14 |
15 | ## 3.前端开发与后台交互的数据格式主要是什么?
16 | 主要是JSON
17 | XML现在用的不多
18 |
19 | ## 4.前端开发的后台交互原理？
20 | 在项目的时候，我们前后端会大概说一下接口地址，前端请求的参数，后端返回的参数，然后大家就开始写，写的差不多的时候，大家调一下接口看一下返回的数据，没问题就可以了。
21 |
22 | ## 5.前端请求参数的形式
23 | GET和POST两种方式, 也会采用RESTful架构, 通过请求方式表示用户行为
24 | 对安全性不高 采用get方便
25 | post要比get安全
26 | GET - 从指定的服务器中获取数据
27 | POST - 提交数据给指定的服务器处理
28 |
29 | ## 6.前端应该告知后台哪些有效信息,后台才能返回前端想的数据的呢?
30 | 先将要展示的页面内容进行模块划分，将模块的内容提取出来，以及方便前端的一些标志值等，将所有想要的内容和逻辑告知后端，后端就会去数据库里面去查找相应的数据表中去获得相应的内容，或者图片地址信息。
31 | URL中的参数主要是根据后台需要,
32 | 如果后台需要一个参数作为查询的辅助条件 前端在URL数据请求时就传递参数。参数前面？几个参数中间&
33 |
34 | ## 7.我们应该怎么把页面这些信息有效传达给后台,以及后台是如何获取到这些数据?
35 | 总的来讲:所有前端请求的URL后面的参数,都是辅助后台数据查询的.如果不需要参数,那么后台就会直接给个URL给前端.
36 |
37 | ## 8.前端应该如何回拒一些本不属于自己做的一些功能需求或任务?
38 | 在与后台打交道中,我们经常遇到这种情况,有时候明明后台来处理某个事件很简单,后台非要你来做,这时候我们应该懂得去回绝他.
39 | 原则:前端就是负责把数据展示在页面上
40 | 发挥:这就需要我们对一个需求,一个任务的要有清晰认识了,如果对任务含糊不清,自己都没搞明白,你只能受后台摆布了.最后也会因为任务没有完成而备受责难了.
41 |
42 | ## 9.当前端在调用数据接口时,发现有些数据不是我们想要的,那么前端应该怎么办呢或者怎么跟后台讲呢?
43 | 首先要把请求的URL和返回的数据以及在页面的展示的情况给跟后台看,这样有理有据,后台开发人员是不会说什么的,否则,后台会很不耐烦的,甚至骂你的可能都有,本身做后台比较难,尤其在查询数据,取数据,封装数据方面都比较难处理.
44 |
45 | ## 10.为什么需要在请求的时候传入参数？
46 | 因为后台在查询数据库的时候需要条件查询。
--------------------------------------------------------------------------------
/lib/prepare/loadConfig.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs-extra')
2 | const path = require('path')
3 | const yamlParser = require('js-yaml')
4 | const tomlParser = require('toml')
5 |
6 | module.exports = function loadConfig (vuepressDir, bustCache = true) {
7 | const configPath = path.resolve(vuepressDir, 'config.js')
8 | const configYmlPath = path.resolve(vuepressDir, 'config.yml')
9 | const configTomlPath = path.resolve(vuepressDir, 'config.toml')
10 |
11 | if (bustCache) {
12 | delete require.cache[configPath]
13 | }
14 |
15 | // resolve siteConfig
16 | let siteConfig = {}
17 | if (fs.existsSync(configYmlPath)) {
18 | siteConfig = parseConfig(configYmlPath)
19 | } else if (fs.existsSync(configTomlPath)) {
20 | siteConfig = parseConfig(configTomlPath)
21 | } else if (fs.existsSync(configPath)) {
22 | siteConfig = require(configPath)
23 | }
24 |
25 | return siteConfig
26 | }
27 |
28 | function parseConfig (file) {
29 | const content = fs.readFileSync(file, 'utf-8')
30 | const [extension] = /.\w+$/.exec(file)
31 | let data
32 |
33 | switch (extension) {
34 | case '.yml':
35 | case '.yaml':
36 | data = yamlParser.safeLoad(content)
37 | break
38 |
39 | case '.toml':
40 | data = tomlParser.parse(content)
41 | // reformat to match config since TOML does not allow different data type
42 | // https://github.com/toml-lang/toml#array
43 | const format = []
44 | if (data.head) {
45 | Object.keys(data.head).forEach(meta => {
46 | data.head[meta].forEach(values => {
47 | format.push([meta, values])
48 | })
49 | })
50 | }
51 | data.head = format
52 | break
53 | }
54 |
55 | return data || {}
56 | }
57 |
--------------------------------------------------------------------------------
/lib/webpack/createServerConfig.js:
--------------------------------------------------------------------------------
1 | module.exports = function createServerConfig (options, cliOptions) {
2 | const fs = require('fs')
3 | const path = require('path')
4 | const WebpackBar = require('webpackbar')
5 | const createBaseConfig = require('./createBaseConfig')
6 | const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
7 | const CopyPlugin = require('copy-webpack-plugin')
8 |
9 | const config = createBaseConfig(options, cliOptions, true /* isServer */)
10 | const { sourceDir, outDir } = options
11 |
12 | config
13 | .target('node')
14 | .externals([/^vue|vue-router$/])
15 | .devtool('source-map')
16 |
17 | // no need to minimize server build
18 | config.optimization.minimize(false)
19 |
20 | config
21 | .entry('app')
22 | .add(path.resolve(__dirname, '../app/serverEntry.js'))
23 |
24 | config.output
25 | .filename('server-bundle.js')
26 | .libraryTarget('commonjs2')
27 |
28 | config
29 | .plugin('ssr-server')
30 | .use(VueSSRServerPlugin, [{
31 | filename: 'manifest/server.json'
32 | }])
33 |
34 | const publicDir = path.resolve(sourceDir, '.vuepress/public')
35 | if (fs.existsSync(publicDir)) {
36 | config
37 | .plugin('copy')
38 | .use(CopyPlugin, [[
39 | { from: publicDir, to: outDir }
40 | ]])
41 | }
42 |
43 | if (!cliOptions.debug) {
44 | config
45 | .plugin('bar')
46 | .use(WebpackBar, [{
47 | name: 'Server',
48 | color: 'blue',
49 | compiledIn: false
50 | }])
51 | }
52 |
53 | if (options.siteConfig.chainWebpack) {
54 | options.siteConfig.chainWebpack(config, true /* isServer */)
55 | }
56 |
57 | return config
58 | }
59 |
--------------------------------------------------------------------------------
/docs/assets/js/57.f1316fb6.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[57],{157:function(t,a,r){"use strict";r.r(a);var e=r(0),_=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:"content"},[r("h1",{attrs:{id:"组件通信"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#组件通信","aria-hidden":"true"}},[t._v("#")]),t._v(" 组件通信")]),t._v(" "),r("h4",{attrs:{id:"需要组件之进行通信的几种情况"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#需要组件之进行通信的几种情况","aria-hidden":"true"}},[t._v("#")]),t._v(" 需要组件之进行通信的几种情况")]),t._v(" "),r("ul",[r("li",[t._v("父组件向子组件通信")]),t._v(" "),r("li",[t._v("子组件向父组件通信")]),t._v(" "),r("li",[t._v("跨级组件通信")]),t._v(" "),r("li",[t._v("没有嵌套关系组件之间的通信")])]),t._v(" "),r("h5",{attrs:{id:"_1、父组件向子组件通信"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#_1、父组件向子组件通信","aria-hidden":"true"}},[t._v("#")]),t._v(" 1、父组件向子组件通信")]),t._v(" "),r("ul",[r("li",[t._v("通过props")])]),t._v(" "),r("h5",{attrs:{id:"_2、子组件向父组件通信"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#_2、子组件向父组件通信","aria-hidden":"true"}},[t._v("#")]),t._v(" 2、子组件向父组件通信")]),t._v(" "),r("ul",[r("li",[t._v("利用回调函数")]),t._v(" "),r("li",[t._v("利用自定义事件机制")])]),t._v(" "),r("h5",{attrs:{id:"_3、-跨级组件通信"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#_3、-跨级组件通信","aria-hidden":"true"}},[t._v("#")]),t._v(" 3、 跨级组件通信")]),t._v(" "),r("ul",[r("li",[t._v("层层组件传递props")]),t._v(" "),r("li",[t._v("使用context")])]),t._v(" "),r("h5",{attrs:{id:"_4、没有嵌套关系组件之间的通信"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#_4、没有嵌套关系组件之间的通信","aria-hidden":"true"}},[t._v("#")]),t._v(" 4、没有嵌套关系组件之间的通信")]),t._v(" "),r("ul",[r("li",[t._v("使用自定义事件机制")])])])}],!1,null,null,null);a.default=_.exports}}]);
--------------------------------------------------------------------------------
/src/guide/basic-config.md:
--------------------------------------------------------------------------------
1 | # 配置
2 |
3 | ## 配置文件(config file)
4 |
5 | 不做任何配置的话，页面会显得过于简单，用户也无法方便地浏览网站。想要定制你的网站，首先需要在文档目录中创建一个 `.vuepress` 目录。这是放置所有 VuePress 特有(VuePress-specific) 文件的地方。你的项目结构可能长这样：
6 |
7 | ```
8 | .
9 | ├─ docs
10 | │ ├─ README.md
11 | │ └─ .vuepress
12 | │ └─ config.js
13 | └─ package.json
14 | ```
15 |
16 | 配置 VuePress 站点的基本文件是 `.vuepress/config.js`，其中导出一个 JavaScript 对象：
17 |
18 | ``` js
19 | module.exports = {
20 | title: 'Hello VuePress',
21 | description: 'Just playing around'
22 | }
23 | ```
24 |
25 | 如果开发服务器正常运行，你应该看到该页面现在有一个 title 标题和一个搜索框。VuePress 带有内置的 基于 header 搜索(headers-based search) 的功能 - 它会自动从所有页面的 title, `h2` 和 `h3` header 标签中，建立一个简单的搜索索引。（译者注：此搜索是遍历 pages 数组的每一项，取出其中的 headers 数组，其中数组每项对应 markdown 标题，具体代码查看 /lib/default-theme/SearchBox.vue 的 suggestions 函数）
26 |
27 | 请查阅 [配置参考](../config/README.md) 以获取完整的选项列表。
28 |
29 | ::: tip 可替代的配置格式
30 | 你也可以使用 YAML(`.vuepress/config.yml`) 或 TOML(`.vuepress/config.toml`) 格式编写配置文件。
31 | :::
32 |
33 | ## 主题配置(theme configuration)
34 |
35 | VuePress 主题，负责网站的所有布局和交互细节。VuePress 附带一个默认主题（你现在看到的就是），专门为技术文档设计。它暴露许多选项，允许你自定义导航栏(navbar)、侧边栏(sidebar)和主页(homepage)等。详细信息请查看 [默认主题配置](../default-theme-config/README.md) 页面。
36 |
37 | 如果你想开发自定义主题，请参考 [自定义主题](./custom-themes.md)。
38 |
39 | ## 应用程序级别的增强功能(app level enhancements)
40 |
41 | 由于 VuePress 应用是一个标准的 Vue 应用程序，所以你可以通过创建一个 `.vuepress/enhanceApp.js` 文件，来使用应用程序级别的增强功能，如果此文件存在，该文件将会被导入到该应用程序中。该文件应该通过 `export default` 方式导出一个钩子函数，它将接收一个含有一些应用程序级别值的对象作为参数。你可以使用这个钩子来安装额外的 Vue 插件，注册全局组件，或者添加额外的路由钩子：
42 |
43 | ``` js
44 | export default ({
45 | Vue, // 当前 VuePress 应用所使用的 Vue 版本
46 | options, // 根 Vue 实例的选项
47 | router, // 应用程序的路由实例
48 | siteData // 网站元数据
49 | }) => {
50 | // ...使用应用程序级别的增强功能
51 | }
52 | ```
53 |
--------------------------------------------------------------------------------
/docs/assets/js/69.9e52d998.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[69],{218:function(t,e,r){"use strict";r.r(e);var a=r(0),u=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"content"},[r("h1",{attrs:{id:"vue一些对比"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#vue一些对比","aria-hidden":"true"}},[t._v("#")]),t._v(" Vue一些对比")]),t._v(" "),r("h4",{attrs:{id:"一、methods和computed"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#一、methods和computed","aria-hidden":"true"}},[t._v("#")]),t._v(" 一、methods和computed")]),t._v(" "),r("ul",[r("li",[t._v("computed是计算属性，methods是方法。")]),t._v(" "),r("li",[t._v("computed计算属性是基于它们的依赖进行==缓存==的")]),t._v(" "),r("li",[t._v("computed只有在它的相关依赖发生改变时才会重新求值")]),t._v(" "),r("li",[t._v("而对于method ，只要发生重新渲染，method 调用==总会==执行该函数")]),t._v(" "),r("li",[t._v("==总之：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods==")])]),t._v(" "),r("h4",{attrs:{id:"二、computed和watch"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#二、computed和watch","aria-hidden":"true"}},[t._v("#")]),t._v(" 二、computed和watch")]),t._v(" "),r("ul",[r("li",[t._v("计算属性是==计算属性==，==侦听器watch==是侦听器watch")]),t._v(" "),r("li",[t._v("侦听器watch是侦听一个特定的值，当该值变化时执行特定的函数")])]),t._v(" "),r("h4",{attrs:{id:"三、-router和-route"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#三、-router和-route","aria-hidden":"true"}},[t._v("#")]),t._v(" 三、$router和$route")]),t._v(" "),r("ul",[r("li",[t._v("router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象")]),t._v(" "),r("li",[t._v("route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等")]),t._v(" "),r("li",[t._v("打印this.$route和this.$router，==两个同时存在==。")]),t._v(" "),r("li",[t._v("两者传参方式相同")])])])}],!1,null,null,null);e.default=u.exports}}]);
--------------------------------------------------------------------------------
/lib/app/root-mixins/activeHeaderLinks.js:
--------------------------------------------------------------------------------
1 | import store from '@app/store'
2 | import throttle from 'lodash.throttle'
3 |
4 | export default {
5 | mounted () {
6 | window.addEventListener('scroll', this.onScroll)
7 | },
8 | methods: {
9 | onScroll: throttle(function () {
10 | this.setActiveHash()
11 | }, 300),
12 | setActiveHash () {
13 | const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link'))
14 | const anchors = [].slice.call(document.querySelectorAll('.header-anchor'))
15 | .filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash))
16 |
17 | const scrollTop = Math.max(
18 | window.pageYOffset,
19 | document.documentElement.scrollTop,
20 | document.body.scrollTop
21 | )
22 |
23 | for (let i = 0; i < anchors.length; i++) {
24 | const anchor = anchors[i]
25 | const nextAnchor = anchors[i + 1]
26 |
27 | const isActive = i === 0 && scrollTop === 0 ||
28 | (scrollTop >= anchor.parentElement.offsetTop + 10 &&
29 | (!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10))
30 |
31 | if (isActive && decodeURIComponent(this.$route.hash) !== decodeURIComponent(anchor.hash)) {
32 | store.disableScrollBehavior = true
33 | this.$router.replace(decodeURIComponent(anchor.hash), () => {
34 | // execute after scrollBehavior handler.
35 | this.$nextTick(() => {
36 | store.disableScrollBehavior = false
37 | })
38 | })
39 | return
40 | }
41 | }
42 | }
43 | },
44 | beforeDestroy () {
45 | window.removeEventListener('scroll', this.onScroll)
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/docs/assets/js/18.faddd431.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[18],{198:function(s,t,a){"use strict";a.r(t);var e=a(0),n=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"content"},[a("h3",{attrs:{id:"像数-1-2-3-一样容易"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#像数-1-2-3-一样容易","aria-hidden":"true"}},[s._v("#")]),s._v(" 像数 1, 2, 3 一样容易")]),s._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 安装")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("yarn")]),s._v(" global "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("add")]),s._v(" vuepress "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 或者：npm install -g vuepress")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 新建一个 markdown 文件")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("echo")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'# Hello VuePress!'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v(" README.md\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 开始写作")]),s._v("\nvuepress dev "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v(".")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 构建静态文件")]),s._v("\nvuepress build "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v(".")]),s._v("\n")])])]),a("div",{staticClass:"warning custom-block"},[a("p",{staticClass:"custom-block-title"},[s._v("注意")]),s._v(" "),a("p",[s._v("请确保你的 Node.js 版本 >= 8。")])])])}],!1,null,null,null);t.default=n.exports}}]);
--------------------------------------------------------------------------------
/src/zh/algorithm/Charpter4.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | sidebarDepth: 2
4 | ---
5 |
6 | # 第四章 编程基本功
7 | ## 4.1 字符类型统计器
8 | 请编写一个C程序,在终端用键盘输入字符串,以Ctrl+Z组合键表示输入完毕,统计输入的字符串中的空格符,制表符,换行符的个数,并显示统计的结果
9 |
10 |
11 | ## 4.2 计算字符的ASCII码
12 | 编写一个程序,在终端输入一个字符,输出它的ASCII码
13 |
14 | ## 4.3 嵌套if-slse语句的妙用
15 | 学校进行成绩分级管理,取消分数制,改为成绩分级评定。具体办法是：小于60分为E类；60分至70分（不含70分）为D类；70分至80分（不含）为C类；80分至90分（不含）为B类；90分以上为A类。设计一个程序，对输入的成绩进行等级划分
16 |
17 | ## 4.4 基于switch语句的译码器
18 | 给定一个成绩码表如下：
19 | |a|b|c|
20 | |-|--|--|
21 | |1|01|001|
22 | 又知有一个0/1字符串为：“001011101001011001”，编写一个C程序，按照给定的前缀码表为该字符串译码。
23 |
24 | ## 4.5 判断闰年
25 | 给定一个年份，判断该年是否是闰年。
26 |
27 | ## 4.6 指针变量作参数
28 | 编写一个函数inputArray，该函数被主函数调用，通过该函数实现向主函数中定义的数组输入数据
29 |
30 | ## 4.7 矩阵的转置运算
31 | 
32 |
33 | ## 4.8 矩阵的乘法运算
34 | 
35 |
36 | ## 4.9 巧用位运算
37 | 用位运算操作实现两个整数的交换。例如x1=5，x2=10；交换后x1=10，x2=5。
38 |
39 | ## 4.10 文件的读写(忽略)
40 | 创建一个后缀名为txt的文件，并向该文件中写入一个字符串，保存起来。再打开该文件，读出文件中的内容。
41 |
42 | ## 4.11 计算文件的大小(忽略)
43 | 编写一个C程序，用来计算指定文件的大小。
44 |
45 | ## 4.12 记录程序的运行时间
46 | 任意编写一段程序，要求记录并输出该段程序执行的时间。
47 |
48 | ## 4.13 十进制/二进制转化器
49 | 编写一个程序，将输入的十进制数转化为二进制表示。例如：输入十进制数64，输出二进制数表示1000000
50 |
51 | ## 4.14 计打印特殊图案
52 | 在应用C语言开发程序时，有时为了程序运行界面的美观，需要在屏幕上用字符构成一些特殊的图案用以装饰。请设计一个C程序，实现在屏幕上输出一个类似于下面的图案。
53 | 
54 |
55 | ## 4.15 打印杨辉三角
56 | 在屏幕上打印出一个6阶杨辉三角
57 |
58 | ## 4.16 复杂级数的前n项和
59 | 
60 |
61 | ## 4.17 寻找矩阵中的"鞍点"
62 | 在一个矩阵中，可能会有这样的元素：它在该行中最大，而在该列中最小。我们把这样的元素称为“鞍点”。一个矩阵中也可能没有“鞍点”。任意输入一个5x5的矩阵，寻找该矩阵中的“鞍点”，并将它在矩阵中的位置（行，列）输出。
63 |
64 | ## 4.18 n阶勒让德多项式求解
65 | 
66 | 测试：当n=5,x=1.6时，输出1.56
67 |
68 | ## 4.19 递归反向输出字符串
69 | 编写一个递归函数，实现将输入的任意长度的字符串反向输出的功能。例如输入字符串：ABCD，输出字符串：BCDA。
70 |
71 | ## 4.20 一年中的第几天
72 | 输入某年某月某日，判断这一天是这一年的第几天？
--------------------------------------------------------------------------------
/docs/assets/js/72.38ef9238.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[72],{213:function(e,n,t){"use strict";t.r(n);var r=t(0),a=Object(r.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"content"},[t("h1",{attrs:{id:"vue路由"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vue路由","aria-hidden":"true"}},[e._v("#")]),e._v(" Vue路由")]),e._v(" "),t("h4",{attrs:{id:"_1、路由-外置的-vue-router"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、路由-外置的-vue-router","aria-hidden":"true"}},[e._v("#")]),e._v(" 1、路由(外置的) vue-router")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("import VueRouter from 'vue-router';\nimport Index from './components/index.vue';\nimport List from './components/index.vue';\nimport Login from './components/index.vue';\n\nVue.use(VueRouter); // 注册\nlet router = new VueRouter({\n routes:[{ // 定义多个路由\n path:'/index', \n component:Index\n },{\n path:'/list',\n component:List\n },{\n path:'/login',\n component:Login\n },{\n path:'/music',\n component:Music,\n children:[{ // 封装子路由\n path:'/comd',\n component:Comd\n },{\n path:'/search',\n component:Search\n }]\n }]\n})\n\n\napp.vue // 入口文件\n推荐 \n\nrouter-link === a\nto === href\n')])])])])}],!1,null,null,null);n.default=a.exports}}]);
--------------------------------------------------------------------------------
/lib/default-theme/SidebarGroup.vue:
--------------------------------------------------------------------------------
1 |
2 |
31 |
32 |
33 |
43 |
44 |
78 |
--------------------------------------------------------------------------------
/src/zh/react/React生命周期.md:
--------------------------------------------------------------------------------
1 | # React生命周期
2 | #### 1、componentDidMount() // 组件挂载完成之后触发的生命周期 相当于vue的mounted
3 | ```
4 | componentDidMount(){
5 | setInterval(()=>{
6 | // 修改state的唯一方法
7 | // @param 要修改的数据
8 | // @param 修改完成之后的回调函数
9 | this.setState({
10 | index:this.state.index++
11 | },()=>{
12 | consloe.log(this.state.index)
13 | })
14 | },1000)
15 | }
16 |
17 | ```
18 | #### 2、componentWillMount() // 组件挂载之前 相当于vue的beforeMount
19 | #### 3、componentWillReceiveProps(nextProps) // 组件将要接收新的props vue没有
20 |
21 | ```
22 | // 和props相关的唯一一个生命周期
23 | // 执行完成之后，this.props指向新的props
24 | componentWillReceiveProps(nextProps){
25 | // 旧的props this.props
26 | // 新的props nextProps
27 |
28 | }
29 |
30 |
31 | ```
32 | #### 4、shouldComponentUpdate(nextProps,nextState) // 通过返回值判断组件是否需要更新,用于react优化，vue没有 true更新，false不更新
33 | ```
34 | shouldComponentUpdate(nextProps,nextState){
35 | // 旧的props this.props
36 | // 新的props nextProps
37 | // 旧的State this.state
38 | // 新的state nextState
39 | // 返回值是Boolean 默认true
40 | }
41 |
42 |
43 | ```
44 | #### 5、componentWillUpdate // 组件将要更新 相当于vue的beforeUpdate
45 | #### 6、componentDidUpdate // 组件更新完成 相当于vue的updated
46 | #### 7、componentWillUnmount() // 组件将要卸载
47 | #### 8、unmountComponentAtNode() // 卸载组件
48 | ```
49 | ReactDom.unmountComponentAtNode(document.getElementById('root'))
50 | ```
51 | #### 9、分为三个阶段
52 | 1. 实例化阶段
53 |
54 | ```
55 | 首次使用一个组件类时会有getDefaultProps
56 | 对于组件类的所有后续应用没有getDefaultProps
57 | 1、getDefaultProps
58 | 2、getInitialState
59 | 3、componentWillMount
60 | 4、render
61 | 5、componentDidMount
62 | ```
63 | 2. 更新阶段(存在期)
64 |
65 |
66 | ```
67 | 1. componentWillReceiveProps
68 | 2. shouldComponentUpdate
69 | 3. componentWillUpdate
70 | 4. render
71 | 5. componentDidUpdate
72 | ```
73 | 3. 销毁&清理期
74 |
75 | ```
76 | componentWillUnmount
77 | ```
78 |
--------------------------------------------------------------------------------
/lib/app/root-mixins/updateMeta.js:
--------------------------------------------------------------------------------
1 | export default {
2 | created () {
3 | if (this.$ssrContext) {
4 | this.$ssrContext.title = this.$title
5 | this.$ssrContext.lang = this.$lang
6 | this.$ssrContext.description = this.$page.description || this.$description
7 | }
8 | },
9 |
10 | mounted () {
11 | // update title / meta tags
12 | this.currentMetaTags = new Set()
13 |
14 | const updateMeta = () => {
15 | document.title = this.$title
16 | document.documentElement.lang = this.$lang
17 | const userMeta = this.$page.frontmatter.meta || []
18 | const meta = userMeta.slice(0)
19 | const useGlobalDescription = userMeta.filter(m => m.name === 'description').length === 0
20 |
21 | // #665 Avoid duplicate description meta at runtime.
22 | if (useGlobalDescription) {
23 | meta.push({ name: 'description', content: this.$description })
24 | }
25 |
26 | // Including description meta coming from SSR.
27 | const descriptionMetas = document.querySelectorAll('meta[name="description"]')
28 | if (descriptionMetas.length) {
29 | descriptionMetas.forEach(m => this.currentMetaTags.add(m))
30 | }
31 |
32 | this.currentMetaTags = new Set(updateMetaTags(meta, this.currentMetaTags))
33 | }
34 | this.$watch('$page', updateMeta)
35 | updateMeta()
36 | },
37 |
38 | beforeDestroy () {
39 | updateMetaTags(null, this.currentMetaTags)
40 | }
41 | }
42 |
43 | function updateMetaTags (meta, current) {
44 | if (current) {
45 | [...current].forEach(c => {
46 | document.head.removeChild(c)
47 | })
48 | }
49 | if (meta) {
50 | return meta.map(m => {
51 | const tag = document.createElement('meta')
52 | Object.keys(m).forEach(key => {
53 | tag.setAttribute(key, m[key])
54 | })
55 | document.head.appendChild(tag)
56 | return tag
57 | })
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/zh/react/redux.md:
--------------------------------------------------------------------------------
1 | # Redux
2 | ##### 1、redux是什么？
3 | - 是一个框架
4 | - 跨组件通信
5 | #### 分四块内容
6 | 1. actionTypes
7 | 2. actions => {type, payload}
8 | 3. reducer
9 | 4. store
10 |
11 | #### redux三大原则
12 | 1. 单一数据源
13 | 2. State 是只读的
14 | 3. 使用纯函数来执行修改
15 | ##### 2、provider
16 | - 只有一个属性，是store
17 | - 顶层容器
18 | ##### 3、connect
19 | - 伪高阶函数
20 | - 4个参数
21 |
22 | ```
23 | 1、把redux中state映射成的props传递到组件中去 // 获取state数据
24 | const mapStatetoProps = (state,ownProps)=>{
25 | // state redux存储的数据
26 | // ownProps 组件调用时传过来的props
27 | // 返回一个对象
28 | }
29 |
30 | 2、把dispatch操作封装在当前函数里，传递到组件中 // 封装方法
31 | const mapDispatchtoProps = (dispatch, ownProps)=>{
32 | // 返回一个对象
33 | return {
34 | fetchList:()=>{
35 | axios.get('路径')
36 | .then(res=>{
37 | // 触发dispatch
38 | dispatch({
39 | type:'FETCH_LIST',
40 | payload:res.data
41 | })
42 | })
43 | }
44 | }
45 |
46 | }
47 |
48 | 3、合并props
49 | const mergeProps = (stateProps, dispatchProps, ownProps)=>{
50 | // stateProps 是mapStateToProps的返回值
51 | // dispatchProps 是mapDispatchtoProps的返回值
52 | // ownProps 是调用时传入的props
53 | return {...stateProps, ...dispatchProps, ...ownProps}
54 |
55 | }
56 |
57 | 4、可选配置项
58 | const options = {
59 | pure:true
60 | // pure：表示state需要深拷贝才会响应
61 | // true 深拷贝(默认true 深拷贝)
62 | // false 浅拷贝深拷贝都可以
63 | }
64 | ```
65 | ##### 4、reducer
66 | - 有两个参数：state action
67 | - 接收先前的 state 和 action，并返回新的 state
68 | ##### 5、深拷贝和浅拷贝
69 | - 深拷贝 ...
70 | - 浅拷贝 Object.assign()
71 | ##### 5、store
72 | - createStore接收两个参数
73 | > reducers 存储数据和修改数据
74 |
75 | > applyMiddleware 应用的中间件
76 |
77 | ##### 6、combineReducers // 合并
78 |
79 | ```
80 | import {combineReducers} from 'redux';
81 | import cart from './cart';
82 | import my from './my';
83 |
84 | export default combineReducers({
85 | cart,
86 | my
87 | })
88 | ```
89 |
--------------------------------------------------------------------------------
/docs/assets/js/45.d5a892d0.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[45],{169:function(t,e,s){"use strict";s.r(e);var n=s(0),a=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"content"},[s("h1",{attrs:{id:"小程序组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#小程序组件","aria-hidden":"true"}},[t._v("#")]),t._v(" 小程序组件")]),t._v(" "),s("h5",{attrs:{id:"什么是组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#什么是组件","aria-hidden":"true"}},[t._v("#")]),t._v(" 什么是组件")]),t._v(" "),s("blockquote",[s("p",[t._v("组件就是将一个功能进行封装，组件是视图层的基本组成单元，有自己独特的功能")])]),t._v(" "),s("h5",{attrs:{id:"组件的规范"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组件的规范","aria-hidden":"true"}},[t._v("#")]),t._v(" 组件的规范")]),t._v(" "),s("ol",[s("li",[t._v("结构")]),t._v(" "),s("li",[t._v("样式")]),t._v(" "),s("li",[t._v("逻辑")]),t._v(" "),s("li",[t._v("通信方式")]),t._v(" "),s("li",[t._v("生命周期")]),t._v(" "),s("li",[t._v("可组合（可以嵌套）")]),t._v(" "),s("li",[t._v("定义组件")]),t._v(" "),s("li",[t._v("调用组件（标签的形式）")])]),t._v(" "),s("h5",{attrs:{id:"组件的创建"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组件的创建","aria-hidden":"true"}},[t._v("#")]),t._v(" 组件的创建")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("1.小程序中组件由4个文件组成，.json .wxmll .wxss .js\n2.创建组件实例需要通过Compoent(Object) 函数创建\n3.创建组件需要在组件的json文件中定义 component:true 字段指定为一个组件\n4.组件中的基础选项\n (1)Properties: 接受的数据\n (2)Data: 内部数据\n (3)Methods: 处理函数\n5.使用组件\n6.需要在对应的页面或者组件的json文件中定义 usingComponents: {} 选项\n usingComponets: {\n '名-称': '组件路径' \n }\n7.在页面中可以实用 <名-称/>\n8.名称中不能出现大写字母，规则就是(字母_-)\n9.组件的组合可以实用slot插槽来完成，和vue一样，只不过没有作用域插槽， 可以有命名插槽和默认插槽\n10.组件的通信可以通过props传递参数(父子)， 自定义事件（子父）\n (1)父子
3 |
7 | {{message}}
8 |
9 |
10 |
11 |
12 |
13 |
60 |
61 |
86 |
--------------------------------------------------------------------------------
/test/markdown/link.spec.js:
--------------------------------------------------------------------------------
1 | import { Md } from './util'
2 | import link from '@/markdown/link.js'
3 | import { dataReturnable } from '@/markdown/index.js'
4 |
5 | const mdL = Md().use(link, {
6 | target: '_blank',
7 | rel: 'noopener noreferrer'
8 | })
9 |
10 | dataReturnable(mdL)
11 |
12 | const internalLinkAsserts = {
13 | // START abosolute path usage
14 | '/': '/',
15 |
16 | '/foo/': '/foo/',
17 | '/foo/#hash': '/foo/#hash',
18 |
19 | '/foo/two.md': '/foo/two.html',
20 | '/foo/two.html': '/foo/two.html',
21 | // END abosolute path usage
22 |
23 | // START relative path usage
24 | 'README.md': './',
25 | './README.md': './',
26 |
27 | 'index.md': './',
28 | './index.md': './',
29 |
30 | 'one.md': './one.html',
31 | './one.md': './one.html',
32 |
33 | 'foo/README.md': './foo/',
34 | './foo/README.md': './foo/',
35 |
36 | 'foo/README.md#hash': './foo/#hash',
37 | './foo/README.md#hash': './foo/#hash',
38 |
39 | '../README.md': './../',
40 | '../README.md#hash': './../#hash',
41 |
42 | '../foo.md': './../foo.html',
43 | '../foo.md#hash': './../foo.html#hash',
44 |
45 | '../foo/one.md': './../foo/one.html',
46 | '../foo/one.md#hash': './../foo/one.html#hash'
47 | // END relative path usage
48 | }
49 |
50 | const externalLinks = [
51 | '[vue](https://vuejs.org/)',
52 | '[vue](http://vuejs.org/)',
53 | '[some **link** with `code`](https://google.com)' // #496
54 | ]
55 |
56 | describe('link', () => {
57 | test('should convert internal links to router links correctly', () => {
58 | for (const before in internalLinkAsserts) {
59 | const input = `[${before}](${before})`
60 | const output = mdL.render(input)
61 | const after = getCompiledLink(output)
62 | expect(after).toBe(internalLinkAsserts[before])
63 | }
64 | })
65 |
66 | test('should render external links correctly', () => {
67 | for (const link of externalLinks) {
68 | const { html } = mdL.render(link)
69 | expect(html).toMatchSnapshot()
70 | }
71 | })
72 | })
73 |
74 | function getCompiledLink (output) {
75 | const { data: { routerLinks }} = output
76 | return routerLinks[0]
77 | }
78 |
--------------------------------------------------------------------------------
/src/zh/interview/longhu.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 龙湖地产
3 | sidebar: auto
4 | sidebarDepth: 2
5 | ---
6 | # 龙湖地产
7 | ## 1. 块级和行内元素元素有哪些，它们有什么区别？
8 |
9 | ## 2. 为什么要少用Iframe?
10 |
11 |
12 |
13 | ## 3. 用css写出这样一个图形 (上下左右居中)
14 |
15 |
16 |
17 | ## 4. 写画如下代码的页面展示效果图，c盒子有position：relative 和没position值有什么区别？
18 | ```js
19 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | ```
45 |
46 | ## 5. call,apply和bind的区别列举使用方法
47 |
48 |
49 | ## 6. 写出下面代码的输入值
50 | ```js
51 | 6.1 (function(x){
52 | delete x;
53 | return x;
54 | })(1);
55 |
56 |
57 | 6.2 var y = 1, x = y = typeof x;
58 | console.log(x);
59 |
60 |
61 | 6.3 (function f(f){
62 | return typeof f();
63 | })(function(){ return 1; });
64 |
65 |
66 | 6.4 !!typeof(null)
67 | ```
68 |
69 | ## 7. 写出如下代码的运行结果
70 | ```js
71 | function Fun(){
72 | var printNum= function(){
73 | console.log(1);
74 | }
75 | return this;
76 | }
77 | Fun.printNum = function(){
78 | console.log(2);
79 | }
80 | Fun.prototype.printNum = function(){
81 | console.log(3);
82 | }
83 | var printNum = function(){
84 | console.log(4);
85 | }
86 | function printNum (){
87 | console.log(5);
88 | }
89 |
90 | Fun().printNum();
91 | printNum();
92 | Fun();
93 | printNum();
94 | new Fun().printNum();
95 | new new Fun().printNum();
96 | ```
97 | ## 8. var arr = [1,2,[3,4,[5]],6,[7,[8,9,[10,11,[12]]]]]请写一个方法把数组拍扁成普通数组。
98 | ```js
99 | arr.toString();
100 | ```
101 |
102 | ## 9. 写一写你常用和重要的es6知识点
103 |
104 | ## 10. 同步和异步的概念和区别。
105 |
106 | ## 11. 写出常见的http状态码及含义。
107 |
108 | ## 12. [数组去重的多种方法](https://m.jb51.net/show/118657)
109 |
110 |
111 | ## 13.url从输入地址栏到打开页面一系列操作描述一下
112 |
113 | ## 14.vue的相关知识
114 |
--------------------------------------------------------------------------------
/src/zh/guide/README.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 |
3 | VuePress 由两部分组成：一部分是支持用 Vue 开发主题的极简静态网站生成器，另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
4 |
5 | 每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
6 |
7 | ## 它是如何工作的？
8 |
9 | 事实上，一个 VuePress 网站是一个由 [Vue](http://vuejs.org/)、[Vue Router](https://github.com/vuejs/vue-router) 和 [webpack](http://webpack.js.org/) 驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。
10 |
11 | 在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 [Nuxt](https://nuxtjs.org/) 的 `nuxt generate` 命令，以及其他的一些项目，比如 [Gatsby](https://www.gatsbyjs.org/)。
12 |
13 | ## 特性
14 |
15 | - 为技术文档而优化的 [内置 Markdown 拓展](./markdown.md)
16 | - [在 Markdown 文件中使用 Vue 组件的能力](./using-vue.md)
17 | - [Vue 驱动的自定义主题系统](./custom-themes.md)
18 | - [自动生成 Service Worker](../config/README.md#serviceworker)
19 | - [Google Analytics 集成](../config/README.md#ga)
20 | - [基于 Git 的 “最后更新时间”](../default-theme-config/README.md#最后更新时间)
21 | - [多语言支持](./i18n.md)
22 | - 默认主题包含：
23 | - 响应式布局
24 | - [可选的主页](../default-theme-config/README.md#首页)
25 | - [简洁的开箱即用的标题搜索](../default-theme-config/README.md#内置搜索)
26 | - [Algolia 搜索](../default-theme-config/README.md#algolia-搜索)
27 | - 可自定义的[导航栏](../default-theme-config/README.md#导航栏) 和[侧边栏](../default-theme-config/README.md#侧边栏)
28 | - [自动生成的 GitHub 链接和页面的编辑链接](../default-theme-config/README.md#git-仓库和编辑链接)
29 |
30 | ## Todo
31 |
32 | VuePress 仍然处于开发中，这里有一些目前还不支持、但已经在计划中的特性：
33 |
34 | - 插件
35 | - 博客系统
36 |
37 | 我们欢迎你为 VuePress 的开发作出贡献。
38 |
39 | ## 为什么不是...?
40 |
41 | ### Nuxt
42 |
43 | VuePress 能做的事情，Nuxt 理论上确实能够胜任，但 Nuxt 是为构建应用程序而生的，而 VuePress 则专注在以内容为中心的静态网站上，同时提供了一些为技术文档定制的开箱即用的特性。
44 |
45 | ### studyify / Docute
46 |
47 | 这两个项目同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好。如果你并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择！
48 |
49 | ### Hexo
50 |
51 | Hexo 一直驱动着 Vue 的文档 —— 事实上，在把我们的主站从 Hexo 迁移到 VuePress 之前，我们可能还有很长的路要走。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互，同时，Hexo 的 Markdown 渲染的配置也不是最灵活的。
52 |
53 | ### GitBook
54 |
55 | 我们的子项目文档一直都在使用 GitBook。GitBook 最大的问题在于当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性，并且，主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。
56 |
--------------------------------------------------------------------------------
/src/zh/standard/Project.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | sidebarDepth: 2
4 | ---
5 | # 开发流程
6 | ## 图解
7 | 
8 | ## 需求
9 | ### 评审
10 | 召集需求涉及到的UI、开发、产品、测试人员整理业务流程，同步信息，明确分工
11 | 明确需求目的，考虑当前需求设计是否可满足目的
12 | 整理流程中如果涉及的其他人员，则召集商讨
13 | 如需求设计上影响现有业务功能，应要求产品重新设计实现方案，然后重新评审
14 | ### 注意事项
15 | 业务流程同步：评审后重新梳理流程，存在疑问处及时找产品沟通
16 | 周边需求依赖：评审功能与依赖功能并行开发，由于前置需求未完成导致当前需求时间成本被压缩
17 | 埋点需求：提前与产品明确是否需要埋点
18 | 造数据：提前了解测试数据制造的困难程度，预估测试时间--->有些场景下的测试数据非常难造
19 | 并发量：后端机器是否能够承担新需求下的并发量，如果无法承担的话必须给出后续方案
20 | 自测：由于开发人员不予提供线上账号，因此自测也需要一名测试人员做线上回归测试
21 | 兼容范围：pc端需明确要兼容哪些浏览器，移动端需明确android与ios兼容版本以及哪些移动端浏览器
22 | ## 开发
23 | ### 评审
24 | #### 原型图评审
25 | 向产品明确原型图在应用中所处位置以及入口的显示条件，确认原型图的正确性
26 | #### 设计稿评审
27 | 观察线上应用设计风格与当前设计稿风格是否一致(色调，字号，行高，对齐方式)是否一致
28 | 观察设计稿中哪些部分需要切图
29 | 判断设计稿中组件是否开发过，避免重复造轮子
30 | #### 技术实现评审
31 | 如存在不易实现的功能，第一时间与产品沟通其他降级的实现方案
32 | #### 排期
33 | 找到相关开发(前端，后端，app)商讨需求实现技术细节，明确产出接口格式时间与接口联调时间
34 | #### 代码管理
35 | 为防止合并代码时过多的代码冲突问题，建议使用分支时遵循以下标准
36 | 每次push前先拉取线上分支代码
37 | 开发新功能或者修复bug时一定要基于线上代码分支创建新分支，每个分支只对应一个jira号或一个待修复的bug问题
38 | 分支名以f_(提交人)_(jira号)方式命名，对jira进行bug修复时使用f_(提交人)_fix_(bug内容)_(jira号)
39 | commit格式规则：每行message描述一个功能点，message格式为$(操作)：$(描述)，操作一般为add,del,upd分别代表新增、删除、更新三种操作
40 | ### 开发与调试
41 | 一般开发时不会从造轮子开始，项目中一般会有组件库供开发人员使用，但也会有一些老旧的项目中组件库版本较低，无法满足需求，
42 | 因此在开发前一定要对项目现有组件进行评估，确认是否需要重新开发组件，确保进度如期进行。
43 |
44 | #### pc端
45 | 推荐优雅降级方式开发，先chrome，firefox，然后再针对兼容性较差的如ie等进行兼容处理
46 |
47 | #### 移动端
48 | 移动端页面兼容性相较于pc端较好，但需真机调试，为方便调试移动页面，这里推荐使用spy-debugger来让pc端做代理，具体使用
49 | 请查阅github文档。
50 |
51 | ## 联调
52 | 和后端对接真实接口
53 |
54 | ## 自测
55 | 自测环节与环境数据关联很大，需要前后端共同完成，如果自测所需数据涉及范围较广，则需要找齐相关人员协助上线
56 |
57 | ## 提测
58 | 自测完成后开始进行真实环境测试
59 |
60 | ## bug反馈
61 |
62 |
63 | ## 部署上线
64 |
65 |
66 |
67 | ## 开发规范
68 | * 命名规范（文件命名，变量，函数，class， id） 驼峰， - _ 约定法
69 | * 目录规范（目录如何建立） 划分目录结构 约定法
70 | * 版本规范（） 挑选稳定版本 记录版本号 如果版本升级，需要总结版本差异
71 | * 编码规范（注释，.... 语法） eslint语法 JSDoc注释
72 | * 适配规则（pc，移动） 分辨率调整
73 | * 接口规范（成功，失败，状态码，安全） 和后端约定
74 |
75 | ## 项目搭建
76 | * vue-cli脚手架搭建 -- 自定义项目用到的需求
77 | * 选择ui框架
78 | * 抽离公共逻辑，划分功能组件
79 | * 目录构建
80 | * 路由规划
81 | * ajax请求配置
82 | * mock生成
83 | * 架构文档
84 | * 方案整理（用到哪些技术，用到哪些特性）
85 |
86 | ## 代码管理
87 | * git & svn
88 | * 分支管理
89 | * 任务划分
90 | * 功能排期
91 |
92 | # 目的
93 | 整理和规划，提升开发效率
--------------------------------------------------------------------------------
/lib/prepare/index.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const fs = require('fs-extra')
3 | const resolveOptions = require('./resolveOptions')
4 | const { genRoutesFile, genComponentRegistrationFile } = require('./codegen')
5 | const { writeTemp, writeEnhanceTemp } = require('./util')
6 | const logger = require('../util/logger')
7 | const chalk = require('chalk')
8 |
9 | module.exports = async function prepare (sourceDir) {
10 | // 1. load options
11 | const options = await resolveOptions(sourceDir)
12 |
13 | // 2. generate routes & user components registration code
14 | const routesCode = await genRoutesFile(options)
15 | const componentCode = await genComponentRegistrationFile(options)
16 |
17 | await writeTemp('routes.js', [
18 | componentCode,
19 | routesCode
20 | ].join('\n'))
21 |
22 | // 3. generate siteData
23 | const dataCode = `export const siteData = ${JSON.stringify(options.siteData, null, 2)}`
24 | await writeTemp('siteData.js', dataCode)
25 |
26 | // 4. handle user override
27 | const overridePath = path.resolve(sourceDir, '.vuepress/override.styl').replace(/[\\]+/g, '/')
28 | const hasUserOverride = fs.existsSync(overridePath)
29 | await writeTemp('override.styl', hasUserOverride ? `@import(${JSON.stringify(overridePath)})` : ``)
30 |
31 | const stylePath = path.resolve(sourceDir, '.vuepress/style.styl').replace(/[\\]+/g, '/')
32 | const hasUserStyle = fs.existsSync(stylePath)
33 | await writeTemp('style.styl', hasUserStyle ? `@import(${JSON.stringify(stylePath)})` : ``)
34 |
35 | // Temporary tip, will be removed at next release.
36 | if (hasUserOverride && !hasUserStyle) {
37 | logger.tip(
38 | `${chalk.magenta('override.styl')} has been split into 2 APIs, we recommend you upgrade to continue.\n` +
39 | ` See: ${chalk.magenta('https://vuepress.vuejs.org/default-theme-config/#simple-css-override')}`
40 | )
41 | }
42 |
43 | // 5. handle enhanceApp.js
44 | const enhanceAppPath = path.resolve(sourceDir, '.vuepress/enhanceApp.js')
45 | await writeEnhanceTemp('enhanceApp.js', enhanceAppPath)
46 |
47 | // 6. handle the theme enhanceApp.js
48 | await writeEnhanceTemp('themeEnhanceApp.js', options.themeEnhanceAppPath)
49 |
50 | return options
51 | }
52 |
--------------------------------------------------------------------------------
/docs/assets/js/46.b2597f58.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[46],{168:function(e,t,l){"use strict";l.r(t);var s=l(0),r=Object(s.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",{staticClass:"content"},[l("h1",{attrs:{id:"小程序组件化"}},[l("a",{staticClass:"header-anchor",attrs:{href:"#小程序组件化","aria-hidden":"true"}},[e._v("#")]),e._v(" 小程序组件化")]),e._v(" "),l("h5",{attrs:{id:"wxml节点信息api"}},[l("a",{staticClass:"header-anchor",attrs:{href:"#wxml节点信息api","aria-hidden":"true"}},[e._v("#")]),e._v(" wxml节点信息API")]),e._v(" "),l("ul",[l("li",[e._v("在小程序中使用"),l("strong",[e._v("wx.createSelectorQuery()"),l("strong",[e._v("获取到")]),e._v("SelectorQuery")]),e._v("对象，这个对象提供了对应的节点操作方法\n"),l("ul",[l("li",[l("strong",[e._v("in(this)")]),e._v(" 将节点选区范围指向当前组件，默认只会查找当期页面")]),e._v(" "),l("li",[l("strong",[e._v("select()")]),e._v(" 根据css选择器查询到匹配结果的第一个元素节点，返回的 NodesRef对象实例")]),e._v(" "),l("li",[l("strong",[e._v("selectAll()")]),e._v(" 和select一样只不过他可以匹配多个")]),e._v(" "),l("li",[l("strong",[e._v("selectViewport()")]),e._v(" 选择显示区域(页面)，可用于获取显示区域的尺寸、滚动位置等信息，返回一个NodesRef对象实例。")]),e._v(" "),l("li",[l("strong",[e._v("exec()")]),e._v(" 执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回。")])])])]),e._v(" "),l("h5",{attrs:{id:"nodesref对象"}},[l("a",{staticClass:"header-anchor",attrs:{href:"#nodesref对象","aria-hidden":"true"}},[e._v("#")]),e._v(" NodesRef对象")]),e._v(" "),l("p",[e._v("1、 "),l("strong",[e._v("boundingClientRect([callback])")])]),e._v(" "),l("blockquote",[l("p",[e._v("获取节点信息， 返回值相对于显示区域，以像素为单位。\n返回节点的信息有"),l("strong",[e._v("left、right、top、bottom、width、height")]),e._v(" 如果提供了callback回调函数，在执行selectQuery的exec方法后，节点信息会在callback中返回")])]),e._v(" "),l("p",[e._v("2、"),l("strong",[e._v("scrollOffset([callback])")])]),e._v(" "),l("blockquote",[l("p",[e._v("获取滚动位置信息，只针对与scroll-view组件以及viewport页面起作用，返回值是"),l("strong",[e._v("scrollLeft、scrollTop")]),e._v("，如果提供了callback回调函数，在执行selectQuery的exec方法后，节点信息会在callback中返回")])]),e._v(" "),l("p",[e._v("3、"),l("strong",[e._v("fields(Object, [callback])")])]),e._v(" "),l("blockquote",[l("p",[e._v("指定获取那些信息 （id, dataset, rect, size, scrollOffset , properties=[获取的常规属性名称（注:id class style 除外）], computedStyle=[获取的样式名称]）")])])])}],!1,null,null,null);t.default=r.exports}}]);
--------------------------------------------------------------------------------
/src/zh/vue/Vue组件.md:
--------------------------------------------------------------------------------
1 | # Vue组件
2 | #### 1、组件是什么？
3 | 1. 是vue.js最强大的功能之一
4 | 2. 可以扩展html元素，封装可重用的代码
5 | #### 2、注册全局组件
6 |
7 | ```
8 | Vue.component('组件名称',引入的.vue文件)
9 |
10 | main.js
11 | import heads from 'src/heads';
12 | Vue.component('heads',heads)
13 | // 然后在页面直接引用heads标签就可以了
14 |
15 | ```
16 | #### 3、prop
17 | - 是父组件用来传递数据的一个自定义属性
18 | - 父组件的数据需要通过props把数据传给子组件，子组件需要显示地用props选项声明'prop''
19 |
20 | ```
21 | 参数:
22 | props:{
23 | Child:{
24 | type:Number,
25 | required:true // 默认值是false
26 | default:{
27 | return{
28 | msg:'hello!'
29 | }
30 | }
31 | }
32 | }
33 | ```
34 | #### 4、自定义事件
35 | - $on(even) 监听事件
36 | - $emit(even) 触发事件
37 | #### 5、组件通讯
38 |
39 | ```
40 | 1、同级目录
41 | 全局: window.Eventhub = new Vue();
42 | 发送:methods:{
43 | send(){
44 | EventHub.$emit('HowAre',this.val)
45 | }
46 | }
47 | 接收:mounted(){
48 | EventHub.$on('HowAre',res=>{
49 | this.val = res
50 | })
51 | }
52 | 2、父级向子级通讯(利用props)
53 | 父级：
54 | data(){
55 | return{
56 | tit:'加油加油 ！'
57 | }
58 | }
59 | 子级：
60 | props:['tit'] 接收
61 | (markdown token: '`') tag.
12 |
13 | const { compose } = require('./shared')
14 |
15 | const parseEmojis = str => {
16 | const emojiData = require('markdown-it-emoji/lib/data/full.json')
17 | return String(str).replace(/:(.+?):/g, (placeholder, key) => emojiData[key] || placeholder)
18 | }
19 |
20 | const unescapeHtml = html => String(html)
21 | .replace(/"/g, '"')
22 | .replace(/'/g, '\'')
23 | .replace(/:/g, ':')
24 | .replace(/</g, '<')
25 | .replace(/>/g, '>')
26 |
27 | const removeMarkdownTokens = str => String(str)
28 | .replace(/\[(.*)\]\(.*\)/, '$1') // []()
29 | .replace(/(`|\*{1,3}|_)(.*?[^\\])\1/g, '$2') // `{t}` | *{t}* | **{t}** | ***{t}*** | _{t}_
30 | .replace(/(\\)(\*|_|`)/g, '$2') // remove escape char '\'
31 |
32 | const trim = str => str.trim()
33 |
34 | // This method remove the raw HTML but reserve the HTML wrapped by ``.
35 | // e.g.
36 | // Input: " b", Output: "b"
37 | // Input: "`` b", Output: "`` b"
38 | exports.removeNonCodeWrappedHTML = (str) => {
39 | return String(str).replace(/(^|[^><`])<.*>([^><`]|$)/g, '$1$2')
40 | }
41 |
42 | // Unescape html, parse emojis and remove some md tokens.
43 | exports.parseHeaders = compose(
44 | unescapeHtml,
45 | parseEmojis,
46 | removeMarkdownTokens,
47 | trim
48 | )
49 |
50 | // Also clean the html that isn't wrapped by code.
51 | // Because we want to support using VUE components in headers.
52 | // e.g. https://vuepress.vuejs.org/guide/using-vue.html#badge
53 | exports.deeplyParseHeaders = compose(
54 | exports.removeNonCodeWrappedHTML,
55 | exports.parseHeaders,
56 | )
57 |
--------------------------------------------------------------------------------
/lib/webpack/createClientConfig.js:
--------------------------------------------------------------------------------
1 | module.exports = function createClientConfig (options, cliOptions) {
2 | const path = require('path')
3 | const WebpackBar = require('webpackbar')
4 | const createBaseConfig = require('./createBaseConfig')
5 |
6 | const config = createBaseConfig(options, cliOptions)
7 |
8 | config
9 | .entry('app')
10 | .add(path.resolve(__dirname, '../app/clientEntry.js'))
11 |
12 | config.node
13 | .merge({
14 | // prevent webpack from injecting useless setImmediate polyfill because Vue
15 | // source contains it (although only uses it if it's native).
16 | setImmediate: false,
17 | global: false,
18 | process: false,
19 | // prevent webpack from injecting mocks to Node native modules
20 | // that does not make sense for the client
21 | dgram: 'empty',
22 | fs: 'empty',
23 | net: 'empty',
24 | tls: 'empty',
25 | child_process: 'empty'
26 | })
27 |
28 | // generate client manifest only during build
29 | if (process.env.NODE_ENV === 'production') {
30 | // This is a temp build of vue-server-renderer/client-plugin.
31 | // TODO Switch back to original after problems are resolved.
32 | // Fixes two things:
33 | // 1. Include CSS in preload files
34 | // 2. filter out useless styles.xxxxx.js chunk from mini-css-extract-plugin
35 | // https://github.com/webpack-contrib/mini-css-extract-plugin/issues/85
36 | config
37 | .plugin('ssr-client')
38 | .use(require('./ClientPlugin'), [{
39 | filename: 'manifest/client.json'
40 | }])
41 |
42 | config
43 | .plugin('optimize-css')
44 | .use(require('optimize-css-assets-webpack-plugin'), [{
45 | canPrint: false,
46 | cssProcessorOptions: {
47 | safe: true,
48 | autoprefixer: { disable: true },
49 | mergeLonghand: false
50 | }
51 | }])
52 | }
53 |
54 | if (!cliOptions.debug) {
55 | config
56 | .plugin('bar')
57 | .use(WebpackBar, [{
58 | name: 'Client',
59 | color: '#41b883',
60 | compiledIn: false
61 | }])
62 | }
63 |
64 | if (options.siteConfig.chainWebpack) {
65 | options.siteConfig.chainWebpack(config, false /* isServer */)
66 | }
67 |
68 | return config
69 | }
70 |
--------------------------------------------------------------------------------
/lib/util/index.js:
--------------------------------------------------------------------------------
1 | const { deeplyParseHeaders } = require('./parseHeaders')
2 |
3 | exports.normalizeHeadTag = function (tag) {
4 | if (typeof tag === 'string') {
5 | tag = [tag]
6 | }
7 | const tagName = tag[0]
8 | return {
9 | tagName,
10 | attributes: tag[1] || {},
11 | innerHTML: tag[2] || '',
12 | closeTag: !(tagName === 'meta' || tagName === 'link')
13 | }
14 | }
15 |
16 | exports.applyUserWebpackConfig = function (userConfig, config, isServer) {
17 | const merge = require('webpack-merge')
18 | if (typeof userConfig === 'object') {
19 | return merge(config, userConfig)
20 | }
21 | if (typeof userConfig === 'function') {
22 | const res = userConfig(config, isServer)
23 | if (res && typeof res === 'object') {
24 | return merge(config, res)
25 | }
26 | }
27 | return config
28 | }
29 |
30 | exports.inferTitle = function (frontmatter) {
31 | if (frontmatter.data.home) {
32 | return 'Home'
33 | }
34 | if (frontmatter.data.title) {
35 | return deeplyParseHeaders(frontmatter.data.title)
36 | }
37 | const match = frontmatter.content.trim().match(/^#+\s+(.*)/)
38 | if (match) {
39 | return deeplyParseHeaders(match[1])
40 | }
41 | }
42 |
43 | exports.parseFrontmatter = function (content) {
44 | const matter = require('gray-matter')
45 | const toml = require('toml')
46 |
47 | return matter(content, {
48 | excerpt_separator: '',
49 | engines: {
50 | toml: toml.parse.bind(toml),
51 | excerpt: false
52 | }
53 | })
54 | }
55 |
56 | const LRU = require('lru-cache')
57 | const cache = LRU({ max: 1000 })
58 |
59 | exports.extractHeaders = function (content, include = [], md) {
60 | const key = content + include.join(',')
61 | const hit = cache.get(key)
62 | if (hit) {
63 | return hit
64 | }
65 |
66 | const tokens = md.parse(content, {})
67 |
68 | const res = []
69 | tokens.forEach((t, i) => {
70 | if (t.type === 'heading_open' && include.includes(t.tag)) {
71 | const title = tokens[i + 1].content
72 | const slug = t.attrs.find(([name]) => name === 'id')[1]
73 | res.push({
74 | level: parseInt(t.tag.slice(1), 10),
75 | title: deeplyParseHeaders(title),
76 | slug: slug || md.slugify(title)
77 | })
78 | }
79 | })
80 |
81 | cache.set(key, res)
82 | return res
83 | }
84 |
--------------------------------------------------------------------------------
/lib/prepare/codegen.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const { fileToComponentName, resolveComponents } = require('./util')
3 |
4 | exports.genRoutesFile = async function ({
5 | siteData: { pages },
6 | sourceDir,
7 | pageFiles
8 | }) {
9 | function genRoute ({ path: pagePath, key: componentName }, index) {
10 | const file = pageFiles[index]
11 | const filePath = path.resolve(sourceDir, file)
12 | let code = `
13 | {
14 | name: ${JSON.stringify(componentName)},
15 | path: ${JSON.stringify(pagePath)},
16 | component: ThemeLayout,
17 | beforeEnter: (to, from, next) => {
18 | import(${JSON.stringify(filePath)}).then(comp => {
19 | Vue.component(${JSON.stringify(componentName)}, comp.default)
20 | next()
21 | })
22 | }
23 | }`
24 |
25 | const dncodedPath = decodeURIComponent(pagePath)
26 | if (dncodedPath !== pagePath) {
27 | code += `,
28 | {
29 | path: ${JSON.stringify(dncodedPath)},
30 | redirect: ${JSON.stringify(pagePath)}
31 | }`
32 | }
33 |
34 | if (/\/$/.test(pagePath)) {
35 | code += `,
36 | {
37 | path: ${JSON.stringify(pagePath + 'index.html')},
38 | redirect: ${JSON.stringify(pagePath)}
39 | }`
40 | }
41 |
42 | return code
43 | }
44 |
45 | const notFoundRoute = `,
46 | {
47 | path: '*',
48 | component: ThemeNotFound
49 | }`
50 |
51 | return (
52 | `import ThemeLayout from '@themeLayout'\n` +
53 | `import ThemeNotFound from '@themeNotFound'\n` +
54 | `import { injectMixins } from '@app/util'\n` +
55 | `import rootMixins from '@app/root-mixins'\n\n` +
56 | `injectMixins(ThemeLayout, rootMixins)\n` +
57 | `injectMixins(ThemeNotFound, rootMixins)\n\n` +
58 | `export const routes = [${pages.map(genRoute).join(',')}${notFoundRoute}\n]`
59 | )
60 | }
61 |
62 | exports.genComponentRegistrationFile = async function ({ sourceDir }) {
63 | function genImport (file) {
64 | const name = fileToComponentName(file)
65 | const baseDir = path.resolve(sourceDir, '.vuepress/components')
66 | const absolutePath = path.resolve(baseDir, file)
67 | const code = `Vue.component(${JSON.stringify(name)}, () => import(${JSON.stringify(absolutePath)}))`
68 | return code
69 | }
70 |
71 | const components = (await resolveComponents(sourceDir)) || []
72 | return `import Vue from 'vue'\n` + components.map(genImport).join('\n')
73 | }
74 |
75 |
--------------------------------------------------------------------------------
/docs/assets/js/43.8b6224f6.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[43],{171:function(t,a,e){"use strict";e.r(a);var r=e(0),s=Object(r.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:"content"},[e("h1",{attrs:{id:"组件通信"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#组件通信","aria-hidden":"true"}},[t._v("#")]),t._v(" 组件通信")]),t._v(" "),e("h5",{attrs:{id:"emit"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#emit","aria-hidden":"true"}},[t._v("#")]),t._v(" $emit")]),t._v(" "),e("blockquote",[e("p",[t._v("子向父通信")])]),t._v(" "),e("h5",{attrs:{id:"broadcast"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#broadcast","aria-hidden":"true"}},[t._v("#")]),t._v(" $broadcast")]),t._v(" "),e("blockquote",[e("p",[t._v("父向子通信")])]),t._v(" "),e("h5",{attrs:{id:"父子通信：父组件传递数据给子组件"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#父子通信：父组件传递数据给子组件","aria-hidden":"true"}},[t._v("#")]),t._v(" 父子通信：父组件传递数据给子组件")]),t._v(" "),e("p",[e("strong",[t._v("1、通过props传值")])]),t._v(" "),e("ol",[e("li",[t._v("如果需要传递动态属性值需要添加.sync修饰符")]),t._v(" "),e("li",[t._v("如果要在子组件中修改父组件数据需要在接受的时候添加 twoWay: true")]),t._v(" "),e("li",[t._v("如果需要数据双向绑定需要（.sync 和 twoWay 同时）")])]),t._v(" "),e("p",[e("strong",[t._v("2、实用$broadcast将数据广播到所有子组件中")])]),t._v(" "),e("h5",{attrs:{id:"子父通信：子组件传递数据给父组件"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#子父通信：子组件传递数据给父组件","aria-hidden":"true"}},[t._v("#")]),t._v(" 子父通信：子组件传递数据给父组件")]),t._v(" "),e("ol",[e("li",[t._v("在父组件中events中定义事件，在子组件$emit触发 （推荐）")]),t._v(" "),e("li",[t._v("在父组件methods中添加方法，在子组件中this.$invoke('../', '函数名称')")]),t._v(" "),e("li",[t._v("在子组件中通过this.$parent获取到父组件实例，调用父组件回调函数给父组件发送数据")])]),t._v(" "),e("h5",{attrs:{id:"同级：a、b两个同级组件的数据发送"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#同级：a、b两个同级组件的数据发送","aria-hidden":"true"}},[t._v("#")]),t._v(" 同级：A、B两个同级组件的数据发送")]),t._v(" "),e("ol",[e("li",[t._v("在A组件中通过this.$invoke('../B', '函数名称') 调用B组件中的回调函数传递数据")]),t._v(" "),e("li",[t._v("将数据发送到父组件，父组件在传递给另一个子组件（代理方式）")]),t._v(" "),e("li",[t._v("自己封装一个发布订阅器（eventbus）")])]),t._v(" "),e("h5",{attrs:{id:"跨级："}},[e("a",{staticClass:"header-anchor",attrs:{href:"#跨级：","aria-hidden":"true"}},[t._v("#")]),t._v(" 跨级：")]),t._v(" "),e("ol",[e("li",[t._v("逐层传递")]),t._v(" "),e("li",[t._v("this.$invoke('组件路径', '函数名称')")])]),t._v(" "),e("p",[e("strong",[t._v("使用redux可以做所有的数据管理")])])])}],!1,null,null,null);a.default=s.exports}}]);
--------------------------------------------------------------------------------
/src/guide/README.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 |
3 | \n var msg = "hello world";\n\n module.exports.message = msg;\n \n\n {{m1.message}} \n\n\n页面输出\nhello world\n')])])]),t("h5",{attrs:{id:"数据处理"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#数据处理","aria-hidden":"true"}},[a._v("#")]),a._v(" 数据处理")]),a._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[a._v("// page.js\nPage({\n data: {\n array: [1, 2, 3, 4, 5, 1, 2, 3, 4]\n }\n})\n")])])]),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[a._v('\x3c!--wxml--\x3e\n\x3c!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 --\x3e\n\nvar getMax = function(array) {\n var max = undefined;\n for (var i = 0; i < array.length; ++i) {\n max = max === undefined ? \n array[i] : \n (max >= array[i] ? max : array[i]);\n }\n return max;\n}\n\nmodule.exports.getMax = getMax;\n \n\n\x3c!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array --\x3e\n {{m1.getMax(array)}} \n')])])]),t("p",[a._v("页面输出")]),a._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[a._v("5\n")])])])])}],!1,null,null,null);e.default=r.exports}}]);
--------------------------------------------------------------------------------