mirror of https://github.com/ElemeFE/element
update quickstart
Leopoldthecoder
cinwell.li
parent
56b23359d3
commit
2d09b9598c
|
|
@ -1,53 +0,0 @@
|
|||
## 开发指南
|
||||
|
||||
开发之前需要配置好 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>。
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
## 安装
|
||||
|
||||
### 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 使用，请阅读下一节：快速上手。
|
||||
|
|
|
|||
|
|
@ -1,59 +1,179 @@
|
|||
## 快速上手
|
||||
|
||||
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) 的用户，我们也准备了相应的模板，同样可以直接下载使用。
|
||||
|
||||
如果不希望使用我们提供的模板，请继续阅读。
|
||||
|
||||
### 配置文件
|
||||
|
||||
新建项目，项目结构为
|
||||
```text
|
||||
|- src/ --------------------- 项目源代码
|
||||
|- App.vue --------------
|
||||
|- main.js -------------- 入口文件
|
||||
|- .babelrc ----------------- babel 配置文件
|
||||
|- index.html --------------- HTML 模板
|
||||
|- package.json ------------- npm 配置文件
|
||||
|- README.md ---------------- 项目帮助文档
|
||||
|- webpack.config.json ------ webpack 配置文件
|
||||
```
|
||||
|
||||
### 注册组件
|
||||
|
||||
引入整个 Element
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import 'element-ui/lib/theme-default/index.css'
|
||||
|
||||
Vue.use(Element)
|
||||
```
|
||||
|
||||
或者只引入你需要的组件
|
||||
|
||||
**使用 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)**
|
||||
|
||||
```javascript
|
||||
import {
|
||||
Select,
|
||||
Button
|
||||
// ...
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.component(Select.name, Select)
|
||||
Vue.component(Button.name, Button)
|
||||
```
|
||||
|
||||
将会被翻译成
|
||||
|
||||
```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';
|
||||
|
||||
Vue.component(Select.name, Select);
|
||||
Vue.component(Button.name, Button);
|
||||
```
|
||||
|
||||
### babel-plugin-component
|
||||
|
||||
配置 .babelrc
|
||||
几个配置文件的典型配置如下：
|
||||
|
||||
**.babelrc**
|
||||
```json
|
||||
{
|
||||
"plugins": ["xxx", ["component", [
|
||||
"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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<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
|
||||
}
|
||||
})
|
||||
])
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### 引入 Element
|
||||
|
||||
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
|
||||
|
||||
#### 完整引入
|
||||
|
||||
在 main.js 中写入以下内容：
|
||||
```javascript
|
||||
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)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
```
|
||||
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
|
||||
|
||||
#### 按需引入
|
||||
|
||||
借助 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。
|
||||
|
||||
首先，安装 babel-plugin-component：
|
||||
|
||||
```bash
|
||||
npm install babel-plugin-component -D
|
||||
```
|
||||
|
||||
然后，将 .babelrc 修改为：
|
||||
```json
|
||||
{
|
||||
"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'
|
||||
|
||||
这里用 unpkg cdn 做示范。请先引入 Vue 再引入组件，加载完成后会自动注册，参考 [示例](https://codepen.io/anon/pen/ozYpNA)。
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
/* 或写为
|
||||
* Vue.use(Button)
|
||||
* Vue.use(Select)
|
||||
*/
|
||||
|
||||
```html
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="//unpkg.com/element-ui@1.0.0-rc.4/lib/theme-default/index.css">
|
||||
|
||||
<!-- 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>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
```
|
||||
|
||||
### 多语言设置
|
||||
|
||||
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
|
||||
|
||||
```bash
|
||||
// 完整引入 Element
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
|
||||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
或
|
||||
|
||||
```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
|
||||
```
|
||||
各个组件的使用方法请参阅它们各自的文档。
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
[
|
||||
{
|
||||
"name": "安装指南",
|
||||
"name": "开发指南",
|
||||
"children": [{
|
||||
"path": "/installation",
|
||||
"name": "安装"
|
||||
},{
|
||||
"path": "/quickstart",
|
||||
"name": "快速上手"
|
||||
}, {
|
||||
"path": "/development",
|
||||
"name": "开发指南"
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue