Merge pull request #1 from pdsuwwz/feature/init-app

Feature/init app

.env.development

@@ -0,0 +1,2 @@
+VUE_APP_BASE_API=http://api.test.xxx.xxx.com
+VITE_BASE_API=http://api.test.xxx.xxx.com/api

.env.prod

@@ -0,0 +1,2 @@
+VUE_APP_BASE_API=http://api.test.xxx.xxx.com
+VITE_BASE_API=http://api.test.xxx.xxx.com

.eslintignore

@@ -0,0 +1,9 @@
+build
+dist
+tmp
+node_modules
+coverage
+public/stat_log.js
+src/assets/fonts/iconfont.js
+src/utils/wysihtml5.js
+src/utils/bus.js

.eslintrc.js

@@ -0,0 +1,101 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+    jest: true,
+    'vue/setup-compiler-macros': true
+  },
+  parser: 'vue-eslint-parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended'
+  ],
+  plugins: [
+    '@typescript-eslint'
+  ],
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+    parser: '@typescript-eslint/parser'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-unused-vars': 1,
+    'no-undef': 1,
+    // https://eslint.org/docs/rules/no-var
+    'no-var': 'error',
+    // https://cn.eslint.org/docs/rules/no-trailing-spaces
+    'no-trailing-spaces': 2, // 禁用行尾空白
+    'comma-style': ['error', 'last'],
+    'comma-dangle': ['error', 'never'],
+    'no-irregular-whitespace': 2,
+    'no-multi-spaces': 1,
+    'no-multiple-empty-lines': [
+      2,
+      {
+        max: 1
+      }
+    ],
+    // https://cn.eslint.org/docs/rules/eol-last
+    'eol-last': 2,
+    quotes: [
+      'error',
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true
+      }
+    ],
+    // https://eslint.org/docs/rules/prefer-const
+    'prefer-const': 2,
+    camelcase: ['error', { properties: 'never' }],
+    indent: ['error', 2, { SwitchCase: 1 }],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'none',
+          requireLast: false
+        },
+        singleline: {
+          delimiter: 'semi',
+          requireLast: true
+        }
+      }
+    ],
+    '@typescript-eslint/no-empty-function': 0,
+    // semi: ['error', 'never'],
+    '@typescript-eslint/semi': ['error', 'never'],
+    // vue
+    'vue/no-v-html': 'off',
+    'vue/multi-word-component-names': 0,
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/html-closing-bracket-spacing': 'error',
+    'vue/no-unused-components': 1,
+    'vue/no-mutating-props': 0,
+    'vue/script-setup-uses-vars': 'error',
+    'vue/html-self-closing': ['error', {
+      html: {
+        void: 'never',
+        normal: 'never',
+        component: 'always'
+      },
+      svg: 'always',
+      math: 'always'
+    }]
+  },
+  // https://github.com/vuejs/eslint-plugin-vue/issues/1355
+  'overrides': [
+    {
+      'files': ['*.html'],
+      'processor': 'vue/.vue'
+    }
+  ]
+}

.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+name: gh-pages
+
+on:
+  # set triggers here, like on push or on release
+  workflow_dispatch:
+  push:
+    branches: [ main ]
+  pull_request:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14.18.x
+
+      - name: Install pnpm
+        run: npm i -g pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm deploy:gh-pages
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.ACCESS_TOKEN }}
+          publish_dir: ./dist
+          # Leave user_name and user_email unset to commit under your own username
+          user_name: 'github-actions[bot]'
+          user_email: 'github-actions[bot]@users.noreply.github.com'
+          # Optional. I'm using this for testing.
+          allow_empty_commit: false

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+/dist-ssr
+
+# misc
+.DS_Store
+*.local
+.vscode/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.eslintcache

README.md

@@ -1,2 +1,51 @@
 # vue-boilerplate-i18n
