Skip to content

E
Element
Commit 2d09b959 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by cinwell.li
Browse files
Options

update quickstart

parent 56b23359
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 99 deletions
examples/docs/zh-cn/development.md deleted 100644 → 0
View file @ 56b23359
## 开发指南
开发之前需要配置好 Node.js 和 npm 环境，其中 npm 需要 3.0 或以上版本。
### 目录结构
```text
|- examples/ -------------- 文档及示例页
|- docs/ -------------- 文档
|- component/
|- src/ --------------- 组件源码
|- packages/ -------------- 组件
|- scripts/ --------------- 打包配置
|- src/ ------------------- 公用代码
|- components.json -------- 组件列表
```
### 安装依赖
安装项目所需要的依赖以及子项目内的依赖。
```bash
npm run bootstrap
```
如果网络不是很理想，可以用国内镜像下载。新建一个 `.npmrc` 文件在当前项目下，同时配置镜像地址，例如：
```text
registry=https://registry.npm.taobao.org
```
然后再运行
```shell
PHANTOMJS_CDNURL=http://npm.taobao.org/mirrors/phantomjs npm run bootstrap
```
### 启动开发环境
启动完成后浏览器访问 [http://localhost:8085](http://localhost:8085)
```bash
npm run dev
```
### npm scripts
```bash
npm run dev # 启动开发环境
npm run dist # 打包组件
npm run dist:all # 单独打包每个子项目
npm run lint # 检测 js 代码风格
node bin/new.js [组件名] # 创建新组件
```
### 贡献代码
参考 <a href="https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md" target="_blank">贡献指南</a>。
examples/docs/zh-cn/installation.md
View file @ 2d09b959
## 安装
### npm 安装
推荐使用 npm 的方式安装，它能更好的和 [webpack](https://webpack.js.org/) 打包工具配合使用。
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
```shell
npm i element-ui@next -D
......@@ -19,7 +19,7 @@ npm i element-ui@next -D
```
### Hello world
通过 cdn 的方式我们可以很容易的使用 Element 写一个 Hello world 页面。[在线演示](http://codepen.io/QingWei-Li/pen/vXwJrY)
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](http://codepen.io/QingWei-Li/pen/vXwJrY)
```html
<!DOCTYPE html>
......@@ -51,3 +51,4 @@ npm i element-ui@next -D
</script>
</html>
```
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
examples/docs/zh-cn/quickstart.md
View file @ 2d09b959
## 快速上手
Element 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。
本节将介绍如何在项目中使用 Element。
### 安装
### 使用 Starter Kit
```bash
$ npm install element-ui@next -S
```
我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于熟悉 [cooking](https://github.com/ElementUI/element-cooking-starter) 或 [Laravel](https://github.com/ElementUI/element-in-laravel-starter) 的用户，我们也准备了相应的模板，同样可以直接下载使用。
### 注册组件
如果不希望使用我们提供的模板，请继续阅读。
引入整个 Element
### 配置文件
```javascript
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
新建项目，项目结构为
```text
|- src/ --------------------- 项目源代码
|- App.vue --------------
|- main.js -------------- 入口文件
|- .babelrc ----------------- babel 配置文件
|- index.html --------------- HTML 模板
|- package.json ------------- npm 配置文件
|- README.md ---------------- 项目帮助文档
|- webpack.config.json ------ webpack 配置文件
```
几个配置文件的典型配置如下：
Vue.use(Element)
**.babelrc**
```json
{
"presets": [
["es2015", { "modules": false }]
]
}
```
或者只引入你需要的组件
<br>
**package.json**
```json
{
"name": "my-project",
"description": "A Vue.js and Element project",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"element-ui": "^1.0.0-rc.8",
"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"
}
}
```
**使用 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)**
<br>
**webpack.config.js**
```javascript
import {
Select,
Button
// ...
} from 'element-ui'
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
}
})
])
}
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
```
将会被翻译成
### 引入 Element
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
#### 完整引入
在 main.js 中写入以下内容：
```javascript
import Select from 'element-ui/lib/select';
import 'element-ui/lib/theme-default/select.css';
import Button from 'element-ui/lib/button';
import 'element-ui/lib/theme-default/button.css';
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
Vue.use(ElementUI)
Vue.component(Select.name, Select);
Vue.component(Button.name, Button);
new Vue({
el: '#app',
render: h => h(App)
})
```
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
### babel-plugin-component
#### 按需引入
配置 .babelrc
借助 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
```bash
npm install babel-plugin-component -D
```
然后，将 .babelrc 修改为：
```json
{
"plugins": ["xxx", ["component", [
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
......@@ -62,18 +182,68 @@ Vue.component(Button.name, Button);
}
```
如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
```javascript
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
})
```
### 多语言设置
### 通过标签全局引入
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
这里用 unpkg cdn 做示范。请先引入 Vue 再引入组件，加载完成后会自动注册，参考 [示例](https://codepen.io/anon/pen/ozYpNA)。
```bash
// 完整引入 Element
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="//unpkg.com/element-ui@1.0.0-rc.4/lib/theme-default/index.css">
Vue.use(ElementUI, { locale })
```
<!-- body -->
或
<!-- 引入组件库 -->
<script src="//unpkg.com/vue@2.0.0-rc.6/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.0.0-rc.4/lib/index.js"></script>
```bash
// 按需引入 Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// 设置语言
locale.use(lang)
// 引入组件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
```
### 开始使用
至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：
```bash
# 执行如下命令后访问 localhost:8086
npm run dev
```
编译：
```bash
npm run build
```
各个组件的使用方法请参阅它们各自的文档。
examples/nav.config.json
View file @ 2d09b959
[
{
"name": "安装指南",
"name": "开发指南",
"children": [{
"path": "/installation",
"name": "安装"
},{
"path": "/quickstart",
"name": "快速上手"
}, {
"path": "/development",
"name": "开发指南"
}]
},
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment