html項目引入element-ui和vue


場景是需要做一個內網的后端,不能訪問外網,所以需要本地引用element-ui和vue

<!--引入 element-ui 的樣式,-->
<link rel="stylesheet" type="text/css" href="./element.css">
<!-- 必須先引入vue,  后使用element-ui -->
<script src="./js/vue.js"></script>
<!-- 引入element 的組件庫-->
<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

  我是粘貼復制到本地的,注意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>

到了這里你會發現element的基礎樣式可以使用,但是icon會顯示不出來。那是因為你的css文件沒有連接到icon的文件中,那我們還需要下載兩個文件,

附上下載連接:兩個都要下載
https://unpkg.com/browse/element-ui@2.10.1/lib/theme-chalk/fonts/

放到css下的fonts目錄中。

我的項目目錄

參考文章: https://www.cnblogs.com/tdcqcrtd/p/12766715.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM