不使用vue-cli 搭建vue项目

公司最近的项目==对之前的基于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 这种格式…

不使用vue-cli 搭建vue项目相关推荐

vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目源码(欢迎star): 前端项目代码后端项目代码系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
vue CLI脚手架搭项目
1.安装 node.js环境官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到安装完成后cmd打开终端,输入node -v ,npm - ...
使用Vue cli创建Vue项目
使用Vue cli创建Vue项目第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...
使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...

不使用vue-cli 搭建vue项目

不使用vue-cli 搭建vue项目相关推荐

最新文章

热门文章