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

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

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

此时，一个uniapp的项目就创建完成了！

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

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

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

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

以vue3为例：

 点击 打开HBuild X 后，会弹出来下图：

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

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

第一步：

// 安装sass
npm i sass -D

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

第二步：

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

 

上图代码（复制即可）：

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