ElementUI(1)：很好的前端开发框架

最新推荐文章于 2024-05-03 16:38:25 发布
最新推荐文章于 2024-05-03 16:38:25 发布
阅读量4.2k 收藏 9
点赞数 2
分类专栏： Vue.js + ElementUI 文章标签： elementui javascript 前端 Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dawn0718/article/details/122361317
版权

　　前面了解了EasyUI和LayUI，这两款前端开发框架很好，如果要论流行和热度显然不及ElementUI。

　　昨天晚上看了ElementUI，界面、功能、与Vue.js的配合的确是好，使得开发者更专注于界面设计和功能实现，其实，EasyUI和LayUI也应该可以的，为什么就没有这方面的开发案例呢？

　　实现了表格数据的修改和删除，增加也一样，按钮不好放就没有做，分页要连接数据库，暂时也没有做，后面再做，原理是相通的。

　　EasyUI和LayUI使用上都差不多，ElementUI有点别扭，但必须适应。

　　实现的界面：

　　计算机的配置信息多，为了在一个页面显示，集中起来，鼠标移动到详细信息字段上再显示，备注信息也是这样处理的，还可以处理图片，后面加二维码。

　　修改界面：

　　删除界面：

　　主页面computerList.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./CSS/computerList.css">
    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
    <title>Vue.js+Element-UI</title>
