Skip to content

Commit

Permalink
Provide ES "module" field in package.json
Browse files Browse the repository at this point in the history
Also, added other available versions as well [#71]
  • Loading branch information
phoenixwong committed Aug 12, 2019
1 parent c497afe commit d0978c2
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 9 deletions.
28 changes: 22 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,27 @@ npm install vue2-timepicker --save
## Get Started

**Step 1:** Import VueTimepicker
### **Step 1:** Import VueTimepicker

**A:** Include the single file component (Recommended)
**Option A:** Import component JS and CSS

```javascript
// Import the *.vue file (CSS included)
// Main JS (in UMD format)
import VueTimepicker from 'vue2-timepicker'

// CSS
import 'vue2-timepicker/dist/VueTimepicker.css'
```

or, **B:** Include distribution files base on your needs
**Option B:** Import the single file component for SSR Usage

```javascript
// Import the *.vue file (CSS included)
// Note the `/sfc` suffix here
import VueTimepicker from 'vue2-timepicker/sfc'
```

**Option C:** Choose any bundle version base on your needs

```javascript
// JAVASCRIPT
Expand All @@ -65,9 +76,12 @@ import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'

// CSS
import 'vue2-timepicker/dist/VueTimepicker.css'

// *.vue (with CSS)
import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
```

**Step 2**: Include VueTimepicker in your component
### **Step 2**: Include VueTimepicker in your component

```javascript
var yourComponent = new Vue({
Expand All @@ -76,7 +90,9 @@ var yourComponent = new Vue({
})
```

**Step 3**: Then, you can introduce the `vue-timepicker` tag anywhere you like in your component's template
### **Step 3**: Introduce `vue-timepicker` in template

Then, you can introduce the `vue-timepicker` tag anywhere you like in your component's template

```html
<vue-timepicker></vue-timepicker>
Expand Down
10 changes: 7 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
{
"name": "vue2-timepicker",
"version": "0.2.2",
"version": "0.2.2-rc.0",
"description": "A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support",
"scripts": {
"dev": "cd demo && yarn serve",
"dev:init": "cd demo && yarn install",
"build": "vue-cli-service build --target lib --name VueTimepicker ./src/index.js",
"build:demo": "cd demo && yarn build"
},
"main": "src/index.js",
"main": "dist/VueTimepicker.umd.js",
"module": "dist/VueTimepicker.common.js",
"unpkg": "dist/VueTimepicker.umd.min.js",
"css": "dist/VueTimepicker.css",
"browser": {
"./sfc": "src/vue-timepicker.vue"
},
"repository": {
"type": "git",
"url": "git+https://github.com/phoenixwong/vue2-timepicker.git"
Expand Down Expand Up @@ -41,7 +46,6 @@
"dist/*",
"src/*",
"*.json",
"*.js",
"*.md"
],
"eslintConfig": {
Expand Down

0 comments on commit d0978c2

Please sign in to comment.