+
+[![Deploy](https://github.com/pdsuwwz/vue-boilerplate-i18n/workflows/gh-pages/badge.svg)](https://github.com/pdsuwwz/vue-boilerplate-i18n/actions/workflows/deploy.yml)
+[![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/pdsuwwz/vue-boilerplate-i18n/gh-pages/main)](https://github.com/pdsuwwz/vue-boilerplate-i18n/deployments/activity_log?environment=github-pages)
+[![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/pdsuwwz)
+[![License](https://img.shields.io/github/license/pdsuwwz/vue-boilerplate-i18n?color=blue)](https://github.com/pdsuwwz/vue-boilerplate-i18n/blob/main/LICENSE)
+
 🌏  Starter using Vite + Pinia + TypeScript + i18n + Element-Plus to fast build a prototyping
+
+
+__[Live demo](https://pdsuwwz.github.io/vue-boilerplate-i18n)__
+
+## Environment Support
+
+* Vue 3.2.x
+* Node >= 14.18.x
+
+## Install
+
+Run `pnpm i` to install the dependencies.
+
+```bash
+pnpm i
+```
+
+## Run
+
+Run `pnpm dev` to start the frontend dev server.
+
+```bash
+pnpm dev
+```
+
+## Test
+
+Unit Testing.
+
+```bash
+pnpm test
+```
+
+Test code coverage.
+
+```bash
+pnpm test:coverage
+```
+
+## License
+
+[MIT](./LICENSE) License | Copyright © 2020-PRESENT [Wisdom](https://github.com/pdsuwwz)
+

__tests__/IconFont.spec.ts

@@ -0,0 +1,84 @@
+/**
+ * @jest-environment jsdom
+ */
+import { mount } from '@vue/test-utils'
+import IconFontComponent from '@/components/IconFont/index.vue'
+
+describe('Test IconFontComponent', () => {
+  it('works', () => {
+    const wrapper = mount(IconFontComponent, {
+      props: {
+        icon: 'iconfile'
+      }
+    })
+
+    expect(wrapper.find('g').find('use').attributes('href')).toBe('#iconfile')
+  })
+
+  it('empty IconFontComponent', () => {
+    const wrapper = mount(IconFontComponent, {
+      props: {
+        icon: ''
+      }
+    })
+
+    expect(wrapper.find('g').find('use').attributes('href')).toBe('#')
+  })
+
+  it('the position of icon is vertically centered', () => {
+    const wrapper = mount(IconFontComponent, {
+      props: {
+        icon: 'iconfile',
+        verticalCenter: true
+      }
+    })
+
+    expect(wrapper.classes()).toContain('middle')
+  })
+
+  it('cursor pointer', () => {
+    const wrapper = mount(IconFontComponent, {
+      props: {
+        icon: 'iconfile',
+        cursor: true
+      }
+    })
+
+    expect(wrapper.classes()).toContain('cursor')
+  })
+
+  it('handle handleClick', () => {
+    const wrapper = mount(IconFontComponent, {
+      props: {
+        icon: 'iconfile',
+        disabled: false
+      }
+    })
+
+    wrapper.vm.handleClick()
+    expect(wrapper.emitted().click).toBeTruthy()
+  })
+
+  it('does not handle handleClick', () => {
+    const wrapper = mount(IconFontComponent, {
+      props: {
+        icon: 'iconfile',
+        disabled: true
+      }
+    })
+
+    wrapper.vm.handleClick()
+    expect(wrapper.emitted().click).toBeUndefined()
+  })
+
+  it('has shadow', () => {
+    const wrapper = mount(IconFontComponent, {
+      props: {
+        icon: 'iconfile',
+        shadow: true
+      }
+    })
+
+    expect(wrapper.find('g').attributes('filter')).toBeTruthy()
+  })
+})

__tests__/hello.spec.ts

@@ -0,0 +1,17 @@
+/**
+ * @jest-environment jsdom
+ */
+import { mount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld/index.vue'
+
+// https://stackoverflow.com/questions/56398742/eslint-throws-no-undef-errors-when-linting-jest-test-files
+test('displays message', () => {
+  const wrapper = mount(HelloWorld, {
+    props: {
+      msg: 'Hello world'
+    }
+  })
+
+  // Assert the rendered text of the component
+  expect(wrapper.text()).toContain('Hello world')
+})

__tests__/sum.spec.ts

@@ -0,0 +1,3 @@
+test('plus test', () => {
+  expect(2 + 3).toBe(5)
+})

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    'babel-plugin-transform-vite-meta-env'
+  ]
+}

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

jest.config.js

@@ -0,0 +1,37 @@
+module.exports = {
+  testEnvironment: 'node',
+  preset: 'ts-jest',
+  moduleFileExtensions: ['js', 'ts', 'vue'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '\\.(png|jpeg|jpg|gif)$': 'identity-obj-proxy',
+    '\\.(ttf|woff|woff2)$': 'identity-obj-proxy',
+    'iconfont\\.js$': 'identity-obj-proxy'
+  },
+
+  testMatch: ['<rootDir>/__tests__/**/*.spec.ts'],
+  transformIgnorePatterns: ['/node_modules/'],
+  transform: {
+    '^.+\\.(js|ts)$': '@sucrase/jest-plugin',
+    '^.+\\.(vue)$': '@vue/vue3-jest'
+  },
+
+  coverageDirectory: 'coverage',
+  coverageReporters: ['html', 'lcov', 'text'],
+  coverageProvider: 'v8',
+  collectCoverageFrom: [
+    // 'src/**/*.vue',
+    'src/modules/**/components/*.vue',
+    'src/components/**/*.vue'
+    // 'src/widgets/**/*.vue'
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 40,
+      functions: 80,
+      lines: 90,
+      statements: 80
+    }
+  }
+}