Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update English installation and quickstart docs #13

Merged
merged 1 commit into from
Oct 30, 2016
Merged

update English installation and quickstart docs #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
130 changes: 52 additions & 78 deletions src/pages/en/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,57 @@
# Mint UI documentation

-------------

# Installation

```shell
npm install mint-ui@1 --save
```

# Usage

Import all components

```javascript
import Vue from 'vue';
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(MintUI);
```

Or import on demand

```javascript
import Cell from 'mint-ui/lib/cell';
import 'mint-ui/lib/cell/style.css';

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';

Vue.component(Cell.name, Cell);
Vue.component(Button.name, Button);
```

## Use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
This part introduces installation and basic usage of Mint UI.

Style sheet will be automatically imported

```javascript
import Vue from 'vue';
import MintUI from 'mint-ui';

Vue.use(MintUI);
```

import on demand
```javascript
import Vue from 'vue';
import { Cell, Button } from 'mint-ui';

Vue.component(Cell.name, Cell);
Vue.component(Button.name, Button);
```

Equals to
```javascript
var Vue = require('vue');
var Cell = require('mint-ui/lib/cell');
require('mint-ui/lib/cell/style.css');

var Button = require('mint-ui/lib/button');
require('mint-ui/lib/button/style.css');

Vue.component(Cell.name, Cell);
Vue.component(Button.name, Button);
```
-------------
### npm
Installing with npm is recommended, for it works seamlessly with [webpack](https://webpack.js.org/).

## Install `babel-plugin-component`
```shell
npm i babel-plugin-component -D
```

Configure .babelrc like this
```json
{
"plugins": ["other-plugin", ["component", [
{ "libraryName": "mint-ui", "style": true }
]]]
}
```


npm i mint-ui@1 -S
```

### CDN
Get the latest version from [unpkg.com/mint-ui@1](https://unpkg.com/mint-ui@1/), and import JavaScript and CSS file in your page.

```html
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>
```


### Hello world
If you are using CDN, a Hello world page is easy to code with Mint UI.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css">
</head>
<body>
<div id="app">
<mt-button @click.native="handleClick">Button</mt-button>
</div>
</body>
<!-- import Vue before Mint UI -->
<script src="https://unpkg.com/vue@1/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>
<script>
new Vue({
el: '#app',
methods: {
handleClick: function() {
this.$toast('Hello world!')
}
}
})
</script>
</html>
```

If you are using npm and wish to apply webpack, please continue to the next page: <a v-link="'/en/quickstart'">Quick Start</a>。
215 changes: 215 additions & 0 deletions src/pages/en/quickstart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
# Quick start

This part walks you through the process of using Mint UI in a webpack project.

-----------

## Config files

Create a new project, and its structure should be
```text
|- src/ --------------------- source code
|- App.vue
|- main.js -------------- entry
|- .babelrc ----------------- babel config
|- index.html --------------- HTML template
|- package.json ------------- npm config
|- README.md ---------------- readme
|- webpack.config.json ------ webpack config
```

Typical configurations for these config files are:

**.babelrc**
```json
{
"presets": [
["es2015", { "modules": false }]
]
}
```

<br>

**package.json**
```json
{
"name": "my-project",
"description": "A Vue.js and Mint UI project",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8087",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"mint-ui": "^1.0.0",
"vue": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.13.2",
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"vue-loader": "^8.0.0",
"webpack": "2.1.0-beta.22",
"webpack-dev-server": "^2.1.0-beta.0"
}
}
```

<br>

**webpack.config.js**
```javascript
var path = require('path')
var webpack = require('webpack')

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}

```

## Import Mint UI

You can import Mint UI entirely, or just import what you need. Let's first take a look at full import.

### Full import

In main.js:
```javascript
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
el: '#app',
components: { App }
})
```
The above imports Mint UI entirely. Note that CSS file needs to be imported separately.

### On demand

With the help of [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), we can import components we actually need, making the project smaller than otherwise.

First install babel-plugin-component:

```bash
npm install babel-plugin-component -D
```

Then edit .babelrc:
```json
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
```

If you need Button and Cell, edit main.js:

```javascript
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* or
* Vue.use(Button)
* Vue.use(Cell)
*/

new Vue({
el: '#app',
components: { App }
})
```

## Start coding

Now you have implemented Vue and Mint UI to your project, and it's time to write your code. Start development mode:

```bash
# visit localhost:8087
npm run dev
```

Build:

```bash
npm run build
```
Please refer to each component's documentation to learn their usage.