uniapp + vue3 + ts + vite + uniui 搭建

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

自己第一次从0搭建记录

---

一、下载uniapp模板

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

下载失败去uniapp官网git地址下载

二、安装sass

npm i node-sass@^4.0.0 sass-loader@^10.0.1 sass

三，git指定文件夹不上传

在文件夹内 右键 git bash，输入 touch .gitignore 生成.gitignore文件，输入

.DS_Store
node_modules/
unpackage/
dist/

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.project
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

四，引入uni-ui

根据官网指导

1，在更目录创建vue.config.js文件

添加代码

// vue.config.js
module.exports = {
		transpileDependencies:['@dcloudio/uni-ui']
}

2，npm下载

npm i @dcloudio/uni-ui

3，配置easycom

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

4，注意

uni-ui 现在只推荐使用 easycom ，如自己引用组件，可能会出现组件找不到的问题
uni-ui 不支持使用 Vue.use() 的方式安装

五，配置文件别名

打开vite.config.ts文件，使用resolve选项配置

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
 
const path = require('path')
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
 })

tsconfig.json中配置 （配置详情参照 小满zs）

//compilerOptions中配置
 
"baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },

引入ts依赖

npm - @types/node -D

六，配置小程序

manifest.json中

"mp-weixin" : {
        "appid" : "wx**********",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    },

其他配置移步官网https://uniapp.dcloud.net.cn/collocation/manifest.html

七，运行

npm run dev:mp-weixin

该命令会生成dist文件夹 在开发工具中打开dist/dev/mp-weixin

八，打包到微信

npm run build:mp-weixin

在开发工具中打开dist/build/mp-weixin ，点上传，再在微信公众平台选为体验版

总结

毕竟第一次记录下来