admin管理员组文章数量:1577816
报错原因就是我在初始化创建项目时没搭建好,所以我这里进行了重新搭建,以下是详细步骤
首先使用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" 属性
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-plus/index.scss";
</style>
这样就完成啦!!!
注意:如果是vue2项目,除了第二步代码要更改,第三步和第四步的文件路径中应将 uview-plus 改成 uview-ui
版权声明:本文标题:创建uniapp项目(解决报错[Vue warn]: Unhandled error during execution of async component loader) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726224828a1061381.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论