</head>
</body>
    <div id="app">
        <h1>计算机设备列表</h1>

        <div class="dataList">

            <template>
                <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ textAlign: 'center', backgroundColor: '#f9f9f9' }">
                    <!-- <el-table-column prop="" type="index" label="序号" width="50"></el-table-column> -->
                    <el-table-column prop="" label="操作" width="120" style="text-align: center;display:block;">
                        <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" @click="editRecord(scope.row,scope.$index)" circle></el-button>
                                <el-button type="danger" icon="el-icon-delete" @click="delRecord(scope.$index)" circle></el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="" label="序号" width="50"><template slot-scope="scope">{{scope.$index + 1 }}</template></el-table-column>
                    <el-table-column prop="C01" label="资产编号" width="160"></el-table-column>
                    <el-table-column prop="C02" label="资产类型" width="80"></el-table-column>
                    <el-table-column prop="C03" label="设备出厂类型" width="220"></el-table-column>
                    <el-table-column prop="C04" label="设备出厂编号" width="200"></el-table-column>
                    <el-table-column prop="C12" label="生产日期" width="100"></el-table-column>
                    <el-table-column prop="C13" label="生产商" width="80"></el-table-column>
                    <el-table-column prop="C14" label="购置时间" width="100"></el-table-column>
                    <el-table-column prop="C15" label="保修截止时间" width="120"></el-table-column>
                    <el-table-column prop="C16" label="购置渠道" width="100"></el-table-column>
                    <el-table-column prop="C17" label="价格" width="80"></el-table-column>
                    <el-table-column prop="C18" label="资产状态" width="80"></el-table-column>
                    <el-table-column prop="C20" label="财务资产编码" width="150"></el-table-column>

                    <el-table-column label="配置参数" width="100">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                            <p>CPU: {{ scope.row.C05 }}</p>
                            <p>内存大小: {{ scope.row.C06 }}</p>
                            <p>硬盘大小: {{ scope.row.C07 }}</p>
                            <p>主板: {{ scope.row.C08 }}</p>
                            <p>显卡: {{ scope.row.C09 }}</p>
                            <p>声卡: {{ scope.row.C10 }}</p>
                            <p>MAC地址: {{ scope.row.C11 }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">详细信息</el-tag>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>

                    <el-table-column label="简要说明" width="100">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <p>{{ scope.row.C20 }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">备注说明</el-tag>
                        </div>
                        </el-popover>
                    </template>
                    </el-table-column>

                </el-table>

                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagePara.pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagePara.page-size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="recordCount">
                </el-pagination>

            </template>

        </div>

        <el-dialog title="修改信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
                <div>

                    <el-form ref="form" :model="computerInfo" label-width="80px">

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="资产编号">
                                    <el-input v-model="computerInfo.C01"></el-input>
                                </el-form-item>
                
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="资产类型">
                                    <el-select v-model="computerInfo.C02" placeholder="请选择资产类型">
                                    <el-option label="台式机" value="台式机"></el-option>
                                    <el-option label="一体机" value="一体机"></el-option>
                                    <el-option label="笔记本" value="笔记本"></el-option>
                                    <el-option label="服务器" value="服务器"></el-option>
                                    </el-select>
                                </el-form-item>
                
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="出厂类型">
                                    <el-input v-model="computerInfo.C03"></el-input>
                                </el-form-item>  
                
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="出厂编号">
                                    <el-input v-model="computerInfo.C04"></el-input>
                                </el-form-item>  
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="CPU">
                                    <el-input v-model="computerInfo.C05"></el-input>
                                </el-form-item>  
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="内存大小">
                                    <el-input v-model="computerInfo.C06"></el-input>
                                </el-form-item>  
                        
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="硬盘大小">
                                    <el-input v-model="computerInfo.C07"></el-input>
                                </el-form-item>  
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="主板">
                                    <el-input v-model="computerInfo.C08"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="显卡">
                                    <el-input v-model="computerInfo.C09"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="声卡">
                                    <el-input v-model="computerInfo.C10"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="MAC地址">
                                    <el-input v-model="computerInfo.C11"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="生产日期">
                                    <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="computerInfo.C12" style="width: 200px;"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                        
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="生产商">
                                    <el-input v-model="computerInfo.C13"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="购置时间">
                                    <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="computerInfo.C14" style="width: 200px;"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">
                                    <el-form-item label="保修时间">
                                        <el-col :span="11">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="computerInfo.C15" style="width: 200px;"></el-date-picker>
                                        </el-col>
                                    </el-form-item>
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="购置渠道">
                                    <el-input v-model="computerInfo.C16"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple">

                                <el-form-item label="价格">
                                    <el-input v-model="computerInfo.C17"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="10"><div class="grid-content bg-purple">

                                <el-form-item label="资产状态">
                                    <el-checkbox-group v-model="computerInfo.C18">
                                    <el-checkbox label="正常使用" name="C18"></el-checkbox>
                                    <el-checkbox label="维修" name="C18"></el-checkbox>
                                    <el-checkbox label="库存" name="C18"></el-checkbox>
                                    <el-checkbox label="报废" name="C18"></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                        
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">

                                <el-form-item label="财务编码">
                                    <el-input v-model="computerInfo.C20"></el-input>
                                </el-form-item>
                        
                            </div></el-col>
                            <el-col :span="16"><div class="grid-content bg-purple">

                                <el-form-item label="备注">
                                    <el-input v-model="computerInfo.C19"></el-input>
                                </el-form-item>
                
                            </div></el-col>
                        </el-row>

                    </el-form>

                </div>

                <span slot="footer" class="dialog-footer" style="text-align: center;display:block;">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitUpdate()">确 定</el-button>
                </span>
        
        </el-dialog>

    </div>
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>    
    <script src="./JavaScript/computerList.js"></script>

</body>
</html>

 　　代码界面computerList.js：

var VueDataObj={
  dialogVisible:false,//修改信息窗口的显示
  editRecordIndex:0,//点击编辑后选中的行
  pagePara:{
      pageNum:1,
      pageSize:5,
  },
  recordCount:12,
  computerInfo:{
        C01:'',//资产编号
        C02:'',//资产类型
        C03:'',//设备出厂类型
        C04:'',//设备出厂编号
        C05:'',//CPU
        C06:'',//内存大小
        C07:'',//硬盘大小
        C08:'',//主板
        C09:'',//显卡
        C10:'',//声卡
        C11:'',//MAC地址
        C12:'',//生产日期
        C13:'',//生产商
        C14:'',//购置时间
        C15:'',//保修截止时间
        C16:'',//购置渠道
        C17:'',//价格
        C18:'',//资产状态
        C19:'',//简要说明
        C20:'',//财务资产编码
     },
     tableData:[]
};

var methods={
  delRecord(rowId){
    this.$confirm('是否确定删除该记录？')
    .then(_ => {
      this.tableData.splice(rowId,1);
    })
    .catch(_ => {});    
  },
  handleClose(){
    this.dialogVisible=false;
  },
  editRecord(row,selectRowIndex){
    // console.log(row);
    this.editRecordIndex=selectRowIndex;
    this.computerInfo={
      C01:row.C01,
      C02:row.C02,
      C03:row.C03,
      C04:row.C04,
      C05:row.C05,
      C06:row.C06,
      C07:row.C07,
      C08:row.C08,
      C09:row.C09,
      C10:row.C10,
      C11:row.C11,
      C12:row.C12,
      C13:row.C13,
      C14:row.C14,
      C15:row.C15,
      C16:row.C16,
      C17:row.C17,
      C18:row.C18,
      C19:row.C19,
      C20:row.C20, 
    };
    this.dialogVisible=true;
  },
  submitUpdate(){
    Vue.set(this.tableData,this.editRecordIndex,this.computerInfo);
    this.dialogVisible=false;
  },
  getAllRecord(){
    console.log("数组赋值");
    this.tableData=[{
      C01: 'YQCY-001-001-0001',
      C02: '台式机',
      C03: 'ThinkCenter M6500t-NO56',
      C04:'1234567890000000890',
      C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
      C06:'8',
      C07:'1000',
      C08:'',
      C09:'NVIDIA GeForce GT 730',
      C10:'Realtek High Definition Audio',
      C11:'1234-1234-1234',
      C12:'2018-12-31',
      C13:'联想',
      C14:'2019-12-31',
      C15:'2029-12-31',
      C16:'自购',
      C17:'9000',
      C18:'正常使用',
      C19:'这是一段简要的文字描述',
      C20:'101000024298',
    }, {
     C01: 'YQCY-001-001-0041',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'11111111123455555',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'DELL',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    }, {
     C01: 'YQCY-001-001-0501',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'1234567890111122225',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'IBM',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    }, {
      C01: 'YQCY-001-001-0033',
      C02: '台式机',
      C03: 'ThinkCenter M6500t-NO56',
      C04:'12345678901234567890',
      C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
      C06:'8',
      C07:'1000',
      C08:'',
      C09:'NVIDIA GeForce GT 730',
      C10:'Realtek High Definition Audio',
      C11:'1234-1234-1234',
      C12:'2018-12-31',
      C13:'HUAWEI',
      C14:'2019-12-31',
      C15:'2029-12-31',
      C16:'自购',
      C17:'9000',
      C18:'正常使用',
      C19:'这是一段简要的文字描述',
      C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0021',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'服务器',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '笔记本',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '笔记本',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '一体机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    }];

  }
};

var computed={};

var watch={};

var vm=new Vue({
    el:'#app',
    data:VueDataObj,
    methods,
    computed,
    watch,
    created:function(){
      this.getAllRecord();
    }
})

　　样式文件computerList.css：

#app {
    width:100%;
    margin:0 auto;
    text-align: center;
}

.el-table td, .el-table th {
    text-align: center;
} 
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 220px;
}

