VUE 轉 UNI 時需要進行以下操作:
1. 安裝 vue-cli-plugin-uni 和 uni-app-template ,同時也需要安裝 vue-cli-service ,可以通過npm 或 yarn 進行安裝。
npm install -g @vue/cli-service npm install -g @dcloudio/vue-cli-plugin-uni npm install -g @dcloudio/uni-app-cli uni init my-uni-app
2. 創建一個 uni-app 項目。
vue create my-uni-app
3. 進入創建的 uni-app 項目,并安裝 vue-cli-plugin-uni 插件。
cd my-uni-app vue add uni
4. 編輯 vue.config.js 文件,修改 outputDir 和 publicPath。
module.exports = { outputDir: 'dist', publicPath: './' }
5. 修改 src/main.js 文件,將 Vue.use(VueRouter) 替換成 import VueRouter from 'vue-router'。
import Vue from 'vue' import App from './App.vue' import HelloWorld from './components/HelloWorld.vue' import VueRouter from 'vue-router' Vue.config.productionTip = false const routes = [ { path: '/', component: HelloWorld } ] const router = new VueRouter({ routes }) new Vue({ router, render: h =>h(App), }).$mount('#app')
6. 修改 uni-app 的各個頁面,注意使用 uni-app 提供的自定義組件和 API。
7. 運行 uni-app 項目。
npm run serve
8. 打包 uni-app 項目。
npm run build
9. 將打包后的 dist 目錄下的文件上傳到 HBuilderX 或者 APP 開發者工具,進行真機測試和發布。
以上就是 Vue 轉 UNI 的全部步驟,希望對大家有所幫助。