公司最近的項目==對之前的基於js寫的後臺管理系統進行改版,要求新功能用vue開發,但同時還要對接上之前的系統,所以不能使用vue-cli搭建,也不能使用webpack打包,只能用最基本的引入script標籤來搭建。
在網上查找這方面的資料好少,就連官網上也沒有具體的介紹,無奈,只能自己摸索…
搭建路由還是採用vue-router來進行跳轉
使用cdn的方式引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js
推薦一個查找CDN非常方便的網站-bootcdn
最新最新的版本可以找到~~
[ 問題1 ] 如何配置路由
最簡單的寫法-可以將路由寫在主頁面,也可以單獨引入文件
-----------index.html-----------
<div id="app">
<router-link to="/menu1">menu1</router-link>
<router-link to="/menu2">menu2</router-link>
<router-view></router-view>
</div>
<script src="routes.js"></script>
-----------routes.js-----------
new Vue({
el: '#app',
router
})
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/menu1'}, // 重定向
{path:'/menu1',component:menu1},
{path:'/menu2',component:menu2},
]
})
var menu1 = {template:'<p>我是菜單一</p>'};
var menu2 = {template:'<p>我是菜單二</p>'};
[ 問題2 ]如何引入獨立的.html文件
以上這種最基礎的寫法,僅僅可以寫入一些代碼片,在實際的開發中是往往不可能如此,一般都需要外部引入一整個.html文件
這裏的操作大概是要異步去加載.html文件,把他當做一個組件引入
Vue.component('menu1', function (resolve, reject) {
$.get("../components/menu1.html").then(function (res) {
resolve({
template: res,
mounted() {
}
})
});
});
**重點!這個異步加載只能掛載在服務器上,腳本是不能在本地請求本地資源的。
我這裏搭建的是Apache,之後再用xammp啓動,就可以運行了。
以上這個組件可以定義爲全局組件也可以寫在局部使用。
之後就是引入iview=
<link href="https://cdn.bootcss.com/iview/2.0.0-rc.17/styles/iview.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/iview/2.0.0-rc.17/iview.min.js"></script>
這個版本下可以直接使用Button,好像已經解決了非template/render下必須使用i-button 這種格式…