Merge branch 'release/1.0.0'

README.md

@@ -1,3 +1,86 @@
 # vue-cli-plugin-element
 
-Quickly build a backend system with vue-cli and element-ui in seconds.
+[![Version](https://img.shields.io/npm/v/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+[![License](https://img.shields.io/npm/l/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+[![Dependencies](https://img.shields.io/david/codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+
+Quickly build a backend system with vue-cli and element-ui in seconds.
+
+This project is not only a vue-cli plugin but also a vue-cli preset. Have fun!
+
+:us: English | [:cn: 简体中文](README.zh-CN.md)
+
+## Getting Started
+
+### Prerequisites
+
+You must install Vue CLI 3 before you start:
+
+```bash
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+
+### Install
+
+You can create your project directly via preset, which already includes configurations such as ESLint and other plugins.
+
+```bash
+vue create --preset codetrial/vue-cli-plugin-element your-awesome-project
+```
+
+If you don't want to use the preset , you can manually create an empty project via vue-cli.
+
+```bash
+# make sure the following features are selected:
+# - Babel
+# - PWA
+# - Router
+# - Vuex
+# - CSS Pre-processors
+# - Linter - Formatter
+vue create your-awesome-project
+```
+
+Then add the plugin to your project via vue.
+
+```bash
+vue add @codetrial/element
+```
+
+## Docs
+
+The full documentation: [:book: codetrial.github.io/element-admin](https://codetrial.github.io/element-admin)
+
+## Example
+
+A complete example project: [:zap: @codetrial/element-admin](https://github.com/codetrial/element-admin)
+
+Live Preview: [:telescope: element-admin.now.sh](https://element-admin.now.sh)
+
+## Core Features
+
+- :camera: Minimal dependencies
+- :tv: Project Structure
+- :telephone_receiver: View Layout
+- :pager: Data Processing Layer
+- :watch: Authorization
+- :radio: Error Pages
+- :mag_right: List Example
+- :ghost: Form Example
+
+## Contributing
+
+Looking forward to your pull requests.
+
+## Built With
+
+- [Vue.js](https://github.com/vuejs/vue)
+- [ElementUI](https://github.com/ElemeFE/element)
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2018 - present, Felix Yang

README.zh-CN.md

@@ -0,0 +1,93 @@
+# vue-cli-plugin-element
+
+[![Version](https://img.shields.io/npm/v/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+[![License](https://img.shields.io/npm/l/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+[![Dependencies](https://img.shields.io/david/codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+
+使用 vue-cli 及 element-ui 闪电般构建一个后台管理系统。
+
+这个项目不仅仅是一个 vue-cli 插件，也是一个 vue-cli preset，希望能够帮到你！
+
+:cn: 简体中文 | [:us: English](README.md)
+
+## 入门指南
+
+### 前置依赖
+
+在开始前，你需要先安装 Vue CLI 3：
+
+```bash
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+
+### 安装
+
+你可以通过 preset 的方式直接创建你的项目，它已经包含了 ESLint 等插件的配置。
+
+```bash
+vue create --preset codetrial/vue-cli-plugin-element your-awesome-project
+```
+
+如果你不想使用 preset 的方式，你也可以先通过 vue-cli 手动创建一个空的项目。
+
+```bash
+# 确保你创建的项目选择了以下功能：
+# - Babel
+# - PWA
+# - Router
+# - Vuex
+# - CSS Pre-processors
+# - Linter - Formatter
+vue create your-awesome-project
+```
+
+然后通过 vue 将插件添加到你的项目中。
+
+```bash
+vue add @codetrial/element
+```
+
+## 文档
+
+完整的参考文档：[:book: codetrial.github.io/element-admin](https://codetrial.github.io/element-admin)
+
+## 示例
+
+一个使用该插件的完整示例：[:zap: @codetrial/element-admin](https://github.com/codetrial/element-admin)
+
+在线预览：[:telescope: element-admin.now.sh](https://element-admin.now.sh)
+
+## 核心功能
+
+:camera: **最小依赖**：仅依赖 Vue 官方库及 ElementUI 组件库，未额外引入其它第三方库，为你提供自由发挥的空间。
+
+:tv: **目录结构**：根据项目实战经验，设计了合理、清晰的目录结构。
+
+:telephone_receiver: **页面布局**：使用 Vue Router 嵌套路由及 ElementUI 内置组件进行布局。
+
+:pager: **数据处理**：添加独立的 api 及 service 层，将业务逻辑从组件中抽离。
+
+:watch: **权限控制**：为路由添加配置式拦截器，默认支持用户登录鉴权及角色鉴权。
+
+:radio: **列表示例**：一个相对比较完整的列表页示例，包含字段查询（过滤），字段排序，页码跳转，批量操作等等。
+
+:mag_right: **表单示例**：一个相对比较完整的表单页示例，包含表单校验、提交等操作。
+
+:ghost: **错误页面**：内置简单的（其实是偷懒） 403、404 及 500 错误页。
+
+## 贡献
+
+期待你的 `pull requests`。如果你觉得有帮助，还请多多反馈！
+
+## 技术栈
+
+- [Vue.js](https://github.com/vuejs/vue)
+- [ElementUI](https://github.com/ElemeFE/element)
+
+## 许可
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2018 - present, Felix Yang

generator.js

@@ -3,25 +3,49 @@ const fs = require('fs')
 const removeFiles = (files = []) => {
   files.forEach(path => {
     if (fs.existsSync(path)) {
-      fs.unlinkSync(path);
+      fs.unlinkSync(path)
     }
   })
 }
 
+const filesToRemove = [
+  'src/components/HelloWorld.vue',
+  'src/router.js',
+  'src/store.js'
+]
+
+const importsToRemove = [
+  `import store from './store'`,
+  `import router from './router'`
+]
+
 module.exports = (api, options, rootOptions) => {
+  const {
+    entryFile,
+    generator: { imports }
+  } = api
+
   api.extendPackage({
     dependencies: {
-      'element-ui': '^2.4.11'
-    },
+      'element-ui': '^2.4.11',
+      'vuex-router-sync': '^5.0.0'
+    }
   })
 
-  api.injectImports(api.entryFile, `import './registerElementUI'`)
+  // api.injectImports(entryFile, `import './registerElementUI'`)
+
+  // Remove the default imports generated by vue-cli
+  if (imports[entryFile]) {
+    importsToRemove.forEach(itr => imports[entryFile].delete(itr))
+  }
 
+  // Remove the default files generated by vue-cli
+  api.render(function(files) {
+    filesToRemove.forEach(ftr => delete files[ftr])
+  })
   api.render('./template/structure')
 
   api.onCreateComplete(() => {
-    removeFiles([
-      api.resolve('src/components/HelloWorld.vue')
-    ])
+    removeFiles(filesToRemove.map(ftr => api.resolve(ftr)))
   })
 }

package.json

@@ -1,18 +1,22 @@
 {
   "name": "vue-cli-plugin-element",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Quickly build a backend system with vue-cli and element-ui in seconds.",
   "main": "index.js",
   "scripts": {
-    "test": "yarn test"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/codetrial/vue-cli-plugin-element.git"
   },
   "keywords": [
     "vue",
-    "cli",
+    "vue-cli",
+    "vue-cli-plugin",
+    "vue-cli-preset",
+    "preset",
+    "plugin",
     "element",
     "layout",
     "structure"

preset.json

@@ -4,10 +4,8 @@
     "@vue/cli-plugin-babel": {},
     "@vue/cli-plugin-pwa": {},
     "@vue/cli-plugin-eslint": {
-      "config": "airbnb",
-      "lintOn": [
-        "save"
-      ]
+      "config": "standard",
+      "lintOn": ["save"]
     },
     "@vue/cli-plugin-unit-jest": {}
   },

template/structure/src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="scss">
+</style>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>

template/structure/src/api/index.js

@@ -0,0 +1,104 @@
+import { delay, checkCode } from '@/utils/request'
+
+/* start of mocking user */
+const users = {
+  admin: {
+    id: 100001,
+    name: 'Administrator',
+    roles: ['USER', 'ADMIN']
+  },
+  codetrial: {
+    id: 100001,
+    name: 'Codetrial',
+    roles: ['USER']
+  }
+}
+
+export async function getUser(username) {
+  await delay(200)
+
+  const user = users[username]
+  const response = user
+    ? {
+      status: '1',
+      data: user
+    }
+    : {
+      status: '1100',
+      message: 'Wrong user or password'
+    }
+
+  return Promise.resolve(response).then(checkCode)
+}
+/* end of mocking user */
+
+/* start of mocking example list */
+const exampleSource = Array(235)
+  .fill(1)
+  .map((element, index) => {
+    const personal = index % 2 === 0
+    return {
+      id: index + 10000,
+      name: `Example - ${index} - ${personal ? 'felixpy' : 'codetrial'}`,
+      type: personal ? 1 : 2,
+      status: index % 5 === 0 ? 0 : 1,
+      url: personal ? 'https://felixpy.com' : 'https://codetrial.github.io',
+      createUser: 100001,
+      createUserName: 'Felix Yang',
+      updateUser: 100001,
+      updateUserName: 'Felix Yang',
+      createTime: '2018-12-22 11:00:00',
+      updateTime: '2018-12-22 11:00:00'
+    }
+  })
+
+export async function getExampleList({ filter = {}, page = {} }) {
+  const { pageNo = 1, pageSize = 20 } = page
+  const offset = (pageNo - 1) * pageSize
+  let list = exampleSource
+  let total = exampleSource.length
+
+  // filter
+  Object.keys(filter).forEach(key => {
+    const filterValue = filter[key]
+    if (filterValue != null && filterValue.length) {
+      list = list.filter(item => {
+        if (Array.isArray(filterValue)) {
+          return filterValue.map(String).indexOf(String(item[key])) > -1
+        }
+        return String(item[key]) === String(filterValue)
+      })
+    }
+  })
+
+  total = list.length
+
+  // sort
+  list = list.sort((a, b) => {
+    const { order, orderBy } = page
+
+    if (!order || !orderBy) {
+      return
+    }
+
+    const diff = (order === 'descending' ? -1 : 1) * (a[orderBy] - b[orderBy])
+    return diff > 0 ? 1 : -1
+  })
+
+  // pagination
+  list = list.slice(offset, offset + pageSize)
+
+  await delay(1000)
+
+  return Promise.resolve({
+    status: '1',
+    data: {
+      list,
+      page: {
+        ...page,
+        total
+      }
+    }
+  }).then(checkCode)
+}
+/* end of mocking example list */