把已经写好的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'
在这里插入图片描述
开始运行,点击过后跳转成功
在这里插入图片描述
现在基本上所有的问题已经解决了。

猜你喜欢

转载自blog.csdn.net/a519637560/article/details/86236410
今日推荐