element-ui本地引用方法

之前写了讲element-ui下载到本地的方法:

https://blog.csdn.net/ttphoon/article/details/104653785

但是,下载下来后要去使用发现只有官方文档里的首个例子可以正常运行,之后的各个脚本执行都是样式无效的,需要去修改一些内容。

首先,引用本地element-ui

<script src="/static/html/common/vue.min.js"></script>
<script src="/static/html/template/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="/static/html/template/element-ui/lib/theme-chalk/index.css">

之后,在body里创建一个div

<div id="app">
//此处放入官网html代码
</div>

在div里放入官网的html部分代码,然后把style代码自己选个位置放。
最后,需要加入new Vue

 new Vue({
     
      el: '#app',
)} 

如果官网示例里有export default里有data 或methods的,则提取对应的内容放到new Vue里的data或methods即可即可。

<script>
    new Vue({
     
	      el: '#app',
	      data:function(){
     
      		return {
     
        		value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      		};
      	}
	})
  </script>

完整示例:

<!DOCTYPE html>
<html>
<head>
	<title>iview_test</title>
	
	<script src="/static/html/common/vue.min.js"></script>
	<script src="/static/html/template/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="/static/html/template/element-ui/lib/theme-chalk/index.css">
	
</head>
<body>
 
<div id="app">
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-time-picker
    is-range
    v-model="value"
    range-separator="-"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
</div>
 
<script>
    new Vue({
     
      el: '#app',
      data:function(){
     
		return {
     
			value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
				};
		}
	})
</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>
</body>
</html>

最后访问web界面:
element-ui本地引用方法_第1张图片

你可能感兴趣的:(element-ui,html/js/css,vue.js)