本地引用element-ui和vue
<link rel="stylesheet" type="text/css" href="./element.css"> <script src="./js/vue.js"></script> <script src="./js/element.js"></script>
之后在你的html页面中可以任意的使用element-ui组件了，包括一些element-ui的图标等
这就需要我们把vue和element-ui下载到本地了。
下载地址 vue.js： https://cdn.jsdelivr.net/npm/vue/dist/vue.js
element.js: https://unpkg.com/[email protected]/lib/index.js
element.css: https://unpkg.com/[email protected]/lib/theme-chalk/index.css
图标文件：https://unpkg.com/browse/[email protected]/lib/theme-chalk/fonts/，放到element-ui.css同级新建fonts目录，把字体放进去。
我是粘贴复制到本地的，注意element-ui使用的是2.15.7版本的。
html中引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./marketManagement.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./element.css">
<script src="./js/vue.js"></script>
<script src="./js/element.js"></script>
</head>
<body>
<div id="market-app">
<div class="title-container">查询</div>
<div class="search-container">
<el-form
:label-position="labelPosition"
label-width="80px"
style="width: 100%; height: 200px"
:model="marketForm">
<el-row :gutter="10">
<el-col :span="10">
<el-form-item label="A">
<el-input v-model="marketForm.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="B">
<el-input v-model="marketForm.region"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="C">
<el-input v-model="marketForm.type"></el-input>
</el-form-item>
<el-form-item label="D">
<el-input v-model="marketForm.type"></el-input>
</el-form-item>
<el-form-item label="E">
<el-input v-model="marketForm.type"></el-input>
</el-form-item>
</el-form>
</div>
<div class="title-container">查询结果</div>
</div>
<script>
new Vue({
el: '#market-app',
data (){
return {
labelPosition: 'right',
marketForm: {
}
}
}
})
</script>
</body>
</html>
参考文章： https://www.cnblogs.com/TheYouth/p/16035056.html
标签：vue,js,html,ui,https,element From： https://www.cnblogs.com/zspwf/p/16810785.html