diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..3223b39 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 wangxueliang + +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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..e0dd650 --- /dev/null +++ b/README.md @@ -0,0 +1,28 @@ +# vue-cli-plugin-ant-design +Ant-Design-Vue plugin for `@vue/cli` 3.0. + +### Install + +First you need to install `@vue/cli` globally (follow the instructions [here](https://cli.vuejs.org/)). + +Then create a project and add the ant-design-vue plugin: + +```bash +vue create my-app +cd my-app +vue add ant-design +``` + +You'll be asked some questions regarding how ant-design-vue is configured in your project. After that, you're good to go. + +### Use with vue-cli UI + +Skip this part if you've done everything in the `Install` section. + +If you prefer managing your project in vue-cli UI (by running `vue ui`), here's how you can add Ant-Design-Vue plugin: go to the Plugins menu, click the upper right `+ Add plugin` button, find `vue-cli-plugin-vue-cli-plugin-ant-design` and install it. + +![image](https://user-images.githubusercontent.com/4122593/50544833-0b156280-0c3d-11e9-8c9f-34b6602b66f5.png) + +Also there're some configurations for you. + +![image](https://user-images.githubusercontent.com/4122593/50544839-4c0d7700-0c3d-11e9-99ba-148ff41720e5.png) \ No newline at end of file diff --git a/generator/index.js b/generator/index.js new file mode 100644 index 0000000..f2caa82 --- /dev/null +++ b/generator/index.js @@ -0,0 +1,65 @@ +module.exports = (api, opts, rootOptions) => { + const utils = require('./utils')(api) + + api.extendPackage({ + dependencies: { + 'ant-design-vue': '^1.2.4' + } + }) + + api.injectImports(utils.getMain(), `import './plugins/ant-design-vue.js'`) + + api.render({ + './src/plugins/ant-design-vue.js': './templates/src/plugins/ant-design-vue.js', + './src/App.vue': './templates/src/App.vue' + }) + + if(opts.lang !== 'en_US') { + api.render({ + './src/App.vue': './templates/src/customLangApp.vue' + }) + } else { + api.render({ + './src/App.vue': './templates/src/App.vue' + }) + } + + if (opts.import === 'partial') { + api.extendPackage({ + devDependencies: { + 'babel-plugin-import': '^1.11.0' + } + }) + api.extendPackage({ + devDependencies: { + 'less-loader': '^4.1.0', + 'less': '^2.7.3' + } + }) + } else if (opts.customTheme) { + api.render({ + './src/antd-variables.less': './templates/src/antd-variables.less' + }) + api.extendPackage({ + devDependencies: { + 'less-loader': '^4.1.0', + 'less': '^2.7.3' + } + }) + } + + api.onCreateComplete(() => { + if (opts.import === 'partial') { + utils.updateBabelConfig(cfg => { + const pluginComponent = ['import', { + 'libraryName': 'ant-design-vue', + 'libraryDirectory': 'es', + 'style': true + }] + cfg.plugins = cfg.plugins || [] + cfg.plugins.push(pluginComponent) + return cfg + }) + } + }) +} diff --git a/generator/templates/src/App.vue b/generator/templates/src/App.vue new file mode 100644 index 0000000..1ce75c2 --- /dev/null +++ b/generator/templates/src/App.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/generator/templates/src/antd-variables.less b/generator/templates/src/antd-variables.less new file mode 100644 index 0000000..0bf2c1f --- /dev/null +++ b/generator/templates/src/antd-variables.less @@ -0,0 +1,9 @@ +/* +Write your variables here. All available variables can be +found in https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less. +*/ + +@import '~ant-design-vue/dist/antd.less'; + +// Here are the variables to cover, such as: +@primary-color: #30A679; diff --git a/generator/templates/src/customLangApp.vue b/generator/templates/src/customLangApp.vue new file mode 100644 index 0000000..36a8b29 --- /dev/null +++ b/generator/templates/src/customLangApp.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/generator/templates/src/plugins/ant-design-vue.js b/generator/templates/src/plugins/ant-design-vue.js new file mode 100644 index 0000000..8a45dfb --- /dev/null +++ b/generator/templates/src/plugins/ant-design-vue.js @@ -0,0 +1,18 @@ +import Vue from 'vue' +<%_ if (options.import === 'full') { _%> +import Antd from 'ant-design-vue' +<%_ if (options.customTheme) { _%> +import '../antd-variables.less' +<%_ } else { _%> +import 'ant-design-vue/dist/antd.css' +<%_ } _%> +Vue.use(Antd) +<%_ } else { _%> +import { Pagination, Button } from 'ant-design-vue' +<%_ if (options.lang !== 'en_US') { _%> +import { LocaleProvider } from 'ant-design-vue' +<%_ } _%> +Vue.component(LocaleProvider.name, LocaleProvider) +Vue.component(Pagination.name, Pagination) +Vue.component(Button.name, Button) +<%_ } _%> diff --git a/generator/utils.js b/generator/utils.js new file mode 100644 index 0000000..adf9c97 --- /dev/null +++ b/generator/utils.js @@ -0,0 +1,35 @@ +// adapted from https://github.com/vuetifyjs/vue-cli-plugin-vuetify/blob/dev/generator/helpers.js +const fs = require('fs') + +module.exports = api => { + return { + getMain() { + const tsPath = api.resolve('src/main.ts') + return fs.existsSync(tsPath) ? 'src/main.ts' : 'src/main.js' + }, + + updateBabelConfig (callback) { + let config, configPath + + const rcPath = api.resolve('./babel.config.js') + const pkgPath = api.resolve('./package.json') + if (fs.existsSync(rcPath)) { + configPath = rcPath + config = callback(require(rcPath)) + } else if (fs.existsSync(pkgPath)) { + configPath = pkgPath + config = JSON.parse(fs.readFileSync(pkgPath, { encoding: 'utf8' })) + config.babel = callback(config.babel || {}) + } + + if (configPath) { + const moduleExports = configPath !== pkgPath ? 'module.exports = ' : '' + fs.writeFileSync( + configPath, + `${moduleExports}${JSON.stringify(config, null, 2)}`, + { encoding: 'utf8' } + ) + } + } + } +} diff --git a/index.js b/index.js new file mode 100644 index 0000000..a6f17c2 --- /dev/null +++ b/index.js @@ -0,0 +1 @@ +module.exports = () => {} \ No newline at end of file diff --git a/lang.js b/lang.js new file mode 100644 index 0000000..f3ceab7 --- /dev/null +++ b/lang.js @@ -0,0 +1,41 @@ +module.exports = [ + "en_US", + "zh_CN", + "zh_TW", + "en_GB", + "es_ES", + "ar_EG", + "bg_BG", + "ca_ES", + "cs_CZ", + "de_DE", + "el_GR", + "et_EE", + "fa_IR", + "fi_FI", + "fr_BE", + "fr_FR", + "he_IL", + "hu_HU", + "is_IS", + "id_ID", + "it_IT", + "ja_JP", + "ko_KR", + "nb_NO", + "ne_NP", + "nl_BE", + "nl_NL", + "pl_PL", + "pt_BR", + "pt_PT", + "sk_SK", + "sr_RS", + "sl_SI", + "sv_SE", + "th_TH", + "tr_TR", + "ru_RU", + "uk_UA", + "vi_VN" +] \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..dba660c --- /dev/null +++ b/package.json @@ -0,0 +1,25 @@ +{ + "name": "vue-cli-plugin-ant-design", + "version": "0.0.1", + "description": "vue-cli 3 plugin to add ant-design-vue", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "vue", + "vue-cli", + "ant-design-vue", + "vue-cli-plugin-ant-design" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/wangxueliang/vue-cli-plugin-ant-design.git" + }, + "bugs": { + "url": "https://github.com/wangxueliang/vue-cli-plugin-ant-design/issues" + }, + "homepage": "https://github.com/wangxueliang/vue-cli-plugin-ant-design.git", + "author": "wangxueliang", + "license": "MIT" +} diff --git a/prompts.js b/prompts.js new file mode 100644 index 0000000..1112f24 --- /dev/null +++ b/prompts.js @@ -0,0 +1,31 @@ +const localeList = require('./lang.js') + +module.exports = [ + { + type: 'list', + name: 'import', + message: 'How do you want to import Ant-Design-Vue?', + choices: [ + { name: 'Fully import', value: 'full' }, + { name: 'Import on demand', value: 'partial' } + ], + default: 'full', + }, + { + when: answers => answers.import === 'full', + type: 'confirm', + name: 'customTheme', + message: 'Do you wish to overwrite Ant-Design-Vue\'s LESS variables?', + default: false, + }, + { + type: 'list', + name: 'lang', + message: 'Choose the locale you want to load', + choices: localeList.map(locale => ({ + name: locale, + value: locale + })), + default: 'en_US' + } +] \ No newline at end of file