├── .gitignore ├── logo.png ├── publish.sh ├── index.js ├── generator ├── templates │ └── src │ │ ├── element-variables.scss.ejs │ │ ├── App.vue.ejs │ │ └── plugins │ │ └── element.js.ejs ├── utils.js └── index.js ├── lang.js ├── README.md ├── package.json ├── prompts.js ├── LICENSE └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/vue-cli-plugin-element3/master/logo.png -------------------------------------------------------------------------------- /publish.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | npm config get registry # 检查仓库镜像库 3 | npm config set registry=http://registry.npmjs.org 4 | echo '请进行登录相关操作：' 5 | npm login # 登陆 6 | echo "-------publishing-------" 7 | npm publish # 发布 8 | npm config set registry=https://registry.npm.taobao.org # 设置为淘宝镜像 9 | echo "发布完成" 10 | exit -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const figlet = require('figlet') 4 | const chalk = require('chalk') 5 | 6 | 7 | module.exports = () => { 8 | console.log(chalk.yellow(figlet.textSync('Element 3', { 9 | font: 'big', 10 | horizontalLayout: 'default', 11 | verticalLayout: 'default', 12 | width: 80, 13 | whitespaceBreak: true 14 | }))); 15 | } 16 | -------------------------------------------------------------------------------- /generator/templates/src/element-variables.scss.ejs: -------------------------------------------------------------------------------- 1 | /* 2 | Write your variables here. All available variables can be 3 | found in element3/packages/theme-chalk/src/common/var.scss. 4 | For example, to overwrite the theme color: 5 | */ 6 | $--color-primary: red; 7 | 8 | /* icon font path, required */ 9 | $--font-path: '~element3/lib/theme-chalk/fonts'; 10 | 11 | @import "~element3/packages/theme-chalk/src/index"; 12 | -------------------------------------------------------------------------------- /lang.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'zh-cn', 3 | 'en', 4 | 'af-za', 5 | 'ar', 6 | 'bg', 7 | 'ca', 8 | 'cs-cz', 9 | 'da', 10 | 'de', 11 | 'ee', 12 | 'el', 13 | 'es', 14 | 'fa', 15 | 'fi', 16 | 'fr', 17 | 'he', 18 | 'hu', 19 | 'id', 20 | 'it', 21 | 'ja', 22 | 'km', 23 | 'ko', 24 | 'ku', 25 | 'kz', 26 | 'lt', 27 | 'lv', 28 | 'mn', 29 | 'nb-no', 30 | 'nl', 31 | 'pl', 32 | 'pt-br', 33 | 'pt', 34 | 'ro', 35 | 'ru-ru', 36 | 'sk', 37 | 'sl', 38 | 'sv-se', 39 | 'ta', 40 | 'th', 41 | 'tk', 42 | 'tr-tr', 43 | 'ua', 44 | 'ug-cn', 45 | 'vi', 46 | 'zh-tw' 47 | ] 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue-cli-plugin-element3 2 | 3 | Element plugin for `@vue/cli` 4.5.x 4 | ### Inspired by 5 | https://github.com/ElementUI/vue-cli-plugin-element 6 | 7 | ### Install 8 | 9 | First you need to install `@vue/cli` globally (follow the instructions [here](https://cli.vuejs.org/)). 10 | 11 | Then create a project and add the Element plugin: 12 | 13 | ``` 14 | vue create my-app 15 | cd my-app 16 | vue add element3 17 | ``` 18 | 19 | ### ToDo List 20 | - [ ] Import on demand 21 | - [ ] Choose the locale you want to load 22 | - [ ] Vue Cli UI Support 23 | 24 | 25 | 26 | 27 | You'll be asked some questions regarding how Element is configured in your project. After that, you're good to go. 28 | 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-element3", 3 | "version": "0.0.4", 4 | "description": "vue-cli 4 plugin to add element3", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/hug-sun/vue-cli-plugin-element3.git" 9 | }, 10 | "keywords": [ 11 | "element3", 12 | "element", 13 | "element-ui", 14 | "vue", 15 | "vue-cli", 16 | "plugin", 17 | "cli" 18 | ], 19 | "author": "", 20 | "license": "ISC", 21 | "bugs": { 22 | "url": "https://github.com/hug-sun/vue-cli-plugin-element3/issues" 23 | }, 24 | "homepage": "https://github.com/hug-sun/vue-cli-plugin-element3#readme", 25 | "dependencies": { 26 | "chalk": "^4.1.0", 27 | "figlet": "^1.5.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /prompts.js: -------------------------------------------------------------------------------- 1 | 2 | const localeList = require('./lang.js') 3 | 4 | module.exports = [ 5 | { 6 | type: 'list', 7 | name: 'import', 8 | message: 'How do you want to import Element3?', 9 | choices: [ 10 | { name: 'Fully import', value: 'full' }, 11 | { name: 'Import on demand', value: 'partial' } 12 | ], 13 | default: 'full', 14 | }, 15 | { 16 | when: answers => answers.import === 'full', 17 | type: 'confirm', 18 | name: 'customTheme', 19 | message: 'Do you wish to overwrite Element\'s SCSS variables?', 20 | default: false, 21 | }, 22 | // { 23 | // type: 'list', 24 | // name: 'lang', 25 | // message: 'Choose the locale you want to load', 26 | // choices: localeList.map(locale => ({ 27 | // name: locale, 28 | // value: locale 29 | // })), 30 | // default: 'zh-CN' 31 | // } 32 | ] -------------------------------------------------------------------------------- /generator/templates/src/App.vue.ejs: -------------------------------------------------------------------------------- 1 | 15 | 16 | 26 | 27 | 37 | -------------------------------------------------------------------------------- /generator/templates/src/plugins/element.js.ejs: -------------------------------------------------------------------------------- 1 | <%_ if (options.import === 'full') { _%> 2 | import Element3 from 'element3' 3 | <%_ if (options.customTheme) { _%> 4 | import '../element-variables.scss' 5 | <%_ } else { _%> 6 | import 'element3/lib/theme-chalk/index.css' 7 | <%_ } _%> 8 | <%_ if (options.lang !== 'en') { _%> 9 | import locale from 'element3/lib/locale/lang/<%= options.lang %>' 10 | <%_ } _%> 11 | <%_ } else { _%> 12 | import { ElButton } from 'element3' 13 | import 'element3/lib/theme-chalk/index.css' 14 | <%_ if (options.lang !== 'en') { _%> 15 | import lang from 'element3/lib/locale/lang/<%= options.lang %>' 16 | import locale from 'element3/lib/locale' 17 | <%_ }} _%> 18 | 19 | export default (app) => { 20 | <%_ if (options.import === 'full') { _%> 21 | <%_ if (options.lang !== 'en') { _%> 22 | app.use(Element3, { locale }) 23 | <%_ } else { _%> 24 | app.use(Element3) 25 | <%_ } _%> 26 | <%_ } else { _%> 27 | <%_ if (options.lang !== 'en') { _%> 28 | locale.use(lang) 29 | <%_ } _%> 30 | app.use(ElButton) 31 | <%_ } _%> 32 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 花果山前端团队 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | ansi-styles@^4.1.0: 6 | version "4.3.0" 7 | resolved "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937" 8 | integrity sha1-7dgDYornHATIWuegkG7a00tkiTc= 9 | dependencies: 10 | color-convert "^2.0.1" 11 | 12 | chalk@^4.1.0: 13 | version "4.1.0" 14 | resolved "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a" 15 | integrity sha1-ThSHCmGNni7dl92DRf2dncMVZGo= 16 | dependencies: 17 | ansi-styles "^4.1.0" 18 | supports-color "^7.1.0" 19 | 20 | color-convert@^2.0.1: 21 | version "2.0.1" 22 | resolved "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" 23 | integrity sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM= 24 | dependencies: 25 | color-name "~1.1.4" 26 | 27 | color-name@~1.1.4: 28 | version "1.1.4" 29 | resolved "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" 30 | integrity sha1-wqCah6y95pVD3m9j+jmVyCbFNqI= 31 | 32 | figlet@^1.5.0: 33 | version "1.5.0" 34 | resolved "https://registry.npm.taobao.org/figlet/download/figlet-1.5.0.tgz?cache=0&sync_timestamp=1594598448603&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffiglet%2Fdownload%2Ffiglet-1.5.0.tgz#2db4d00a584e5155a96080632db919213c3e003c" 35 | integrity sha1-LbTQClhOUVWpYIBjLbkZITw+ADw= 36 | 37 | has-flag@^4.0.0: 38 | version "4.0.0" 39 | resolved "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" 40 | integrity sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s= 41 | 42 | supports-color@^7.1.0: 43 | version "7.2.0" 44 | resolved "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611719015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da" 45 | integrity sha1-G33NyzK4E4gBs+R4umpRyqiWSNo= 46 | dependencies: 47 | has-flag "^4.0.0" 48 | -------------------------------------------------------------------------------- /generator/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api, opts, rootOptions) => { 2 | // 暂时不支持多语言 3 | opts.lang = 'en' 4 | // opts.import = 'full' // full/partial 5 | // opts.customTheme = false // true /false 6 | 7 | const utils = require('./utils')(api) 8 | 9 | api.extendPackage({ 10 | dependencies: { 11 | 'element3': '^0.0.26' 12 | } 13 | }) 14 | 15 | api.injectImports(api.entryFile, `import installElement3 from './plugins/element.js'`) 16 | 17 | api.render({ 18 | './src/plugins/element.js': './templates/src/plugins/element.js.ejs', 19 | './src/App.vue': './templates/src/App.vue.ejs' 20 | }) 21 | 22 | if (opts.import === 'partial') { 23 | // 暂不支持css分包 24 | // api.extendPackage({ 25 | // devDependencies: { 26 | // 'babel-plugin-component': '^1.1.1' 27 | // } 28 | // }) 29 | } else if (opts.customTheme) { 30 | api.render({ 31 | './src/element-variables.scss': './templates/src/element-variables.scss.ejs' 32 | }) 33 | api.extendPackage({ 34 | devDependencies: { 35 | 'sass-loader': '^10.0.4', 36 | 'sass': '^1.27.0' 37 | } 38 | }) 39 | } 40 | 41 | api.afterInvoke(() => { 42 | const { EOL } = require('os') 43 | const fs = require('fs') 44 | const contentMain = fs.readFileSync(api.resolve(api.entryFile), { encoding: 'utf-8' }) 45 | const lines = contentMain.split(/\r?\n/g) 46 | 47 | const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)\.mount\('#app'\)/)) 48 | lines[renderIndex] = `const app = createApp(App)` 49 | lines[renderIndex + 1] = `installElement3(app)` 50 | lines[renderIndex + 2] = `app.mount('#app')` 51 | 52 | fs.writeFileSync(api.resolve(api.entryFile), lines.join(EOL), { encoding: 'utf-8' }) 53 | }) 54 | 55 | api.onCreateComplete(() => { 56 | // 暂不支持按需加载 57 | // if (opts.import === 'partial') { 58 | // utils.updateBabelConfig(cfg => { 59 | // const pluginComponent = ['component', { 60 | // 'libraryName': 'element3', 61 | // 'styleLibraryName': 'theme-chalk' 62 | // }] 63 | // cfg.plugins = cfg.plugins || [] 64 | // cfg.plugins.push(pluginComponent) 65 | // return cfg 66 | // }) 67 | // } 68 | }) 69 | } 70 | --------------------------------------------------------------------------------