uniapp创建Vue3项目总结_#ifndef vue3

一、创建项目 

1. 选择新建uni-app项目，输入项目名称，选择项目文件存放的位置，选择项目需要的模板。
2. 选择Vue 3 版本。
3. 点击创建，即可创建V3项目

二、vue3 main.js配置引用示例

import App from './App'
import uviewPlus from 'uview-plus'
// import '.env.js' //引入环境变量
 
// #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 store from './store'
 
// //语言配置
import { createI18n } from 'vue-i18n'
import messages from './locale/index'
const i18n = createI18n({
	locale:  uni.getLocale(), // 获取已设置的语言,
	legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
	globalInjection: true, // 全局注册$t方法
	messages
})
// 不能修改导出的 createApp 方法名，不能修改从 Vue 中导入的 createSSRApp。
export function createApp() {
  const app = createSSRApp(App)
  app.use(store).use(uviewPlus).use(i18n);
  /* // 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
  // 需要在app.use(uview-plus)之后执行
  uni.$u.setConfig({
  	// 修改$u.config对象的属性
  	config: {
  		// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
  		unit: 'rpx'
  	},
  }) */
  return {
      app
  }
}
// #endif

三、uni-app vue3 中 vuex 用法

import { createStore } from "vuex";
const store = createStore({
  state: {},
});
export default store;

四、uni-app Vue3 项目npm引用 uview-plus Ui 步骤

1、安装scss

npm i sass -D

2、准备工作

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y
 
// 安装
npm install uview-plus
npm install dayjs
npm install clipboard

3、 配置步骤

(1)、引入uview-plus主JS库

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

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

（2)、在引入uview-plus的全局SCSS主题文件

        在项目根目录的uni.scss中引入此文件。

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

(3)、引入uview-plus基础样式

        在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-plus/index.scss";
</style>

(4)、配置easycom组件模式 

        此配置需要在项目src目录的pages.json中进行。

// pages.json
{
	"easycom": {
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {  
	        "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue" 
		}
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

五、[plugin:commonjs] Unexpected ‘/‘. Escaping special characters with \ may help.错误分析

1. 错误原因：公共样式（common.scss）里使用了 // 作注释。
2. 解决办法：css中注释使用 ‘/**/’ 注释，或 把 ‘//’ 注释去掉就可以了。

 六、[sass] expected selector 报错

        解决办法： ::v-deep 替换 /deep/

七、module.exports = {} 替换 export {}

export { xx, xx}与import {xx, xx} from '../../xxx.js'

exports 等于 module.exports，相当于在js文件头部，有一个module对象，module.exports = exports；
exports是一个对象，所以可以exports多个值

八、资源文件引用问题。

1. 无法使用require()
2. 分包中引用分包中支援文件不要使用相对路径。路径一定要以正斜杠/开头，从项目的根目录开始查找文件。

   <image src="/packageA/static/images/login-icon.png" mode=""></image>
   

九、插槽的适配

Vue3 将不支持 slot="xxx" 的用法 ，要替换 v-slot:xxx 使用方法。

<!--  Vue3 支持的用法 -->
<uni-nav-bar>
  <template v-slot:left>
    <view class="city"></view>
  </template>
</uni-nav-bar>
 
 
<!--  Vue2 支持的用法 -->
<uni-nav-bar>
  <view slot="left" class="city"></view>
</uni-nav-bar>
 

十、v-show 在运行到app中初始渲染不生效。

解决方法：将v-show 替换为 v-if

十一、uniapp h5端使用map组件报错Map key not configured.

解决方案：配置所需要使用的第三方地图的key

持续更新中......