From dbb6d1aeba6e11e0280df74f2a24bc34234bed85 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Sun, 30 Oct 2016 16:24:48 +0800 Subject: [PATCH] update English installation and quickstart docs --- src/pages/en/README.md | 130 ++++++++----------- src/pages/en/quickstart.md | 215 ++++++++++++++++++++++++++++++++ src/pages/en2/README.md | 119 ++++++++---------- src/pages/en2/quickstart.md | 219 +++++++++++++++++++++++++++++++++ src/pages/zh-cn/quickstart.md | 2 +- src/pages/zh-cn2/README.md | 14 +++ src/pages/zh-cn2/quickstart.md | 2 +- 7 files changed, 556 insertions(+), 145 deletions(-) diff --git a/src/pages/en/README.md b/src/pages/en/README.md index 97f703c..f2e4fb8 100644 --- a/src/pages/en/README.md +++ b/src/pages/en/README.md @@ -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 + + + + +``` + + +### Hello world +If you are using CDN, a Hello world page is easy to code with Mint UI. + +```html + + + + + + + + +
+ Button +
+ + + + + + + +``` + +If you are using npm and wish to apply webpack, please continue to the next page: Quick Start。 diff --git a/src/pages/en/quickstart.md b/src/pages/en/quickstart.md index e69de29..907f142 100644 --- a/src/pages/en/quickstart.md +++ b/src/pages/en/quickstart.md @@ -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 }] + ] +} +``` + +
+ +**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" + } +} +``` + +
+ +**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. diff --git a/src/pages/en2/README.md b/src/pages/en2/README.md index eab2844..7d15091 100644 --- a/src/pages/en2/README.md +++ b/src/pages/en2/README.md @@ -1,83 +1,72 @@ # Mint UI documentation -------------- +This part introduces installation and basic usage of Mint UI. -# Installation +------------- +### npm +Installing with npm is recommended, for it works seamlessly with [webpack](https://webpack.js.org/). ```shell -npm install mint-ui --save +npm i mint-ui -S ``` -# Usage - -Import all components +### CDN +Get the latest version from [unpkg.com/mint-ui](https://unpkg.com/mint-ui/), and import JavaScript and CSS file in your page. -```javascript -import Vue from 'vue'; -import MintUI from 'mint-ui'; -import 'mint-ui/lib/style.css'; - -Vue.use(MintUI); +```html + + + + ``` -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); +### Hello world +If you are using CDN, a Hello world page is easy to code with Mint UI. + +```html + + + + + + + + +
+ Button +
+ + + + + + + ``` + -## Use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component) +If you are using npm and wish to apply webpack, please continue to the next page: Quick Start。 -Style sheet will be automatically imported +
-```javascript -import Vue from 'vue'; -import MintUI from 'mint-ui'; +**About event handlers** -Vue.use(MintUI); +In Vue 2.0, to listen for a native DOM event on a component, you'll need to use the `.native` modifier: +```html +Click Me ``` - -import on demand -```javascript -import Vue from 'vue'; -import { Cell, Button } from 'mint-ui'; - -Vue.component(Cell.name, Cell); -Vue.component(Button.name, Button); +For the sake of usability, we handled the `Button` component so that it can listen to `click` events: +```html +Click Me ``` - -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); -``` - -## 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 } - ]]] -} -``` - - +But for other components, the `.native` modifier is still required. diff --git a/src/pages/en2/quickstart.md b/src/pages/en2/quickstart.md index e69de29..4cc6af7 100644 --- a/src/pages/en2/quickstart.md +++ b/src/pages/en2/quickstart.md @@ -0,0 +1,219 @@ +# Quick start + +This part walks you through the process of using Mint UI in a webpack project. + +----------- + +## Use Starter Kit + +We provide a general [project template](https://github.com/mint-ui/mint-ui-starter) for you. If you prefer not to use it, please read the following. + +## 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 }] + ] +} +``` + +
+ +**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": "^2.0.4", + "vue": "^2.0.3" + }, + "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": "^9.5.1", + "webpack": "2.1.0-beta.22", + "webpack-dev-server": "^2.1.0-beta.0" + } +} +``` + +
+ +**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', + render: h => h(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', + render: h => h(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. diff --git a/src/pages/zh-cn/quickstart.md b/src/pages/zh-cn/quickstart.md index 232a499..5d409ad 100644 --- a/src/pages/zh-cn/quickstart.md +++ b/src/pages/zh-cn/quickstart.md @@ -178,7 +178,7 @@ npm install babel-plugin-component -D } ``` -如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容： +如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容： ```javascript import Vue from 'vue' diff --git a/src/pages/zh-cn2/README.md b/src/pages/zh-cn2/README.md index e468c3f..29e919b 100644 --- a/src/pages/zh-cn2/README.md +++ b/src/pages/zh-cn2/README.md @@ -59,3 +59,17 @@ npm i mint-ui -S 如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。 + +
+ +**关于事件绑定** + +在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 `.native` 修饰符： +```html +Click Me +``` +从易用性的角度出发，我们对 `Button` 组件进行了处理，使它可以监听 `click` 事件： +```html +Click Me +``` +但是对于其他组件，还是需要添加 `.native` 修饰符。 diff --git a/src/pages/zh-cn2/quickstart.md b/src/pages/zh-cn2/quickstart.md index 499ad77..ccf44f7 100644 --- a/src/pages/zh-cn2/quickstart.md +++ b/src/pages/zh-cn2/quickstart.md @@ -182,7 +182,7 @@ npm install babel-plugin-component -D } ``` -如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容： +如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容： ```javascript import Vue from 'vue'