把已經寫好的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'
在這裏插入圖片描述
開始運行,點擊過後跳轉成功
在這裏插入圖片描述
現在基本上所有的問題已經解決了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章