使用vscode搭建vite+uniapp+vue3+uview-plus项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用vscode搭建vite+uniapp+vue3+uview-plus项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.使用vscode创建项目

	npx degit dcloudio/uni-preset-vue#vite my-vue3-project

需要注意的是当前的node版本 ^14.18.0 以上

2.项目创建完成后

npm run dev:mp-weixin
npm run build:mp-weixin
以上是以微信小程序为例，如需其他可以查看其他项目命令 https://uniapp.dcloud.net.cn/quickstart-cli.html

3.下载uview-plus
1)uview-plus依赖SCSS所以需要先下载sass 和 sass-loader
npm i sass sass-loader@10 -D
2)依次安装以下插件，如果有该插件请忽略
npm install uview-plus npm install dayjs npm install clipboard
3）在main.js进行引入文章来源地址https://www.toymoban.com/news/detail-503629.html

import { createSSRApp } from "vue";
import App from "./App.vue";
import uviewPlus from 'uview-plus'
// 如此配置即可
uni.$u.setConfig({
	// 修改$u.config对象的属性
	config: {
		// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
		unit: 'rpx'
	},
	// 修改$u.props对象的属性
	props: {
		// 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
		radio: {
			size: 15
		}
		// 其他组件属性配置
		// ......
	}
})
export function createApp () {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app,
  };
}


4) 在项目根目录的uni.scss中引入此文件。
`@import 'uview-plus/theme.scss';`

5)在App.vue 下引入
`@import 'uview-plus/theme.scss';`

6) 在pages.json中进行以下配置
`"easycom": {
		"custom": {  
	        "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue" 
		}
	}`
	项目基本框架就开发好了，快去试一下吧，支持setup语法
	```javascript
	<script setup >
		import { onLoad, onShow } from "@dcloudio/uni-app";
		import { ref } from "vue";
		const keyword = ref('')
		const show = ref(false)
		const showDate = ref(false)
		const searchValue = ref({
  				date: null
		})
		const userArr = ref([])
		const close = () => {
  			searchValue.value = {
    			date: null
  			}
  			show.value = false
		}

		onLoad(() => {

		});
		onShow(() => {
  			console.log('页面出现时')
		});

		</script>