vscode html引用 element ui 和mui

2024-02-17 10:22:40

vscode html引用 element ui 和mui

引用 Element UI

一共要引入三个文件
1. vue.js
2. elementui.js
3. elementui.css

要注意的是引入vue.js 的时候，一定要在elementui.js上面，不然没有效果

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

上面是官网的
我这里是已经下载到了本地common.js里面有element ui 的css样式文件

document.write('<link href="../script/css/mui.css">');
document.write('<link href="../script/css/elementui.css" rel="stylesheet">');
document.write('<link href="../script/css/mui.loading.css" rel="stylesheet">');
document.write('<link href="../script/css/mui.picker.all.css" rel="stylesheet">');
document.write('<link href="../script/css/mui.min.css" rel="stylesheet">  ');
document.write('<link href="../script/css/mui.picker.css" rel="stylesheet"> ');
document.write('<link href="../script/css/mui.picker.min.css" rel="stylesheet">');

action.js里面有element ui 的js文件


document.write('<script src="../script/js/vue.js"></script>');
document.write('<script src="../script/js/axios.js"></script>');
document.write('<script src="../script/js/axios.min.js"></script>');
document.write('<script src="../script/js/mui.js"></script>');
document.write('<script src="../script/js/mui.min.js"></script>');
document.write('<script src="../script/js/mui.picker.all.js"></script>');
document.write('<script src="../script/js/elementui.js"></script>');
document.write('<script src="../script/js/mui.loading.js"></script>');

**因为我把js和css都放在了公共文件里面，所以直接引用common.js和action.js
**效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <script src="../script/commonjs/common.js"></script>
    <script src="../script/commonjs/action.js"></script>
    <script src="../script/commonjs/global.js"></script>

</head>


<style>

</style>

<body>
    <div id="app">
        <el-table :data="tableData" height="250" border 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>
    </div>



</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false
            }
        }
    })
</script>

</html>

引入mui
跟上面的一模一样
去下载mui.js和mui.css
效果：

   <div id="app" class="mui-input-group">
        <div class="mui-input-row">
            <label>用户名</label>
        <input type="text" class="mui-input-clear" v-model="user.name"    placeholder="请输入用户名">
        </div>
        <div class="mui-input-row">
            <label>密码</label>
            <input type="password" class="mui-input-password" v-model="user.password" placeholder="请输入密码">
        </div>
        <div class="mui-button-row">
            <button type="button" class="mui-btn mui-btn-primary" v-on:click="save">确认</button>
            <button type="button" class="mui-btn mui-btn-danger" >取消</button>
        </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">Item 1</li>
            <li class="mui-table-view-cell">Item 2</li>
            <li class="mui-table-view-cell">Item 3</li>
        </ul>
   </div>

码农公寓

vscode html引用 element ui 和mui

相关文章