3 |
13 |
14 |
24 |
35 |
--------------------------------------------------------------------------------
/chapter3/vue-router/hash/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import routes from './routes';
5 |
6 | Vue.config.productionTip = false;
7 |
8 | /* eslint-disable no-new */
9 | const app = new Vue({
10 | el: '#app',
11 | data() {
12 | return {
13 | currentRoute: '',
14 | };
15 | },
16 | computed: {
17 | ViewComponent() {
18 | const currentView = routes[this.currentRoute];
19 | /* eslint-disable */
20 | return (
21 | currentView
22 | ? require('./pages/' + currentView + '.vue')
23 | : require('./pages/404.vue')
24 | );
25 | },
26 | },
27 | render(h) {
28 | // 因为组件是以 es module 的方式引入的，
29 | // 此处必须使用 this.ViewComponent.default 属性作为参数
30 | return h(this.ViewComponent.default);
31 | },
32 | created () {
33 | window.location.hash = window.location.hash ? window.location.hash : '#/';
34 | this.currentRoute = window.location.hash;
35 | }
36 | });
37 |
38 | // 这里为了监听浏览器 前进/后退 按钮，来切换路由
39 | window.addEventListener('hashchange', () => {
40 | app.currentRoute = window.location.hash;
41 | });
42 |
--------------------------------------------------------------------------------
/chapter3/vue-router/hash/src/pages/404.vue:
--------------------------------------------------------------------------------
1 |
2 | -
4 |
-
5 |
Home 6 |
7 | -
8 |
HelloWord 9 |
10 |
Page Not Found!
3 | 4 | 9 | -------------------------------------------------------------------------------- /chapter3/vue-router/hash/src/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 2 |Home Page
4 |
3 |
13 |
14 |
24 |
35 |
--------------------------------------------------------------------------------
/chapter3/vue-router/history/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import routes from './routes';
5 |
6 | Vue.config.productionTip = false;
7 |
8 | /* eslint-disable no-new */
9 | const app = new Vue({
10 | el: '#app',
11 | data() {
12 | return {
13 | currentRoute: window.location.pathname,
14 | };
15 | },
16 | computed: {
17 | ViewComponent() {
18 | const currentView = routes[this.currentRoute];
19 | /* eslint-disable */
20 | return (
21 | currentView
22 | ? require('./pages/' + currentView + '.vue')
23 | : require('./pages/404.vue')
24 | );
25 | },
26 | },
27 | render(h) {
28 | // 因为组件是以 es module 的方式引入的，
29 | // 此处必须使用 this.ViewComponent.default 属性作为参数
30 | return h(this.ViewComponent.default);
31 | },
32 | });
33 |
34 | // 这里为了监听浏览器 前进/后退 按钮，来切换路由
35 | window.addEventListener('popstate', () => {
36 | app.currentRoute = window.location.pathname;
37 | });
38 |
--------------------------------------------------------------------------------
/chapter3/vue-router/history/src/pages/404.vue:
--------------------------------------------------------------------------------
1 |
2 | -
4 |
-
5 |
Home 6 |
7 | -
8 |
HelloWord 9 |
10 |
Page Not Found!
3 | 4 | 9 | -------------------------------------------------------------------------------- /chapter3/vue-router/history/src/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 2 |Home Page
4 |Page Not Found!
3 | 4 | 9 | -------------------------------------------------------------------------------- /chapter3/vue-router/simple/src/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 2 |Home Page
4 |
3 |
6 |
7 |
19 |
--------------------------------------------------------------------------------
/chapter3/vue-state/1/src/components/comp1.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
19 |
20 |
--------------------------------------------------------------------------------
/chapter3/vue-state/1/src/components/comp2.vue:
--------------------------------------------------------------------------------
1 |
2 | Component 1
4 | 5 |
3 |
6 |
7 |
19 |
20 |
--------------------------------------------------------------------------------
/chapter3/vue-state/1/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import App from './App';
5 |
6 | Vue.config.productionTip = false;
7 |
8 | /* eslint-disable no-new */
9 | new Vue({
10 | el: '#app',
11 | template: 'Component 2
4 | 5 |
3 |
6 |
7 |
19 |
--------------------------------------------------------------------------------
/chapter3/vue-state/2/src/components/comp1.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
18 |
19 |
--------------------------------------------------------------------------------
/chapter3/vue-state/2/src/components/comp2.vue:
--------------------------------------------------------------------------------
1 |
2 | Component 1
4 | 5 |
3 |
6 |
7 |
18 |
19 |
--------------------------------------------------------------------------------
/chapter3/vue-state/2/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import App from './App';
5 |
6 | Vue.config.productionTip = false;
7 |
8 | /* eslint-disable no-new */
9 | new Vue({
10 | el: '#app',
11 | template: 'Component 2
4 | 5 |
3 |
6 |
7 |
19 |
--------------------------------------------------------------------------------
/chapter3/vue-state/3/src/components/comp1.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 | Change by event: 6 |
7 |
8 |
29 |
30 |
--------------------------------------------------------------------------------
/chapter3/vue-state/3/src/components/comp2.vue:
--------------------------------------------------------------------------------
1 |
2 | Component 1
4 | Change by object reference:5 | Change by event: 6 |
3 |
5 | Change by event: 6 |
7 |
8 |
30 |
31 |
--------------------------------------------------------------------------------
/chapter3/vue-state/3/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import App from './App';
5 | import EventBus from './state';
6 |
7 | Vue.prototype.$bus = EventBus;
8 | Vue.config.productionTip = false;
9 |
10 | /* eslint-disable no-new */
11 | new Vue({
12 | el: '#app',
13 | template: 'Component 2
4 | Change by object reference:5 | Change by event: 6 |
3 |
5 |
6 |
11 |
--------------------------------------------------------------------------------
/chapter4/1/src/components/comp1.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
44 |
45 |
--------------------------------------------------------------------------------
/chapter4/1/src/components/comp2.vue:
--------------------------------------------------------------------------------
1 |
2 | Component 1
4 | 5 | 6 |
3 |
6 |
7 |
26 |
27 |
--------------------------------------------------------------------------------
/chapter4/1/src/components/comp3.vue:
--------------------------------------------------------------------------------
1 |
2 | Component 2
4 | 5 |
3 |
10 |
11 |
12 |
17 |
18 |
--------------------------------------------------------------------------------
/chapter4/1/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import App from './App';
5 | import router from './router';
6 | import store from './store';
7 |
8 | Vue.config.productionTip = false;
9 |
10 | /* eslint-disable no-new */
11 | new Vue({
12 | router,
13 | store,
14 | el: '#app',
15 | template: '
3 | 挑战到第二页
4 |返回
5 |
17 |
18 |
57 |
--------------------------------------------------------------------------------
/chapter4/1/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/chapter4/1/static/.gitkeep
--------------------------------------------------------------------------------
/chapter4/2/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "modules": false,
5 | "targets": {
6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7 | }
8 | }],
9 | "stage-2"
10 | ],
11 | "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 |
--------------------------------------------------------------------------------
/chapter4/2/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/chapter4/2/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 |
--------------------------------------------------------------------------------
/chapter4/2/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // https://eslint.org/docs/user-guide/configuring
2 |
3 | module.exports = {
4 | root: true,
5 | parserOptions: {
6 | parser: 'babel-eslint'
7 | },
8 | env: {
9 | browser: true,
10 | },
11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 | extends: ['plugin:vue/essential', 'airbnb-base'],
14 | // required to lint *.vue files
15 | plugins: [
16 | 'vue'
17 | ],
18 | // check if imports actually resolve
19 | settings: {
20 | 'import/resolver': {
21 | webpack: {
22 | config: 'build/webpack.base.conf.js'
23 | }
24 | }
25 | },
26 | // add your custom rules here
27 | rules: {
28 | // don't require .vue extension when importing
29 | 'import/extensions': ['error', 'always', {
30 | js: 'never',
31 | vue: 'never'
32 | }],
33 | // disallow reassignment of function parameters
34 | // disallow parameter object manipulation except for specific exclusions
35 | 'no-param-reassign': ['error', {
36 | props: true,
37 | ignorePropertyModificationsFor: [
38 | 'state', // for vuex state
39 | 'acc', // for reduce accumulators
40 | 'e' // for e.returnvalue
41 | ]
42 | }],
43 | // allow optionalDependencies
44 | 'import/no-extraneous-dependencies': ['error', {
45 | optionalDependencies: ['test/unit/index.js']
46 | }],
47 | // allow debugger during development
48 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
49 | 'no-console': 'off'
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/chapter4/2/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | /dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Editor directories and files
9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 |
--------------------------------------------------------------------------------
/chapter4/2/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 |
3 | module.exports = {
4 | "plugins": {
5 | "postcss-import": {},
6 | "postcss-url": {},
7 | // to edit target browsers: use "browserslist" field in package.json
8 | "autoprefixer": {}
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/chapter4/2/README.md:
--------------------------------------------------------------------------------
1 | # vue-router-demo
2 |
3 | > Vue.js Router Demo Project
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # install dependencies
9 | npm install
10 |
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 |
14 | # build for production with minification
15 | npm run build
16 |
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 |
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 |
--------------------------------------------------------------------------------
/chapter4/2/build/build.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | require('./check-versions')()
3 |
4 | process.env.NODE_ENV = 'production'
5 |
6 | const ora = require('ora')
7 | const rm = require('rimraf')
8 | const path = require('path')
9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 |
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 |
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 | if (err) throw err
19 | webpack(webpackConfig, (err, stats) => {
20 | spinner.stop()
21 | if (err) throw err
22 | process.stdout.write(stats.toString({
23 | colors: true,
24 | modules: false,
25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 | chunks: false,
27 | chunkModules: false
28 | }) + '\n\n')
29 |
30 | if (stats.hasErrors()) {
31 | console.log(chalk.red(' Build failed with errors.\n'))
32 | process.exit(1)
33 | }
34 |
35 | console.log(chalk.cyan(' Build complete.\n'))
36 | console.log(chalk.yellow(
37 | ' Tip: built files are meant to be served over an HTTP server.\n' +
38 | ' Opening index.html over file:// won\'t work.\n'
39 | ))
40 | })
41 | })
42 |
--------------------------------------------------------------------------------
/chapter4/2/build/check-versions.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const chalk = require('chalk')
3 | const semver = require('semver')
4 | const packageConfig = require('../package.json')
5 | const shell = require('shelljs')
6 |
7 | function exec (cmd) {
8 | return require('child_process').execSync(cmd).toString().trim()
9 | }
10 |
11 | const versionRequirements = [
12 | {
13 | name: 'node',
14 | currentVersion: semver.clean(process.version),
15 | versionRequirement: packageConfig.engines.node
16 | }
17 | ]
18 |
19 | if (shell.which('npm')) {
20 | versionRequirements.push({
21 | name: 'npm',
22 | currentVersion: exec('npm --version'),
23 | versionRequirement: packageConfig.engines.npm
24 | })
25 | }
26 |
27 | module.exports = function () {
28 | const warnings = []
29 |
30 | for (let i = 0; i < versionRequirements.length; i++) {
31 | const mod = versionRequirements[i]
32 |
33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 | warnings.push(mod.name + ': ' +
35 | chalk.red(mod.currentVersion) + ' should be ' +
36 | chalk.green(mod.versionRequirement)
37 | )
38 | }
39 | }
40 |
41 | if (warnings.length) {
42 | console.log('')
43 | console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 | console.log()
45 |
46 | for (let i = 0; i < warnings.length; i++) {
47 | const warning = warnings[i]
48 | console.log(' ' + warning)
49 | }
50 |
51 | console.log()
52 | process.exit(1)
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/chapter4/2/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/chapter4/2/build/logo.png
--------------------------------------------------------------------------------
/chapter4/2/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const config = require('../config')
4 | const isProduction = process.env.NODE_ENV === 'production'
5 | const sourceMapEnabled = isProduction
6 | ? config.build.productionSourceMap
7 | : config.dev.cssSourceMap
8 |
9 | module.exports = {
10 | loaders: utils.cssLoaders({
11 | sourceMap: sourceMapEnabled,
12 | extract: isProduction
13 | }),
14 | cssSourceMap: sourceMapEnabled,
15 | cacheBusting: config.dev.cacheBusting,
16 | transformToRequire: {
17 | video: ['src', 'poster'],
18 | source: 'src',
19 | img: 'src',
20 | image: 'xlink:href'
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/chapter4/2/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const config = require('../config')
5 | const vueLoaderConfig = require('./vue-loader.conf')
6 |
7 | function resolve (dir) {
8 | return path.join(__dirname, '..', dir)
9 | }
10 |
11 | const createLintingRule = () => ({
12 | test: /\.(js|vue)$/,
13 | loader: 'eslint-loader',
14 | enforce: 'pre',
15 | include: [resolve('src'), resolve('test')],
16 | options: {
17 | formatter: require('eslint-friendly-formatter'),
18 | emitWarning: !config.dev.showEslintErrorsInOverlay
19 | }
20 | })
21 |
22 | module.exports = {
23 | context: path.resolve(__dirname, '../'),
24 | entry: {
25 | app: './src/main.js'
26 | },
27 | output: {
28 | path: config.build.assetsRoot,
29 | filename: '[name].js',
30 | publicPath: process.env.NODE_ENV === 'production'
31 | ? config.build.assetsPublicPath
32 | : config.dev.assetsPublicPath
33 | },
34 | resolve: {
35 | extensions: ['.js', '.vue', '.json'],
36 | alias: {
37 | 'vue$': 'vue/dist/vue.esm.js',
38 | '@': resolve('src'),
39 | }
40 | },
41 | module: {
42 | rules: [
43 | ...(config.dev.useEslint ? [createLintingRule()] : []),
44 | {
45 | test: /\.vue$/,
46 | loader: 'vue-loader',
47 | options: vueLoaderConfig
48 | },
49 | {
50 | test: /\.js$/,
51 | loader: 'babel-loader',
52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
53 | },
54 | {
55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
56 | loader: 'url-loader',
57 | options: {
58 | limit: 10000,
59 | name: utils.assetsPath('img/[name].[hash:7].[ext]')
60 | }
61 | },
62 | {
63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
64 | loader: 'url-loader',
65 | options: {
66 | limit: 10000,
67 | name: utils.assetsPath('media/[name].[hash:7].[ext]')
68 | }
69 | },
70 | {
71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
72 | loader: 'url-loader',
73 | options: {
74 | limit: 10000,
75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
76 | }
77 | }
78 | ]
79 | },
80 | node: {
81 | // prevent webpack from injecting useless setImmediate polyfill because Vue
82 | // source contains it (although only uses it if it's native).
83 | setImmediate: false,
84 | // prevent webpack from injecting mocks to Node native modules
85 | // that does not make sense for the client
86 | dgram: 'empty',
87 | fs: 'empty',
88 | net: 'empty',
89 | tls: 'empty',
90 | child_process: 'empty'
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/chapter4/2/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 |
5 | module.exports = merge(prodEnv, {
6 | NODE_ENV: '"development"'
7 | })
8 |
--------------------------------------------------------------------------------
/chapter4/2/config/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | // Template version: 1.3.1
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require('path')
6 |
7 | module.exports = {
8 | dev: {
9 |
10 | // Paths
11 | assetsSubDirectory: 'static',
12 | assetsPublicPath: '/',
13 | proxyTable: {},
14 |
15 | // Various Dev Server settings
16 | host: 'localhost', // can be overwritten by process.env.HOST
17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 | autoOpenBrowser: false,
19 | errorOverlay: true,
20 | notifyOnErrors: true,
21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 |
23 | // Use Eslint Loader?
24 | // If true, your code will be linted during bundling and
25 | // linting errors and warnings will be shown in the console.
26 | useEslint: true,
27 | // If true, eslint errors and warnings will also be shown in the error overlay
28 | // in the browser.
29 | showEslintErrorsInOverlay: false,
30 |
31 | /**
32 | * Source Maps
33 | */
34 |
35 | // https://webpack.js.org/configuration/devtool/#development
36 | devtool: 'cheap-module-eval-source-map',
37 |
38 | // If you have problems debugging vue-files in devtools,
39 | // set this to false - it *may* help
40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 | cacheBusting: true,
42 |
43 | cssSourceMap: true
44 | },
45 |
46 | build: {
47 | // Template for index.html
48 | index: path.resolve(__dirname, '../dist/index.html'),
49 |
50 | // Paths
51 | assetsRoot: path.resolve(__dirname, '../dist'),
52 | assetsSubDirectory: 'static',
53 | assetsPublicPath: '/',
54 |
55 | /**
56 | * Source Maps
57 | */
58 |
59 | productionSourceMap: true,
60 | // https://webpack.js.org/configuration/devtool/#production
61 | devtool: '#source-map',
62 |
63 | // Gzip off by default as many popular static hosts such as
64 | // Surge or Netlify already gzip all static assets for you.
65 | // Before setting to `true`, make sure to:
66 | // npm install --save-dev compression-webpack-plugin
67 | productionGzip: false,
68 | productionGzipExtensions: ['js', 'css'],
69 |
70 | // Run the build command with an extra argument to
71 | // View the bundle analyzer report after build finishes:
72 | // `npm run build --report`
73 | // Set to `true` or `false` to always turn it on or off
74 | bundleAnalyzerReport: process.env.npm_config_report
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/chapter4/2/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 | NODE_ENV: '"production"'
4 | }
5 |
--------------------------------------------------------------------------------
/chapter4/2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 4 |
{{ username }}
8 | 9 |
3 |
5 |
6 |
11 |
--------------------------------------------------------------------------------
/chapter4/2/src/components/comp1.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
47 |
48 |
--------------------------------------------------------------------------------
/chapter4/2/src/components/comp2.vue:
--------------------------------------------------------------------------------
1 |
2 | Component 1
4 | 5 | 6 |
3 |
6 |
7 |
29 |
30 |
--------------------------------------------------------------------------------
/chapter4/2/src/components/comp3.vue:
--------------------------------------------------------------------------------
1 |
2 | Component 2
4 | 5 |
3 |
10 |
11 |
12 |
17 |
18 |
--------------------------------------------------------------------------------
/chapter4/2/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import App from './App';
5 | import router from './router';
6 | import store from './store';
7 |
8 | Vue.config.productionTip = false;
9 |
10 | Vue.mixin({
11 | created() {
12 | console.log(`Component ${this.$options.name} created from 全局打点`);
13 | },
14 | mounted() {
15 | console.log(`Component ${this.$options.name} mounted from 全局打点`);
16 | },
17 | });
18 |
19 | /* eslint-disable no-new */
20 | new Vue({
21 | router,
22 | store,
23 | el: '#app',
24 | template: '
3 | 跳转到第二页
4 |返回
5 |
17 |
18 |
57 |
--------------------------------------------------------------------------------
/chapter4/2/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/chapter4/2/static/.gitkeep
--------------------------------------------------------------------------------
/chapter4/3/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "modules": false,
5 | "targets": {
6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7 | }
8 | }],
9 | "stage-2"
10 | ],
11 | "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 |
--------------------------------------------------------------------------------
/chapter4/3/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/chapter4/3/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 |
--------------------------------------------------------------------------------
/chapter4/3/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // https://eslint.org/docs/user-guide/configuring
2 |
3 | module.exports = {
4 | root: true,
5 | parserOptions: {
6 | parser: 'babel-eslint'
7 | },
8 | env: {
9 | browser: true,
10 | },
11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 | extends: ['plugin:vue/essential', 'airbnb-base'],
14 | // required to lint *.vue files
15 | plugins: [
16 | 'vue'
17 | ],
18 | // check if imports actually resolve
19 | settings: {
20 | 'import/resolver': {
21 | webpack: {
22 | config: 'build/webpack.base.conf.js'
23 | }
24 | }
25 | },
26 | // add your custom rules here
27 | rules: {
28 | // don't require .vue extension when importing
29 | 'import/extensions': ['error', 'always', {
30 | js: 'never',
31 | vue: 'never'
32 | }],
33 | // disallow reassignment of function parameters
34 | // disallow parameter object manipulation except for specific exclusions
35 | 'no-param-reassign': ['error', {
36 | props: true,
37 | ignorePropertyModificationsFor: [
38 | 'state', // for vuex state
39 | 'acc', // for reduce accumulators
40 | 'e' // for e.returnvalue
41 | ]
42 | }],
43 | // allow optionalDependencies
44 | 'import/no-extraneous-dependencies': ['error', {
45 | optionalDependencies: ['test/unit/index.js']
46 | }],
47 | // allow debugger during development
48 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/chapter4/3/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | /dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Editor directories and files
9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 |
--------------------------------------------------------------------------------
/chapter4/3/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 |
3 | module.exports = {
4 | "plugins": {
5 | "postcss-import": {},
6 | "postcss-url": {},
7 | // to edit target browsers: use "browserslist" field in package.json
8 | "autoprefixer": {}
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/chapter4/3/README.md:
--------------------------------------------------------------------------------
1 | # vue-router-demo
2 |
3 | > Vue.js Router Demo Project
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # install dependencies
9 | npm install
10 |
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 |
14 | # build for production with minification
15 | npm run build
16 |
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 |
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 |
--------------------------------------------------------------------------------
/chapter4/3/build/build.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | require('./check-versions')()
3 |
4 | process.env.NODE_ENV = 'production'
5 |
6 | const ora = require('ora')
7 | const rm = require('rimraf')
8 | const path = require('path')
9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 |
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 |
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 | if (err) throw err
19 | webpack(webpackConfig, (err, stats) => {
20 | spinner.stop()
21 | if (err) throw err
22 | process.stdout.write(stats.toString({
23 | colors: true,
24 | modules: false,
25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 | chunks: false,
27 | chunkModules: false
28 | }) + '\n\n')
29 |
30 | if (stats.hasErrors()) {
31 | console.log(chalk.red(' Build failed with errors.\n'))
32 | process.exit(1)
33 | }
34 |
35 | console.log(chalk.cyan(' Build complete.\n'))
36 | console.log(chalk.yellow(
37 | ' Tip: built files are meant to be served over an HTTP server.\n' +
38 | ' Opening index.html over file:// won\'t work.\n'
39 | ))
40 | })
41 | })
42 |
--------------------------------------------------------------------------------
/chapter4/3/build/check-versions.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const chalk = require('chalk')
3 | const semver = require('semver')
4 | const packageConfig = require('../package.json')
5 | const shell = require('shelljs')
6 |
7 | function exec (cmd) {
8 | return require('child_process').execSync(cmd).toString().trim()
9 | }
10 |
11 | const versionRequirements = [
12 | {
13 | name: 'node',
14 | currentVersion: semver.clean(process.version),
15 | versionRequirement: packageConfig.engines.node
16 | }
17 | ]
18 |
19 | if (shell.which('npm')) {
20 | versionRequirements.push({
21 | name: 'npm',
22 | currentVersion: exec('npm --version'),
23 | versionRequirement: packageConfig.engines.npm
24 | })
25 | }
26 |
27 | module.exports = function () {
28 | const warnings = []
29 |
30 | for (let i = 0; i < versionRequirements.length; i++) {
31 | const mod = versionRequirements[i]
32 |
33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 | warnings.push(mod.name + ': ' +
35 | chalk.red(mod.currentVersion) + ' should be ' +
36 | chalk.green(mod.versionRequirement)
37 | )
38 | }
39 | }
40 |
41 | if (warnings.length) {
42 | console.log('')
43 | console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 | console.log()
45 |
46 | for (let i = 0; i < warnings.length; i++) {
47 | const warning = warnings[i]
48 | console.log(' ' + warning)
49 | }
50 |
51 | console.log()
52 | process.exit(1)
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/chapter4/3/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/chapter4/3/build/logo.png
--------------------------------------------------------------------------------
/chapter4/3/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const config = require('../config')
4 | const isProduction = process.env.NODE_ENV === 'production'
5 | const sourceMapEnabled = isProduction
6 | ? config.build.productionSourceMap
7 | : config.dev.cssSourceMap
8 |
9 | module.exports = {
10 | loaders: utils.cssLoaders({
11 | sourceMap: sourceMapEnabled,
12 | extract: isProduction
13 | }),
14 | cssSourceMap: sourceMapEnabled,
15 | cacheBusting: config.dev.cacheBusting,
16 | transformToRequire: {
17 | video: ['src', 'poster'],
18 | source: 'src',
19 | img: 'src',
20 | image: 'xlink:href'
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/chapter4/3/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const config = require('../config')
5 | const vueLoaderConfig = require('./vue-loader.conf')
6 |
7 | function resolve (dir) {
8 | return path.join(__dirname, '..', dir)
9 | }
10 |
11 | const createLintingRule = () => ({
12 | test: /\.(js|vue)$/,
13 | loader: 'eslint-loader',
14 | enforce: 'pre',
15 | include: [resolve('src'), resolve('test')],
16 | options: {
17 | formatter: require('eslint-friendly-formatter'),
18 | emitWarning: !config.dev.showEslintErrorsInOverlay
19 | }
20 | })
21 |
22 | module.exports = {
23 | context: path.resolve(__dirname, '../'),
24 | entry: {
25 | app: './src/main.js'
26 | },
27 | output: {
28 | path: config.build.assetsRoot,
29 | filename: '[name].js',
30 | publicPath: process.env.NODE_ENV === 'production'
31 | ? config.build.assetsPublicPath
32 | : config.dev.assetsPublicPath
33 | },
34 | resolve: {
35 | extensions: ['.js', '.vue', '.json'],
36 | alias: {
37 | 'vue$': 'vue/dist/vue.esm.js',
38 | '@': resolve('src'),
39 | }
40 | },
41 | module: {
42 | rules: [
43 | ...(config.dev.useEslint ? [createLintingRule()] : []),
44 | {
45 | test: /\.vue$/,
46 | loader: 'vue-loader',
47 | options: vueLoaderConfig
48 | },
49 | {
50 | test: /\.js$/,
51 | loader: 'babel-loader',
52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
53 | },
54 | {
55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
56 | loader: 'url-loader',
57 | options: {
58 | limit: 10000,
59 | name: utils.assetsPath('img/[name].[hash:7].[ext]')
60 | }
61 | },
62 | {
63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
64 | loader: 'url-loader',
65 | options: {
66 | limit: 10000,
67 | name: utils.assetsPath('media/[name].[hash:7].[ext]')
68 | }
69 | },
70 | {
71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
72 | loader: 'url-loader',
73 | options: {
74 | limit: 10000,
75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
76 | }
77 | }
78 | ]
79 | },
80 | node: {
81 | // prevent webpack from injecting useless setImmediate polyfill because Vue
82 | // source contains it (although only uses it if it's native).
83 | setImmediate: false,
84 | // prevent webpack from injecting mocks to Node native modules
85 | // that does not make sense for the client
86 | dgram: 'empty',
87 | fs: 'empty',
88 | net: 'empty',
89 | tls: 'empty',
90 | child_process: 'empty'
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/chapter4/3/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 |
5 | module.exports = merge(prodEnv, {
6 | NODE_ENV: '"development"'
7 | })
8 |
--------------------------------------------------------------------------------
/chapter4/3/config/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | // Template version: 1.3.1
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require('path')
6 |
7 | module.exports = {
8 | dev: {
9 |
10 | // Paths
11 | assetsSubDirectory: 'static',
12 | assetsPublicPath: '/',
13 | proxyTable: {},
14 |
15 | // Various Dev Server settings
16 | host: 'localhost', // can be overwritten by process.env.HOST
17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 | autoOpenBrowser: false,
19 | errorOverlay: true,
20 | notifyOnErrors: true,
21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 |
23 | // Use Eslint Loader?
24 | // If true, your code will be linted during bundling and
25 | // linting errors and warnings will be shown in the console.
26 | useEslint: true,
27 | // If true, eslint errors and warnings will also be shown in the error overlay
28 | // in the browser.
29 | showEslintErrorsInOverlay: false,
30 |
31 | /**
32 | * Source Maps
33 | */
34 |
35 | // https://webpack.js.org/configuration/devtool/#development
36 | devtool: 'cheap-module-eval-source-map',
37 |
38 | // If you have problems debugging vue-files in devtools,
39 | // set this to false - it *may* help
40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 | cacheBusting: true,
42 |
43 | cssSourceMap: true
44 | },
45 |
46 | build: {
47 | // Template for index.html
48 | index: path.resolve(__dirname, '../dist/index.html'),
49 |
50 | // Paths
51 | assetsRoot: path.resolve(__dirname, '../dist'),
52 | assetsSubDirectory: 'static',
53 | assetsPublicPath: '/',
54 |
55 | /**
56 | * Source Maps
57 | */
58 |
59 | productionSourceMap: true,
60 | // https://webpack.js.org/configuration/devtool/#production
61 | devtool: '#source-map',
62 |
63 | // Gzip off by default as many popular static hosts such as
64 | // Surge or Netlify already gzip all static assets for you.
65 | // Before setting to `true`, make sure to:
66 | // npm install --save-dev compression-webpack-plugin
67 | productionGzip: false,
68 | productionGzipExtensions: ['js', 'css'],
69 |
70 | // Run the build command with an extra argument to
71 | // View the bundle analyzer report after build finishes:
72 | // `npm run build --report`
73 | // Set to `true` or `false` to always turn it on or off
74 | bundleAnalyzerReport: process.env.npm_config_report
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/chapter4/3/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 | NODE_ENV: '"production"'
4 | }
5 |
--------------------------------------------------------------------------------
/chapter4/3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 4 |
{{ username }}
8 | 9 |
3 |
14 |
15 |
32 |
--------------------------------------------------------------------------------
/chapter4/3/src/lang/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import VueI18n from 'vue-i18n';
3 |
4 | import indexMsg from './modules/index';
5 | import loginMsg from './modules/login';
6 | import orderMsg from './modules/order';
7 |
8 | Vue.use(VueI18n);
9 |
10 | const messages = {
11 | zh: {
12 | ...indexMsg.zh,
13 | ...loginMsg.zh,
14 | ...orderMsg.zh,
15 | },
16 | en: {
17 | ...indexMsg.en,
18 | ...loginMsg.en,
19 | ...orderMsg.en,
20 | },
21 | };
22 |
23 | const i18n = new VueI18n({
24 | locale: 'zh',
25 | messages,
26 | });
27 |
28 | export default i18n;
29 |
--------------------------------------------------------------------------------
/chapter4/3/src/lang/modules/index.js:
--------------------------------------------------------------------------------
1 | const zh = {
2 | index: {
3 | header: {
4 | title: 'Vue-I18n 示例',
5 | subtitle: '你将学会如何使用 vue-i18n',
6 | },
7 | },
8 | };
9 |
10 | const en = {
11 | index: {
12 | header: {
13 | title: 'Vue-I18n Demo',
14 | subtitle: 'You will learn how to use vue-i18n',
15 | },
16 | },
17 | };
18 |
19 | export default {
20 | zh,
21 | en,
22 | };
23 |
--------------------------------------------------------------------------------
/chapter4/3/src/lang/modules/login.js:
--------------------------------------------------------------------------------
1 | const zh = {
2 | login: {
3 | tips: '请{minute}分{second}秒后再重试 | 请{hour}小时后再重试',
4 | },
5 | };
6 |
7 | const en = {
8 | login: {
9 | tips: 'Please try after {minute} minutes {second} seconds | Please try after {hour} hours',
10 | },
11 | };
12 |
13 | export default {
14 | zh,
15 | en,
16 | };
17 |
--------------------------------------------------------------------------------
/chapter4/3/src/lang/modules/order.js:
--------------------------------------------------------------------------------
1 | const zh = {
2 | order: {
3 | status: [
4 | '待付款',
5 | '待发货',
6 | '已发货',
7 | '已签收',
8 | '已取消',
9 | ],
10 | },
11 | };
12 |
13 | const en = {
14 | order: {
15 | status: [
16 | 'Pending',
17 | 'To be delivered',
18 | 'Shipped',
19 | 'Received',
20 | 'Canceled',
21 | ],
22 | },
23 | };
24 |
25 | export default {
26 | zh,
27 | en,
28 | };
29 |
--------------------------------------------------------------------------------
/chapter4/3/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue';
4 | import App from './App';
5 | import router from './router';
6 | import i18n from './lang';
7 |
8 | Vue.config.productionTip = false;
9 |
10 | /* eslint-disable no-new */
11 | new Vue({
12 | i18n,
13 | router,
14 | el: '#app',
15 | template: '
4 |
11 |
12 |
3 |
4 |
7 |
8 |
11 |
17 |
18 |
19 |
34 |
--------------------------------------------------------------------------------
/chapter4/3/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/chapter4/3/static/.gitkeep
--------------------------------------------------------------------------------
/docs/.vuepress/components/AboutLayout.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ indexMsg.title }}
5 |{{ indexMsg.subtitle }}
6 |{{ $tc('login.tips', 1, {minute: 30, second: 29}) }}
9 |{{ $tc('login.tips', 2, {hour: 1}) }}
10 |11 |
12 |
-
13 |
- {{ $t(`order.status[${orderStatus}]`) }} 14 |
3 |
18 |
19 |
20 |
56 |
--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | base: '/You-May-Not-Know-Vuejs/',
3 | title: '你也许不知道的 Vuejs',
4 | ga: 'UA-85991013-5',
5 | description: 'Vue 从入门到精通系列',
6 | head: [
7 | ['link', { rel: 'icon', href: '/logo.png' }],
8 | ['script', { async: 'async', type: 'text/javascript'}, 'var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?22a0ab0b25c4b63f25e294e1585f3aa5";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();']
9 | ],
10 | markdown: {
11 | toc: {
12 | includeLevel: [2, 3, 4, 5, 6]
13 | }
14 | },
15 | themeConfig: {
16 | repo: 'yugasun/You-May-Not-Know-Vuejs',
17 | docsDir: 'docs',
18 | editLinks: true,
19 | editLinkText: '错别字纠正',
20 | sidebarDepth: 3,
21 | nav: [
22 | {
23 | text: '正文',
24 | link: '/art/',
25 | },
26 | {
27 | text: '人之初',
28 | link: '/donate/'
29 | },
30 | {
31 | text: '关于',
32 | link: '/about/'
33 | }
34 | ],
35 | sidebar: {
36 | '/art/': [
37 | '',
38 | 'you-may-not-know-vuejs-1',
39 | 'you-may-not-know-vuejs-2',
40 | 'you-may-not-know-vuejs-3',
41 | 'you-may-not-know-vuejs-4',
42 | 'you-may-not-know-vuejs-5',
43 | 'you-may-not-know-vuejs-6',
44 | 'you-may-not-know-vuejs-7',
45 | 'you-may-not-know-vuejs-8',
46 | 'you-may-not-know-vuejs-9',
47 | 'you-may-not-know-vuejs-10',
48 | 'you-may-not-know-vuejs-11',
49 | 'you-may-not-know-vuejs-12',
50 | 'you-may-not-know-vuejs-13',
51 | 'you-may-not-know-vuejs-14',
52 | 'you-may-not-know-vuejs-15',
53 | ],
54 | }
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/docs/.vuepress/override.styl:
--------------------------------------------------------------------------------
1 | .content
2 | pre
3 | .highlighted-line
4 | background-color #0968F7
--------------------------------------------------------------------------------
/docs/.vuepress/public/alipay.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/docs/.vuepress/public/alipay.jpg
--------------------------------------------------------------------------------
/docs/.vuepress/public/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/docs/.vuepress/public/logo.jpg
--------------------------------------------------------------------------------
/docs/.vuepress/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/docs/.vuepress/public/logo.png
--------------------------------------------------------------------------------
/docs/.vuepress/public/wechat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/docs/.vuepress/public/wechat.jpg
--------------------------------------------------------------------------------
/docs/.vuepress/public/you-may-not-know-vuejs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yugasun/You-May-Not-Know-Vuejs/a90d44f3e53be74edf8741f8e4f09f48934e7f6c/docs/.vuepress/public/you-may-not-know-vuejs.png
--------------------------------------------------------------------------------
/docs/.vuepress/theme/Layout.vue:
--------------------------------------------------------------------------------
1 |
2 | 
6 |