创建uniapp项目(解决报错[Vue warn]: Unhandled error during execution of async component loader)

首先使用HBuilder X编辑器新建项目:

HBulid X 编辑器下载地址:https://www.dcloud.io/hbuilderx.html

创建uniapp项目(解决报错[Vue warn]: Unhandled error during execution of async component loader)_第1张图片

此时,一个uniapp的项目就创建完成了!

下一步导入组件库uview-plus:

这里我没有使用npm进行下载,而是通过拉取源码至项目中,以便于日后可以自己修改组件库中的组件。

需要注意!!如果你的项目创建用的是vue2,点击此处链接进行下载:uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场

如果是vue3,点击此处下载:uview-plus3.0重磅发布,全面的Vue3移动组件库。 - DCloud 插件市场

以vue3为例:

创建uniapp项目(解决报错[Vue warn]: Unhandled error during execution of async component loader)_第2张图片

 点击 打开HBuild X 后,会弹出来下图:

创建uniapp项目(解决报错[Vue warn]: Unhandled error during execution of async component loader)_第3张图片

点击确认后,项目中会自动增加 uni_modules文件夹,展开是这样的(如果是使用vue2去下载的,那么文件夹里面的便是uview-ui):

创建uniapp项目(解决报错[Vue warn]: Unhandled error during execution of async component loader)_第4张图片

此时只是将组件库拉了下来,下面我们需要进行配置以及导入:

第一步:

// 安装sass
npm i sass -D

// 安装sass-loader
npm i sass-loader -D

第二步:

在项目根目录中的 main.js 中,引入并使用uview-plus的JS库,注意这两行要放在const app = createSSRApp(App)之后

创建uniapp项目(解决报错[Vue warn]: Unhandled error during execution of async component loader)_第5张图片 

上图代码(复制即可):

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import uviewPlus from '@/uni_modules/uview-plus'
export function createApp() {
  const app = createSSRApp(App)
	app.use(uviewPlus)
  return {
    app
  }
}
// #endif

如果是vue2,上图代码应为(复制即可):

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
import uView from '@/uni_modules/uview-ui'
Vue.config.productionTip = false
Vue.use(uView)
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

第三步:在项目根目录的 uni.scss 中引入

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

第四步:App.vue 中首行的位置引入,注意给style标签加入 lang="scss" 属性

这样就完成啦!!!

注意:如果是vue2项目,除了第二步代码要更改,第三步和第四步的文件路径中应将 uview-plus 改成 uview-ui

你可能感兴趣的:(uni-app)