把已经写好的Vue项目转成uni-app项目

先介绍一下我写的vue项目

我的vue项目采用的是：
vue+vuex+element+axios+vue-router+webpack+vue-cil
由于某些原因需要把我的项目转移成uni-app项目
（具体原因：相信了uni-app吹的牛b，一个套代码可以适用，安卓，IOS，微信小程序

经过了解，发现uni-app项目不支持vue-router。所以我的工作量就比较大了。

由于我的项目是采用了Vue-router搭建的路由，而且Vue-router的子路由什么的太好用了！。所以我得重写构写项目的路由。

我原本用Vue-router搭建路由的目的就是，把公共部分提取出来，用路由去渲染中间的模板。了解了uni-app后发现他自己也有一个路由，而且他的header和bottom导航也已经写完成了。所以我得去使用他的路由。
既然他已经帮忙写好了headr和底部导航所以我也就只采用了他的方法。

首先，新建一个uni-app

他的pages就相当于我项目中的src
首先我把我的login文件赋值到pages文件夹下。

然后我在去写路由，进入pages.json文件

在pages对象里写你的login页面的url地址

修改好后就可以运行看一下

运行ok，我们试试把刚才也的url复制在端口号后面看看login会不会出来

OK，发现我的login页面出来了。但是我的ui样式却全不见，因为我在我的vue项目中用到了element-ui在这里却没有。
所以我就需要来安装一下第三方插件了。
由于我习惯了用npm所以首先，我们用cmd进入项目的目录下用npm init用vue-cli来构建项目

这些选项可以百度一下vue-cli就知道了！
接下来就用npm install element-ui 来安装第三方插件

接下来你的项目下就会出现一个node_modules文件夹，在node_modules文件夹下找一下有没有element-ui文件夹，有就ok

安装完成，接下来就是注册一下element-ui看看能不能起效果，在mian.js文件中注册。

ok,接下来就是进行运行（进行检测）

发现我写的样式已经起效果了，引入第三方插件有用,接下来就可以用npm去安装其他会用到的插件。PS:(vue-router官方说用不了，所以页面中的跳转就需要使用他自带的uni路由了)

接下来我就需要引入我的index.vue文件，我把新建时候的index.vue删除了。把我自己的index.vue直接复制在pages文件夹下。

在我的项目中用到了，很多所以我全都得修改一下，但是在修改之前我们需要注册路由。（只举一个例子）

复制一个MyData.vue过来了。我需要在index.vue进行点击后跳转MyData页面。进入pages.json文件中写
和login页面的路由一样的写法，这时我就把index.vue的router-link改成navigator url= '../index/MyData'

开始运行，点击过后跳转成功

现在基本上所有的问题已经解决了。

把已经写好的Vue项目转成uni-app项目相关推荐

基于Vue开发的电商APP项目——蘑菇街app
基于Vue开发的电商APP项目--蘑菇街项目源码:https://github.com/Limna777/Shopmall.git 1.项目描述 2.使用的插件或第三方库 3.页面主要实现的功能 1 ...
Vue仿饿了么app项目总结
前言这是我的第一个基于Vue项目的作品,目的是把之前的前端知识累积加上目前流行的前端框架,以项目的形式展示出来. 大家在学习Vue的时候,可以将此项目作为学习Vue框架的一个模板 Vue仿饿了么ap ...
web项目打包成Native App
web项目打包成Native App 好长时间没有写过博客了,闲暇时分静下心来给大家分享一下web项目打包成Native App的小知识,最近公司的web项目都开发到收尾阶段了,也在把web项目打包成 ...
【SwiftUI项目】0011、SwiftUI项目-费用跟踪-记账App项目-第3/3部分 -日期指定选定-新增费用页面
SwiftUI小功能模块系列 0001.SwiftUI自定义Tabbar动画效果 0002.SwiftUI自定义3D动画导航抽屉效果 0003.SwiftUI搭建瀑布流-交错网格-效果 0004.Sw ...
android gdx 放进布局,Android - 将LibGDX项目放入Anroid App项目
我正在使用Android Studio ,我该如何将LibGDX项目放入Android App项目中(不是将Android App项目放入LibGDX项目中)? 这是将libGDX模块导入Androi ...
spring boot单模块项目改造成多模块项目
用idea创建项目,默认是单模块项目的.如果一个项目比较大,包含多个子系统,可能会有一些公共的东西,独立出来,在几个子系统中使用.这时候应该用多模块(Module)项目,所有子系统,以及公共模块,都在 ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
基于Vue开发的电商APP项目（仿蘑菇街）
项目源码已放到GitHub上,欢迎访问~ 项目地址:https://github.com/weining-zhang/mall 如果觉得有用请不要忘记右上角给个star哟~~ 说明:该项目是本人在学习 ...
vue项目打包成安卓app
创建cordova项目 cordova create folkmusic com.music.folkmusic musicapp 将新增项目中的www替换成vue打包出来的build文件例如:co ...
前端VUE项目打包成安卓APP
1.打包vue项目,在项目的根目录执行命令 npm run build,直至项目打包完成打开dist文件件,里面有一个index.html和static文件夹. 2.新建cordova项目 2.1安 ...

把已经写好的Vue项目转成uni-app项目

先介绍一下我写的vue项目

把已经写好的Vue项目转成uni-app项目相关推荐

最新文章

热门文章