小程序开发前提：本地有项目仓库执行npm i 安装项目相关的依赖，这一步的目的是在你的本地初始化运行环境。报错的话，

不建议在仓库中再建仓库，所有的仓库最好就是平级关系，不要弄包含关系。

小程序的开发在vscode中开发

使用vue语法

前提：本地有项目仓库

执行npm i 安装项目相关的依赖，这一步的目的是在你的本地初始化运行环境。

报错的话，删除掉 package-lock.json 文件，然后重新 npm i
安装好之后跑一下 npm run dev:mp-weixin 这个命令，程序就会生成一个 dist 文件夹在根目录，打开，找到 dev > mp-weixin 这个文件夹，再在微信小程序开发工具打开这个 mp-weixin 文件夹

从头开始

注意如果cmd调出来的终端可以正常适用npm -v,但是vscode里面使用下面的命令却报错

window+x，选择powershell(管理员)，然后输入，再输入y

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

目标文件夹下面，装vue和uniapp

npm install -g @vue/cli

用vue -v来验证是否下载成功

创建以 javascript 开发的工程（如命令行创建失败，请直接访问 uni-app项目报could not fetch remote https://github.com/dcloudio/uni-preset-vue错解决_could not find commit hash for vite-CSDN博客）

但是下载模板后记得npm install（安装项目依赖）

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

装依赖

npm i

运行一下

网页版

npm run dev:h5

Ctrl+单击local那行网址

小程序版 打开微信开发者工具，导入目标文件（一直双击到mp-weixin）

搭建底部导航栏

在pages.json中加入tabBar

我的代码展示。官网指出还可以加入图标。uni.setTabBarItem(OBJECT) | uni-app官网 (dcloud.net.cn)

"tabBar":{
                //以下是样式
		"color": "#333",
		"borderStyle": "white",
		"selectedColor": "#2F80FF",
		"backgroundColor": "#FFF",
                
                //以下是想搭建的页面地址索引和名称
		"list":[
		{
			"pagePath": "pages/index/show-index",
			"text": "展台"
		},
		{
			"pagePath": "pages/index/novel-index",
			"text": "小说"
		},
		{
			"pagePath": "pages/index/painting-index",
			"text": "手绘"
		}
		]
	}

用@代替src的路径配置

在vite.config.js文件里（打包用的）

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

然后在jsconfig.json或者tsconfig.json(若无，手动添加)

目的：实现ctrl+单击路径进行页面跳转

    {
        "compilerOptions": {
            "baseUrl": ".",
            "paths": {
                "@/*": ["./src/*"],
            }
        },
        "exclude": ["node_modules", "dist"]
    }