　　说明：

　　1、ElementUI参考页面地址：Element - The world's most popular Vue UI framework

　　2、ElementUI专注界面设计，数据处理可以使用Vue.js来处理。

　　3、信息折叠很好，对于字段很多的表的显示比较友好。比如：

                    <el-table-column label="配置参数" width="100">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                            <p>CPU: {{ scope.row.C05 }}</p>
                            <p>内存大小: {{ scope.row.C06 }}</p>
                            <p>硬盘大小: {{ scope.row.C07 }}</p>
                            <p>主板: {{ scope.row.C08 }}</p>
                            <p>显卡: {{ scope.row.C09 }}</p>
                            <p>声卡: {{ scope.row.C10 }}</p>
                            <p>MAC地址: {{ scope.row.C11 }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">详细信息</el-tag>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>


　　它将计算机的配置信息集中展示，可以信息的任意处理和组合，而且还可以是动态的。

　　4、表头字段的居中和背景颜色可以通过设置样式来实现：

<el-table :data="tableData" border style="width: 100%" :header-cell-style="{ textAlign: 'center', backgroundColor: '#f9f9f9' }">

　　5、一般标签居中的样式为（设置为块元素）：

style="text-align: center;display:block;"

　　6、Vue.js代码太长，我是分开写：

//定义数据
var VueDataObj={};
//定义方法
var methods={};
//定义计算属性
var computed={};
//定义监视
var watch={};
//定义Vue
var vm=new Vue({
    el:'#app',
    data:VueDataObj,
    methods,
    computed,
    watch,
    created:function(){}
})
dawn
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Element-UI简介
weixin_64704029的博客
08-07 9258
element-ui是一个前端的ui框架，封装了很多已经写好的ui组件，例如表单组件，布局组件，表格组件.......是一套桌面端组件。Element - 网站快速成型工具。
Vue基础（九）——ElementUI
pro1822的博客
09-01 3298
Vue基础（九）——ElementUI
深入探索Element-UI：构建高效Web前端的利器
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-03 1109
随着Vue 3的发布，Element-UI也迎来了新的迭代——Element Plus，鼓励开发者关注最新动态，探索更多可能性。无论是初学者还是经验丰富的开发者，持续学习和实践是提升技能的关键。希望本文能成为你掌握Element-UI的起点，开启高效Web前端开发的新篇章。💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
1.使用ElementUI搭建前端系统框架一
qixiang_chen的博客
02-20 3757
前后端分离系统需要分别建设前端和后端系统，前端系统通常使用VUE与一个前端框架开发比较容易实现，有实力的技术团队通常开发自己的前端框架，使用一些开源的前端框架开发效率更高，比如ElementUI、EasyUI、LayUI、Bootstrap等。本文使用ElemetUI框架搭建前端开发系统。 参考 https://blog.csdn.net/qixiang_chen/article/details...
dapper框架_Vue+ElementUI+.netcore前后端分离框架开发项目实战
weixin_39617685的博客
11-23 627
(给前端大学加星标，提升前端技能.)转自：我心依旧。cnblogs.com/-clouds/p/11633786.html框架采用.NET Core + Vue前后端分离，并且支持前端、后台代码业务动态扩展，框架内置了一套有着20多种属性配置的代码生成器，可灵活配置生成的代码，代码生成器界面配置完成即可生成单表(主表)的增、删、改、查、导入、导出、上传、审核基础功能。只需要简单了解即可上...
bootstrap后台管理系统前后台实现(含数据库)
热门推荐
pengyufight的博客
07-01 3万+
撰写本文档目的是让后续开发者在理解该系统架构的基础上遵循一定规范保持系统架构的合理性；同时也能够达到允许没有开发经验仅有web基础的入门开发者能够通过复制粘贴的方式仿照demo示例进行开发的目的。 目 录 1 案例调研与选取... 2 1.1 案例调研... 2 1.2 UI选取... 3 2 系统实现... 3 2.1 实...
Vue2.0 UI框架ElementUI使用方法详解
01-19
今天来介绍一下ElementUI的使用，在Vue2.0更新之后，很多UI框架也应运而生，这个框架是饿了么团队开发的一款适用于PC的一个UI框架，体验之后给我的个人感觉确实是有助于快速开发的一款UI框架，在饿了么GitHub中我...
Web前端之JavaScript框架学习总结.docx
11-22
Angular 是 Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增强了模块化开发的理念，与微软合作，采纳了 TypeScript 语法开发；对后台程序员友好，对前端程序员不太友好；...
vue-cms：基于Vue和ElementUI构建的一个企业级后台管理系统
02-06
基于Vue和ElementUI构建的企业级后台管理项目预览在线体验： ://git.io/fp9UM简介vue-cms是一个企业级管理后​​台项目，基于Vue和...实际上，它也是一个很好的学习项目，包含了一些常见问题的解决方案，例如：数据可
利用vue + element实现表格分页和前端搜索的方法
01-19
ElementUI是饿了么前端开源的一个基于Vue的前端框架，已经帮我们封装好了一系列功能性的组件，比如栅格系统、表格、表单、树形菜单、通知等。对于搞后台管理界面的项目，特别是不需要考虑兼容ie8、ie9以下的项目、...
搭建element-ui的Vue前端工程操作实例
08-27
本篇文章旨在分享搭建 element-ui 的 Vue 前端工程操作实例的步骤和过程，该实例具有很好的参考价值，希望对大家有所帮助。 一、安装 Node.js 和配置环境变量 在开始搭建 element-ui 的 Vue 前端工程之前，需要先...
后台友好的前端框架LayUI
daimeijin的博客
08-10 1362
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 LayUI入门 LayUI的官网 LayUI是开源模块化前端 UI 框架，由职业前端倾情打造，面向全层次的前后端开发者，易上手开箱即用的 Web UI 组件库。 入门指南 layui（谐音：类
NodeJs的安装与配置（安装包）
qq_62331938的博客
09-06 5117
上一篇文章分享了vue的路由，本文将分享nodejs的安装与配置。
jQuery UI vs EasyUI
weixin_34393428的博客
04-13 281
几个ＵＩ框架的比较k: 目前工作中可能会常用到几个ＵＩ框架，如 Ext: http://docs.sencha.com/ext-js/4-1/#!/example 感觉其过于复杂，性能不高，所以一直没有在项目中实践过。 YUI: http://yuilibrary.com/ Yahoo开发的一套ＵＩ框架，可惜不是基于jQuery的。 jQueryUI:　http://jqueryui.c...
前端：Element UI 多选框组用法笔记
IT技术分享社区
12-16 1747
今天给大家分享一下Element UI 多选框组用法笔记，直接上代码！<html> <head></head> <body> &l...
elementui基础学习
weixin_43714592的博客
12-31 1062
一、前后端分离 1.什么是前后端分离？ 前端和后端分离开 前端: 将浏览器中为用户进行页面展示的部分称之为前端 后端: 为前端提供业务逻辑和数据准备的所有代码统称为后端 前后端分工: ​ 前后端开发工作的分工就是前后端分离。 前后端分工;(错误的认识) 真的前后端分离: ​ 不仅仅是前端和后端的分工开发,而是架构的模式 2.交互形式 在前后端分离架构中，后端只需要负责按照约定的数据格...
传统elementui开发,nodeJS环境搭建
玉姬的博客
09-22 280
传统elementui开发 ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件 ElementUI官网 <!DOCTYPE html> <html> <head> ...
antdesign和elementui哪个好
09-13
综上所述，无论是antdesign还是elementui，都是优秀的前端框架，都有着各自的优势。选择哪个更好是根据具体需求和个人喜好来决定的。如果更偏重于阿里系的开发环境和设计风格，可以选择antdesign；如果更喜欢饿了么...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值