├── LICENSE ├── README.md ├── generator ├── index.js ├── templates │ └── src │ │ ├── App.vue │ │ ├── antd-variables.less │ │ ├── customLangApp.vue │ │ └── plugins │ │ └── ant-design-vue.js └── utils.js ├── index.js ├── lang.js ├── package.json └── prompts.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 wangxueliang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-plugin-ant-design 2 | Ant-Design-Vue plugin for `@vue/cli` 3.0. 3 | 4 | ### Install 5 | 6 | First you need to install `@vue/cli` globally (follow the instructions [here](https://cli.vuejs.org/)). 7 | 8 | Then create a project and add the ant-design-vue plugin: 9 | 10 | ```bash 11 | vue create my-app 12 | cd my-app 13 | vue add ant-design 14 | ``` 15 | 16 | You'll be asked some questions regarding how ant-design-vue is configured in your project. After that, you're good to go. -------------------------------------------------------------------------------- /generator/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api, opts, rootOptions) => { 2 | const utils = require('./utils')(api) 3 | 4 | api.extendPackage({ 5 | dependencies: { 6 | 'ant-design-vue': '^1.2.4' 7 | } 8 | }) 9 | 10 | api.injectImports(utils.getMain(), `import './plugins/ant-design-vue.js'`) 11 | 12 | api.render({ 13 | './src/plugins/ant-design-vue.js': './templates/src/plugins/ant-design-vue.js', 14 | './src/App.vue': './templates/src/App.vue' 15 | }) 16 | 17 | if(opts.lang !== 'en_US') { 18 | api.render({ 19 | './src/App.vue': './templates/src/customLangApp.vue' 20 | }) 21 | } else { 22 | api.render({ 23 | './src/App.vue': './templates/src/App.vue' 24 | }) 25 | } 26 | 27 | if (opts.import === 'partial') { 28 | api.extendPackage({ 29 | devDependencies: { 30 | 'babel-plugin-import': '^1.11.0' 31 | } 32 | }) 33 | api.extendPackage({ 34 | devDependencies: { 35 | 'less-loader': '^4.1.0', 36 | 'less': '^2.7.3' 37 | } 38 | }) 39 | } else if (opts.customTheme) { 40 | api.render({ 41 | './src/antd-variables.less': './templates/src/antd-variables.less' 42 | }) 43 | api.extendPackage({ 44 | devDependencies: { 45 | 'less-loader': '^4.1.0', 46 | 'less': '^2.7.3' 47 | } 48 | }) 49 | } 50 | 51 | api.onCreateComplete(() => { 52 | if (opts.import === 'partial') { 53 | utils.updateBabelConfig(cfg => { 54 | const pluginComponent = ['import', { 55 | 'libraryName': 'ant-design-vue', 56 | 'libraryDirectory': 'es', 57 | 'style': true 58 | }] 59 | cfg.plugins = cfg.plugins || [] 60 | cfg.plugins.push(pluginComponent) 61 | return cfg 62 | }) 63 | } 64 | }) 65 | } 66 | -------------------------------------------------------------------------------- /generator/templates/src/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 26 | 27 | 37 | -------------------------------------------------------------------------------- /generator/templates/src/antd-variables.less: -------------------------------------------------------------------------------- 1 | /* 2 | Write your variables here. All available variables can be 3 | found in https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less. 4 | */ 5 | 6 | @import '~ant-design-vue/dist/antd.less'; 7 | 8 | // Here are the variables to cover, such as: 9 | @primary-color: #30A679; 10 | -------------------------------------------------------------------------------- /generator/templates/src/customLangApp.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 36 | 37 | 47 | -------------------------------------------------------------------------------- /generator/templates/src/plugins/ant-design-vue.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | <%_ if (options.import === 'full') { _%> 3 | import Antd from 'ant-design-vue' 4 | <%_ if (options.customTheme) { _%> 5 | import '../antd-variables.less' 6 | <%_ } else { _%> 7 | import 'ant-design-vue/dist/antd.css' 8 | <%_ } _%> 9 | Vue.use(Antd) 10 | <%_ } else { _%> 11 | import { Pagination, Button } from 'ant-design-vue' 12 | <%_ if (options.lang !== 'en_US') { _%> 13 | import { LocaleProvider } from 'ant-design-vue' 14 | Vue.component(LocaleProvider.name, LocaleProvider) 15 | <%_ } _%> 16 | Vue.component(Pagination.name, Pagination) 17 | Vue.component(Button.name, Button) 18 | <%_ } _%> 19 | -------------------------------------------------------------------------------- /generator/utils.js: -------------------------------------------------------------------------------- 1 | // adapted from https://github.com/vuetifyjs/vue-cli-plugin-vuetify/blob/dev/generator/helpers.js 2 | const fs = require('fs') 3 | 4 | module.exports = api => { 5 | return { 6 | getMain() { 7 | const tsPath = api.resolve('src/main.ts') 8 | return fs.existsSync(tsPath) ? 'src/main.ts' : 'src/main.js' 9 | }, 10 | 11 | updateBabelConfig (callback) { 12 | let config, configPath 13 | 14 | const rcPath = api.resolve('./babel.config.js') 15 | const pkgPath = api.resolve('./package.json') 16 | if (fs.existsSync(rcPath)) { 17 | configPath = rcPath 18 | config = callback(require(rcPath)) 19 | } else if (fs.existsSync(pkgPath)) { 20 | configPath = pkgPath 21 | config = JSON.parse(fs.readFileSync(pkgPath, { encoding: 'utf8' })) 22 | config.babel = callback(config.babel || {}) 23 | } 24 | 25 | if (configPath) { 26 | const moduleExports = configPath !== pkgPath ? 'module.exports = ' : '' 27 | fs.writeFileSync( 28 | configPath, 29 | `${moduleExports}${JSON.stringify(config, null, 2)}`, 30 | { encoding: 'utf8' } 31 | ) 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = () => {} -------------------------------------------------------------------------------- /lang.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | "en_US", 3 | "zh_CN", 4 | "zh_TW", 5 | "en_GB", 6 | "es_ES", 7 | "ar_EG", 8 | "bg_BG", 9 | "ca_ES", 10 | "cs_CZ", 11 | "de_DE", 12 | "el_GR", 13 | "et_EE", 14 | "fa_IR", 15 | "fi_FI", 16 | "fr_BE", 17 | "fr_FR", 18 | "he_IL", 19 | "hu_HU", 20 | "is_IS", 21 | "id_ID", 22 | "it_IT", 23 | "ja_JP", 24 | "ko_KR", 25 | "nb_NO", 26 | "ne_NP", 27 | "nl_BE", 28 | "nl_NL", 29 | "pl_PL", 30 | "pt_BR", 31 | "pt_PT", 32 | "sk_SK", 33 | "sr_RS", 34 | "sl_SI", 35 | "sv_SE", 36 | "th_TH", 37 | "tr_TR", 38 | "ru_RU", 39 | "uk_UA", 40 | "vi_VN" 41 | ] -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-ant-design", 3 | "version": "1.0.1", 4 | "description": "vue-cli 3 plugin to add ant-design-vue", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "vue", 11 | "vue-cli", 12 | "ant-design-vue", 13 | "vue-cli-plugin-ant-design" 14 | ], 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/wangxueliang/vue-cli-plugin-ant-design.git" 18 | }, 19 | "bugs": { 20 | "url": "https://github.com/wangxueliang/vue-cli-plugin-ant-design/issues" 21 | }, 22 | "homepage": "https://github.com/wangxueliang/vue-cli-plugin-ant-design.git", 23 | "author": "wangxueliang", 24 | "license": "MIT" 25 | } 26 | -------------------------------------------------------------------------------- /prompts.js: -------------------------------------------------------------------------------- 1 | const localeList = require('./lang.js') 2 | 3 | module.exports = [ 4 | { 5 | type: 'list', 6 | name: 'import', 7 | message: 'How do you want to import Ant-Design-Vue?', 8 | choices: [ 9 | { name: 'Fully import', value: 'full' }, 10 | { name: 'Import on demand', value: 'partial' } 11 | ], 12 | default: 'full', 13 | }, 14 | { 15 | when: answers => answers.import === 'full', 16 | type: 'confirm', 17 | name: 'customTheme', 18 | message: 'Do you wish to overwrite Ant-Design-Vue\'s LESS variables?', 19 | default: false, 20 | }, 21 | { 22 | type: 'list', 23 | name: 'lang', 24 | message: 'Choose the locale you want to load', 25 | choices: localeList.map(locale => ({ 26 | name: locale, 27 | value: locale 28 | })), 29 | default: 'en_US' 30 | } 31 | ] --------------------------------------------------------------------------------