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 安装
|
||||||
推荐使用 npm 的方式安装，它能更好的和 [webpack](https://webpack.js.org/) 打包工具配合使用。
|
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
npm i element-ui@next -D
|
npm i element-ui@next -D
|
||||||
|
|
@ -19,7 +19,7 @@ npm i element-ui@next -D
|
||||||
```
|
```
|
||||||
|
|
||||||
### Hello world
|
### 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
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
@ -51,3 +51,4 @@ npm i element-ui@next -D
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
|
||||||
|
|
|
||||||
|
|
@ -1,59 +1,179 @@
|
||||||
## 快速上手
|
## 快速上手
|
||||||
|
|
||||||
Element 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。
|
本节将介绍如何在项目中使用 Element。
|
||||||
|
|
||||||
### 安装
|
### 使用 Starter Kit
|
||||||
|
|
||||||
```bash
|
我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于熟悉 [cooking](https://github.com/ElementUI/element-cooking-starter) 或 [Laravel](https://github.com/ElementUI/element-in-laravel-starter) 的用户，我们也准备了相应的模板，同样可以直接下载使用。
|
||||||
$ npm install element-ui@next -S
|
|
||||||
|
如果不希望使用我们提供的模板，请继续阅读。
|
||||||
|
|
||||||
|
### 配置文件
|
||||||
|
|
||||||
|
新建项目，项目结构为
|
||||||
|
```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
|
```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",
|
"libraryName": "element-ui",
|
||||||
"styleLibraryName": "theme-default"
|
"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
|
new Vue({
|
||||||
<!-- 引入样式 -->
|
el: '#app',
|
||||||
<link rel="stylesheet" href="//unpkg.com/element-ui@1.0.0-rc.4/lib/theme-default/index.css">
|
render: h => h(App)
|
||||||
|
})
|
||||||
<!-- 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>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 多语言设置
|
||||||
|
|
||||||
|
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": [{
|
"children": [{
|
||||||
"path": "/installation",
|
"path": "/installation",
|
||||||
"name": "安装"
|
"name": "安装"
|
||||||
},{
|
},{
|
||||||
"path": "/quickstart",
|
"path": "/quickstart",
|
||||||
"name": "快速上手"
|
"name": "快速上手"
|
||||||
}, {
|
|
||||||
"path": "/development",
|
|
||||||
"name": "开发指南"
|
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue