vscode html引用 element ui 和mui

2021-06-07 11:05:47 阅读：234 来源： 互联网

标签：vscode js write html element document mui css

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,js,write,html,element,document,mui,css
来源： https://blog.csdn.net/qq_43369949/article/details/117652477

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vscode html引用 element ui 和mui

vscode html引用 element ui 和mui