700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 不使用vue-cli 搭建vue项目

不使用vue-cli 搭建vue项目

时间:2024-07-10 15:10:24

相关推荐

不使用vue-cli 搭建vue项目

公司最近的项目==对之前的基于js写的后台管理系统进行改版,要求新功能用vue开发,但同时还要对接上之前的系统,所以不能使用vue-cli搭建,也不能使用webpack打包,只能用最基本的引入script标签来搭建。

在网上查找这方面的资料好少,就连官网上也没有具体的介绍,无奈,只能自己摸索…

搭建路由还是采用vue-router来进行跳转

使用cdn的方式引入vue.js

<script src="/npm/vue/dist/vue.js"></script>/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文件,把他当做一个组件引入

ponent('menu1', function (resolve, reject) {$.get("../components/menu1.html").then(function (res) {resolve({template: res,mounted() {}})});});

**重点!这个异步加载只能挂载在服务器上,脚本是不能在本地请求本地资源的。

我这里搭建的是Apache,之后再用xammp启动,就可以运行了。

以上这个组件可以定义为全局组件也可以写在局部使用。

之后就是引入iview=

<link href="/iview/2.0.0-rc.17/styles/iview.css" rel="stylesheet"><script src="/iview/2.0.0-rc.17/iview.min.js"></script>

这个版本下可以直接使用Button,好像已经解决了非template/render下必须使用i-button 这种格式…

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
Vue-cli项目搭建

Vue-cli项目搭建

2020-10-22

vue-cli搭建项目

vue-cli搭建项目

2018-10-13

Vue-cli搭建vue基础项目

Vue-cli搭建vue基础项目

2018-11-30

用vue-cli搭建vue项目

用vue-cli搭建vue项目

2020-08-25