The latest articles on DEV Community by iamkun (@iamkun). https://dev.to/iamkun https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F557471%2F2f922d09-61be-471f-9e6f-0d7618dc6303.png https://dev.to/iamkun en iamkun Mon, 11 Jan 2021 14:02:08 +0000 https://dev.to/iamkun/element-ui-for-vue-3-0-is-coming-4o6o https://dev.to/iamkun/element-ui-for-vue-3-0-is-coming-4o6o <blockquote> <p>Element Plus, the first UI component library written in TypeScript + Vue 3.0 Composition API, is released today!</p> </blockquote> <p><a href="https://github.com/ElemeFE/element" rel="noopener noreferrer">Element UI</a>, which was born on 13th March 2016, has grown up from <a href="https://medium.com/@leopoldthecuber/element-a-vue-js-2-0-ui-toolkit-for-web-f6ed9d953758" rel="noopener noreferrer">an internal component library of Ele.me</a> to one of the most popular open-source UI component libraries in the Vue ecosystem within 4 years.</p> <p>Till now, Element has gotten <strong>48,800</strong> Github Stars and <strong>1,000,000</strong> NPM downloads per month. More than 530 contributors from the community have made 4400 commits to participate in the maintenance with our team.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fbcb93vm16ufoo33s7r04.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fbcb93vm16ufoo33s7r04.png" alt="Element team 40000 Github Star celebration"></a><br> *Element team 40000 Github Star celebration</p> <h2> Element Plus for Vue 3.0 </h2> <p>Vue has released it's 3.0 version in September 2020. To support the latest Vue 3.0 syntax, it's a great opportunity for Element UI to make a new major release with a lot of inner changes and improvements. </p> <p>After 23 alpha versions of heavy developing, we are glad to announce that Element Plus for Vue 3.0 Beta is available <strong>TODAY</strong>!</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6shy8cr5g1prad3nyx90.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6shy8cr5g1prad3nyx90.png" alt="Element Plus"></a></p> <p><a href="https://github.com/element-plus/element-plus" rel="noopener noreferrer">Element Plus</a> for Vue 3.0 is a brand new project using TypeScript + Composition API. We have rewritten almost every line of code using the Vue 3.0 way, mainly including:</p> <ul> <li>Use TypeScript for a better development experience, and provide a complete type definition</li> <li>Use Vue 3.0 Composition API to simplify and reuse the logic</li> <li>Use Teleport, a new feature introduced in Vue 3.0 to refactor the components</li> <li>Use <a href="https://github.com/iamkun/dayjs" rel="noopener noreferrer">Day.js</a>, a lighter and better date-time library</li> <li>Use Lerna to manage sub-projects</li> <li>Core dependencies upgrade such as Popper.js, Async-validator</li> <li>Improve i18n support for 52 languages</li> </ul> <p>Something more:</p> <ul> <li>Cool design language</li> <li>Optimized component API</li> <li>More customization options</li> <li>More detailed and friendly documentation</li> </ul> <h2> Get Started </h2> <p>There are many ways to try Element Plus for Vue 3.0 today.</p> <ul> <li>Manual installation <code>npm install element-plus</code>, check our website <a href="https://element-plus.org/#/en-US/component/installation" rel="noopener noreferrer">installation guide</a> for details</li> <li>We have provided a <a href="https://github.com/element-plus/element-plus-starter" rel="noopener noreferrer">Webpack scaffold</a> that you can use directly</li> <li>Also, a fresh and cool <a href="https://github.com/element-plus/element-plus-vite-starter" rel="noopener noreferrer">Vite scaffold</a> is available</li> <li>Via <a href="https://github.com/element-plus/vue-cli-plugin-element-plus" rel="noopener noreferrer">Vue CLI plugin</a> </li> </ul> <p>Do you like <a href="https://github.com/element-plus/element-plus" rel="noopener noreferrer">Element Plus</a>? Feel free to give us a <a href="https://github.com/element-plus/element-plus/stargazers" rel="noopener noreferrer">Star</a> ❤️ to support us.</p> <p>During the past 4 years, your favor and support, which make Element UI better and better, are much appreciated. Element UI cannot thrive without the community, you are warmly welcomed to join us on Github and make Element UI great.</p> javascript vue opensource typescript