html项目引入element-ui和vue【转载】
本地引用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/element-ui@2.15.7/lib/index.js
element.css: https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css
图标文件：https://unpkg.com/browse/element-ui@2.10.1/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
