mirror of https://github.com/ElemeFE/element
351 lines
6.9 KiB
Markdown
351 lines
6.9 KiB
Markdown
## 快速上手
|
||
|
||
本节将介绍如何在项目中使用 Element。
|
||
|
||
### 使用 Starter Kit
|
||
|
||
我们提供了通用的[项目模板](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.js -------- webpack 配置文件
|
||
```
|
||
|
||
几个配置文件的典型配置如下：
|
||
|
||
**.babelrc**
|
||
```json
|
||
{
|
||
"presets": ["vue-app"]
|
||
}
|
||
```
|
||
|
||
<br>
|
||
|
||
**package.json**
|
||
```json
|
||
{
|
||
"name": "element-starter",
|
||
"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",
|
||
"vue": "^2.1.6"
|
||
},
|
||
"devDependencies": {
|
||
"babel-core": "^6.0.0",
|
||
"babel-loader": "^6.0.0",
|
||
"babel-preset-vue-app": "^1.2.0",
|
||
"cross-env": "^1.0.6",
|
||
"css-loader": "^0.23.1",
|
||
"file-loader": "^0.8.5",
|
||
"style-loader": "^0.13.1",
|
||
"vue-loader": "^9.8.0",
|
||
"webpack": "beta",
|
||
"webpack-dev-server": "beta"
|
||
}
|
||
}
|
||
```
|
||
|
||
<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'
|
||
},
|
||
module: {
|
||
loaders: [
|
||
{
|
||
test: /\.vue$/,
|
||
loader: 'vue-loader'
|
||
},
|
||
{
|
||
test: /\.js$/,
|
||
loader: 'babel-loader',
|
||
exclude: /node_modules/
|
||
},
|
||
{
|
||
test: /\.css$/,
|
||
loader: 'style-loader!css-loader'
|
||
},
|
||
{
|
||
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
|
||
loader: 'file-loader'
|
||
},
|
||
{
|
||
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
|
||
loader: 'file-loader',
|
||
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"
|
||
}
|
||
]]]
|
||
}
|
||
```
|
||
|
||
接下来，如果你只希望引入部分组件，比如 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)
|
||
})
|
||
```
|
||
|
||
完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/dev/components.json) 为准）
|
||
|
||
```javascript
|
||
import Vue from 'vue'
|
||
import {
|
||
Pagination,
|
||
Dialog,
|
||
Autocomplete,
|
||
Dropdown,
|
||
DropdownMenu,
|
||
DropdownItem,
|
||
Menu,
|
||
Submenu,
|
||
MenuItem,
|
||
MenuItemGroup,
|
||
Input,
|
||
InputNumber,
|
||
Radio,
|
||
RadioGroup,
|
||
RadioButton,
|
||
Checkbox,
|
||
CheckboxGroup,
|
||
Switch,
|
||
Select,
|
||
Option,
|
||
OptionGroup,
|
||
Button,
|
||
ButtonGroup,
|
||
Table,
|
||
TableColumn,
|
||
DatePicker,
|
||
TimeSelect,
|
||
TimePicker,
|
||
Popover,
|
||
Tooltip,
|
||
Breadcrumb,
|
||
BreadcrumbItem,
|
||
Form,
|
||
FormItem,
|
||
Tabs,
|
||
TabPane,
|
||
Tag,
|
||
Tree,
|
||
Alert,
|
||
Slider,
|
||
Icon,
|
||
Row,
|
||
Col,
|
||
Upload,
|
||
Progress,
|
||
Spinner,
|
||
Badge,
|
||
Card,
|
||
Rate,
|
||
Steps,
|
||
Step,
|
||
Carousel,
|
||
Scrollbar,
|
||
CarouselItem,
|
||
Collapse,
|
||
CollapseItem,
|
||
Cascader,
|
||
ColorPicker,
|
||
Loading,
|
||
MessageBox,
|
||
Message,
|
||
Notification
|
||
} from 'element-ui'
|
||
|
||
Vue.use(Pagination)
|
||
Vue.use(Dialog)
|
||
Vue.use(Autocomplete)
|
||
Vue.use(Dropdown)
|
||
Vue.use(DropdownMenu)
|
||
Vue.use(DropdownItem)
|
||
Vue.use(Menu)
|
||
Vue.use(Submenu)
|
||
Vue.use(MenuItem)
|
||
Vue.use(MenuItemGroup)
|
||
Vue.use(Input)
|
||
Vue.use(InputNumber)
|
||
Vue.use(Radio)
|
||
Vue.use(RadioGroup)
|
||
Vue.use(RadioButton)
|
||
Vue.use(Checkbox)
|
||
Vue.use(CheckboxGroup)
|
||
Vue.use(Switch)
|
||
Vue.use(Select)
|
||
Vue.use(Option)
|
||
Vue.use(OptionGroup)
|
||
Vue.use(Button)
|
||
Vue.use(ButtonGroup)
|
||
Vue.use(Table)
|
||
Vue.use(TableColumn)
|
||
Vue.use(DatePicker)
|
||
Vue.use(TimeSelect)
|
||
Vue.use(TimePicker)
|
||
Vue.use(Popover)
|
||
Vue.use(Tooltip)
|
||
Vue.use(Breadcrumb)
|
||
Vue.use(BreadcrumbItem)
|
||
Vue.use(Form)
|
||
Vue.use(FormItem)
|
||
Vue.use(Tabs)
|
||
Vue.use(TabPane)
|
||
Vue.use(Tag)
|
||
Vue.use(Tree)
|
||
Vue.use(Alert)
|
||
Vue.use(Slider)
|
||
Vue.use(Icon)
|
||
Vue.use(Row)
|
||
Vue.use(Col)
|
||
Vue.use(Upload)
|
||
Vue.use(Progress)
|
||
Vue.use(Spinner)
|
||
Vue.use(Badge)
|
||
Vue.use(Card)
|
||
Vue.use(Rate)
|
||
Vue.use(Steps)
|
||
Vue.use(Step)
|
||
Vue.use(Carousel)
|
||
Vue.use(Scrollbar)
|
||
Vue.use(CarouselItem)
|
||
Vue.use(Collapse)
|
||
Vue.use(CollapseItem)
|
||
Vue.use(Cascader)
|
||
Vue.use(ColorPicker)
|
||
|
||
Vue.use(Loading.directive)
|
||
|
||
Vue.prototype.$loading = Loading.service
|
||
Vue.prototype.$msgbox = MessageBox
|
||
Vue.prototype.$alert = MessageBox.alert
|
||
Vue.prototype.$confirm = MessageBox.confirm
|
||
Vue.prototype.$prompt = MessageBox.prompt
|
||
Vue.prototype.$notify = Notification
|
||
Vue.prototype.$message = Message
|
||
```
|
||
|
||
### 开始使用
|
||
|
||
至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：
|
||
|
||
```bash
|
||
# 执行如下命令后访问 localhost:8086
|
||
npm run dev
|
||
```
|
||
|
||
编译：
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
各个组件的使用方法请参阅它们各自的文档。
|