最新消息:

Vue 2.x 实战教程-使用Vue创建一个基于 Element UI 的脚手架

Vue fishpro 45浏览
文章目录
[隐藏]

1 使用 vue create 创建一个项目

vue create admin

注意使用 vue init webpack yourprojectname(项目名) 可以创建webpack项目,
在当前目录添加一个 admin 的 vue 目录,终端自动执行添加动作,如下代码所示:

�  Generating README.md...

�  Successfully created project admin.
�  Get started with the following commands:

 $ cd admin
 $ yarn serve

 WARN  Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.

2 vue 添加 element

切换到我们刚才创建的 admin 文件夹,使用 vue add element 所有步骤默认或熟人 y 直到创建成功

cd admin
vue add element

使用 yarn serve 验证下

yarn serve

显示结果

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.101:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

3 使用 vue 添加 router 路由

使用 vue add router 命令一路默认或熟人Y直到创建成功

vue add router

添加成功后,在 admin 中增加了 router 文件夹,其下有个 index.js
使用 yarn serve 验证下

yarn serve

home admin

4 新建一个基于 Element 的布局页面

  1. 在views目录下增加Main.vue
  2. 在 Main.vue
    下面 element ui 的代码从 element 官方拷贝
<template>
    <div class="main">
        <el-row :gutter="20">
        <el-col :span="14"><div class="grid-content bg-purple">
            <div>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</div>
            </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> 
        </el-row>
        <el-row>
            <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
        </el-row>
    </div>
</template>
<script>
export default {
     data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

运行效果

转载请注明:程序鱼 » Vue 2.x 实战教程-使用Vue创建一个基于 Element UI 的脚手架