先介绍一下我写的vue项目

我的vue项目采用的是:

vue+vuex+element+axios+vue-router+webpack+vue-cil

由于某些原因需要把我的项目转移成uni-app项目

(具体原因:相信了uni-app吹的牛b,一个套代码可以适用,安卓,IOS,微信小程序

vue项目转jquery vue项目转成uniapp_vue项目转jquery


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

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

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

首先,新建一个uni-app

vue项目转jquery vue项目转成uniapp_移动开发_02


他的pages就相当于我项目中的src

首先我把我的login文件赋值到pages文件夹下。

vue项目转jquery vue项目转成uniapp_移动开发_03


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

vue项目转jquery vue项目转成uniapp_移动开发_04


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

vue项目转jquery vue项目转成uniapp_Vue_05


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

vue项目转jquery vue项目转成uniapp_多平台兼容_06


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

vue项目转jquery vue项目转成uniapp_vue项目转jquery_07


OK,发现我的login页面出来了。但是我的ui样式却全不见,因为我在我的vue项目中用到了element-ui在这里却没有。

所以我就需要来安装一下第三方插件了。

由于我习惯了用npm所以首先,我们用cmd进入项目的目录下用npm init用vue-cli来构建项目

vue项目转jquery vue项目转成uniapp_uni-app_08


这些选项可以百度一下vue-cli就知道了!

接下来就用npm install element-ui 来安装第三方插件

vue项目转jquery vue项目转成uniapp_uni-app_09


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

vue项目转jquery vue项目转成uniapp_多平台兼容_10


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

vue项目转jquery vue项目转成uniapp_移动开发_11


ok,接下来就是进行运行(进行检测)

vue项目转jquery vue项目转成uniapp_vue项目转jquery_12


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

vue项目转jquery vue项目转成uniapp_vue项目转jquery_13


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

vue项目转jquery vue项目转成uniapp_vue项目转jquery_14


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

vue项目转jquery vue项目转成uniapp_多平台兼容_15


复制一个MyData.vue过来了。我需要在index.vue进行点击后跳转MyData页面。进入pages.json文件中写

vue项目转jquery vue项目转成uniapp_uni-app_16


和login页面的路由一样的写法,这时我就把index.vue的router-link改成navigator url= '../index/MyData'

vue项目转jquery vue项目转成uniapp_多平台兼容_17


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

vue项目转jquery vue项目转成uniapp_uni-app_18


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