🎉 Initial commit.

.circleci/config.yml

@@ -0,0 +1,47 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:8.9.1
+    # circleci branch only master
+    branches:
+      only:
+        - master
+        - /rc-.*/
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      # run tests!
+      # - run: yarn test
+
+      # run build
+      # - run: git config --global user.email "jeffygisgreat@gmail.com"
+      # - run: git config --global user.name "nicejade"
+      # - run: yarn run deploy

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules
+/dist
+
+# package-lock
+package-lock.json
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+# Test
+tests/coverage

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 JadeYang(杨琼璞)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,106 @@
+<p align="center"><a href="https://nicelinks.site/post/5b1a221c0526c920d6dfaada" target="_blank"><img width="100"src="https://vuejs.org/images/logo.png"></a></p>
+
+<h1 align="center"><strong>Awesome Vue-Cli3 Example </strong></h1>
+
+<div align="center">
+  <strong>
+    🦅 (Vue Webpack Vuex Vue-router Element-ui/...) out of the box
+  </strong>
+</div>
+
+<div align="center">
+ 🦅 Awesome example for rapid Vue.js development using <a href="https://github.com/vuejs/vue-cli" target="_blank">vue-cli3</a>.
+</div>
+
+<br>
+
+<div align="center">
+  <a href="https://circleci.com/gh/nicejade/awesome-vue-cli3-example">
+    <img src="https://circleci.com/gh/nicejade/awesome-vue-cli3-example/tree/master.svg?style=svg" alt="Build Status">
+  </a>
+  <a href="https://nodejs.org/en/">
+    <img src="https://img.shields.io/badge/node-%3E%3D%208.0.0-green.svg" alt="node version">
+  </a>
+  <a href="https://github.com/nicejade/vue-boilerplate-template">
+    <img src="https://img.shields.io/github/license/nicejade/vue-boilerplate-template.svg" alt="LICENSE">
+  </a>
+  <a href="https://nicelinks.site/post/5c16083e819ae45de1453caa">
+    <img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat" alt="Prettier">
+  </a>
+  <a href="https://www.jeffjade.com/2019/01/13/146-awesome-vue-cli3-example/??utm_source=awesome-vue-cli3-example">
+   <img src="https://img.shields.io/badge/chat-on%20blog-brightgreen.svg" alt="Chat On My Blog">
+  </a>
+  <a href="https://aboutme.lovejade.cn/">
+    <img src="https://img.shields.io/badge/Author-nicejade-%23a696c8.svg" alt="Author nicejade">
+  </a>
+</div>
+
+#### English | [中文](https://vue-cli3.lovejade.cn/??utm_source=awesome-vue-cli3-example)
+
+## Goal and Philosophy
+
+To facilitate developers to use `Vue-cli3` more conveniently, and to build Web applications more efficiently and reasonably.
+
+## Prerequisites
+
+[Node.js](https://nodejs.org/en/) (>= 8.*), Npm version 4+(Yarn preferred), and [Git](https://git-scm.com/).
+
+## Online Demo
+
+Online Demo Page: https://vue-cli3.lovejade.cn
+
+## Usage
+
+```bash
+# 🎉 clone the project
+git clone https://github.com/nicejade/awesome-vue-cli3-example.git your-project-name
+cd your-project-name
+
+# ➕ install dependencies & start dev
+yarn && yarn start
+```
+
+## Advantage
+
+This boilerplate built on [Vue-Cli3](https://github.com/vuejs/vue-cli/) inheriting the previous [vue-boilerplate-template](https://github.com/nicejade/vue-boilerplate-template) project to explore the more efficient construction for high-quality web applications (recommended to read [开箱即用的 Vue Webpack 脚手架模版](https://www.jeffjade.com/2018/05/20/140-vue-webpack-boilerplate-template/)), Some optimization items are designed, the specific list as followed:
+
+- [x] Import & configure [Vue-router](https://router.vuejs.org/zh/) to make the building of a single-page application (SPA) breeze;
+- [x] Import & configure [Vuex](https://vuex.vuejs.org/zh/) to handle the management of status for application development;
+- [x] Import [Element-ui](http://element.eleme.io/#/zh-CN) to build a website quickly without paying too much attention to the UI;
+- [x] Import & encapsulating [Axios](https://github.com/axios/axios) to response the Http requests more elegant;
+- [x] Import [Dayjs](https://github.com/iamkun/dayjs) to handle date-time correlation in a slight cost;
+- [x] Import & encapsulate the [Marked]() plugin so that it can be used as a rich text editor,and it also can achieve `Markdown` to draw the page due to its parsing function.
+- [x] Import [vue-meta](https://github.com/declandewet/vue-meta) plugin so that allows you to manage your app's meta information, much like [react-helmet](https://github.com/nfl/react-helmet) does for React. It'm awesome for `SEO`.
+- [x] Making the optimization based on the new features of `Webepack 4.*`. Getting the details on `vue.config.js`;
+- [x] Opening & using [Jest](https://jestjs.io/) to test the component with the Demo;
+- [x] Integrate & configure the [Prettier](https://prettier.io/) plugin to enable the team to code with better and consistent style. Getting the details on the [使用 ESLint ＆ Prettier美化Vue代码](https://www.jeffjade.com/2018/06/18/142-beautify-vue-by-eslint-and-prettier/);
+- [x] Import [cli-plugin-pwa](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa) plugin，and configure in \`vue.config.js\` ，you can get started easily with [PWA](https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/pwa-tutorial.md) using Vue;
+- [x] Import the [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) plugin to pre-render static HTML, optimizing SEO and first-screen rendering in a single-page application .
+- [x] Import the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin so that to get the contents of the building packages with optimization while running `Yarn analyz`. Getting the details: [Webpack 打包优化之体积篇](https://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/#%E5%AE%9A%E4%BD%8D-webpack-%E5%A4%A7%E7%9A%84%E5%8E%9F%E5%9B%A0).
+- [x] Import the [size-plugin](https://github.com/GoogleChromeLabs/size-plugin)  plugin to print the Gzip size of the Webpack asset and the changes since the last building while building the app.
+- [x] Import the [hard-source-webpack-plugin](https://github.com/mzgoddard/hard-source-webpack-plugin) plugin for webpack to provide an intermediate caching step for modules. It make the second build will be signficantly faster.
+- [x] The combination of this scaffolding with Node.js (Koa2) Nginx MondoDb Redis is integrated into Docker to make Front-End Developer build easily the entire web application.Its currently open sourced in [Docker Vue Node Nginx Mongodb Redis](https://github.com/nicejade/docker-vue-node-nginx-mongodb-redis).
+-  [ ] Optimizing the built-in `Icon` (Svg) component so that you can receive input in different ways and extract Svg into a separate file to avoid repeated loading of resources;
+
+>**TIP**: [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin): Prerenders static HTML in a single-page application. But, it is not required. If you don't need it, you can remove it. Because it requires a lot of dependencies([puppeteer](https://github.com/GoogleChrome/puppeteer)，Chromium: ~170MB Mac, ~282MB Linux, ~280MB Win) to download, this is time consuming.
+
+## Recommended links
+
+- [**NICE LINKS**](https://nicelinks.site/?utm_source=awesome-vue-cli3-example)
+- [About Me](https://about.me/nicejade/?utm_source=awesome-vue-cli3-example)
+- [Latest Blog](https://quickapp.lovejade.cn/?utm_source=awesome-vue-cli3-example)
+- [First Blog](https://jeffjade.com/?utm_source=awesome-vue-cli3-example)
+- [Second Blog](https://nice.lovejade.cn/?utm_source=awesome-vue-cli3-example)
+- [Auxiliary blog](https://blog.lovejade.cn/?utm_source=awesome-vue-cli3-example)
+- [Weibo](http://weibo.com/jeffjade/)
+- [ZhiHu](https://www.zhihu.com/people/yang-qiong-pu/)
+- [SegmentFault](https://segmentfault.com/u/jeffjade)
+- [JianShu](http://www.jianshu.com/u/9aae3d8f4c3d)
+- [Twitter](https://twitter.com/nicejadeyang)
+- [Facebook](https://www.facebook.com/nice.jade.yang)
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2018-present, [nicejade](https://aboutme.lovejade.cn/?utm_source=awesome-vue-cli3-example).

commands/clear-commit-msg.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env sh
+
+set -e
+
+git checkout --orphan latest_branch
+
+git add -A
+
+git commit -am "✨ initial create & commit"
+
+git branch -D master
+
+git branch -m master
+
+git push -f origin master

commands/deploy.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env sh
+
+# 确保脚本抛出遇到的错误
+set -e
+
+# 生成静态文件
+yarn run build
+
+# 进入生成的文件夹
+cd ./dist
+
+# 如果是发布到自定义域名
+echo 'vue-cli3.lovejade.cn' > CNAME
+
+git init
+git add -A
+git commit -m '🎉 update release'
+
+# 如果发布到 https://<USERNAME>.github.io
+# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
+
+# 如果发布到 https://<USERNAME>.github.io/<REPO>
+git push -f https://github.com/nicejade/awesome-vue-cli3-example.git master:gh-pages
+cd -

commands/preview.js

@@ -0,0 +1,50 @@
+const express = require('express')
+const chalk = require('chalk')
+const childProcess = require('child_process')
+const fs = require('fs')
+const path = require('path')
+const opn = require('opn')
+
+const app = express()
+
+const resolveRealPath = (dir) => {
+  return path.join(__dirname, dir)
+}
+
+const entryFilePath = resolveRealPath('../dist/index.html')
+
+const openStaticServer = () => {
+  app.use('/js', express.static(resolveRealPath('../dist/js/')))
+  app.use('/css', express.static(resolveRealPath('../dist/css/')))
+  app.use('/img', express.static(resolveRealPath('../dist/img/')))
+  app.use('/fonts', express.static(resolveRealPath('../dist/fonts/')))
+
+  app.get('*', function (req, res) {
+    const content = fs.readFileSync(entryFilePath, 'utf8')
+    res.send(content)
+  })
+
+  app.listen(3000, function () {
+    console.log(chalk.cyan('Example app listening on port 3000!\n'))
+    console.log(chalk.yellow('You Can Visit: ') + chalk.green('http://localhost:3000/'))
+    opn('http://localhost:3000')
+  })
+}
+
+const main = () => {
+  const isExist = fs.existsSync(entryFilePath)
+  if (isExist) {
+    openStaticServer()
+  } else {
+    const commandStr = `vue-cli-service build`
+    const output = childProcess.execSync(commandStr, {
+      cwd: process.cwd(),
+      timeout: 60000,
+      encoding: 'utf8'
+    })
+    openStaticServer()
+    console.log(output)
+  }
+}
+
+main()

jest.config.js

@@ -0,0 +1,23 @@
+/** @format */
+const path = require('path')
+
+module.exports = {
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{js,vue}', '!src/assets/**'],
+  coverageReporters: ['html', 'text-summary'],
+  coverageDirectory: path.resolve(__dirname, './tests/coverage')
+}