|
|
@@ -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) 的用户，我们也准备了相应的模板，同样可以直接下载使用。
|
|
|
|
|
|
-### 注册组件
|
|
|
+如果不希望使用我们提供的模板，请继续阅读。
|
|
|
|
|
|
-引入整个 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
|
|
|
```
|
|
|
+各个组件的使用方法请参阅它们各自的文档。
|
Leopoldthecoder