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

前言

自己第一次从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中配置 （配置详情参照 ）

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

引入ts依赖

npm - @types/node -D

六，配置小程序

manifest.json中

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

其他配置移步官网

七，运行

npm run dev:mp-weixin

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

八，打包到微信

npm run build:mp-weixin

总结

毕竟第一次记录下来