定制开发小程序仅供学习记录

1.创建项目（react同样适用）

//使用npmnpm init vite@latest//使用yarnyarn create vite//使用pnpmpnpm create vite//定制开发小程序需要下载依赖npm install
1
2
3
4
5
6
7
8
9

1.1 定制开发小程序解决爆红线问题

//npm install @types/node --save-dev//然后关闭项目重新打开 如：找不到path
1
2
3
4

1.2 模板创建项目

# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init vite@latest my-vue-app -- --template vue# yarnyarn create vite my-vue-app --template vue# pnpmpnpm create vite my-vue-app -- --template vue
1
2
3
4
5
6
7
8
9
10
11

2.下载相关插件

//安装typescript、router、axios、element-plus插件npm install vue-router@next axios --savenpm install typescript element-plus --save-devyarn add less less-loader或yarn add vue-router@next axiosyarn add typescript element-plus --devyarn add less less-loader
1
2
3
4
5
6
7
8
9
10

3.引入elementplus

3.1 完整引入

import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'//拆解createAppconst app=createApp(App)app.use(ElementPlus)app.mount('#app')
1
2
3
4
5
6
7

3.2 自动引入

3.2.1 插件下载

//安装unplugin-vue-components 和 unplugin-auto-importnpm install -D unplugin-vue-components unplugin-auto-import
1
2

3.2.2 把下列代码插入到你的 Vite 或 Webpack 的配置文件中

// vite.config.tsimport AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default {  plugins: [    // ...    AutoImport({      resolvers: [ElementPlusResolver()],    }),    Components({      resolvers: [ElementPlusResolver()],    }),  ],}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.配置vite.config.ts-----注意:当前使用了完整引入

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'const { join } = require("path");export default defineConfig({  plugins: [    vue()  ],  base: "./",    resolve: {        alias: {            "@": join(__dirname, "src"), //需要配合tsconfig.json文件配置baseUrl和paths设置src别名@        },    },  server: {    port: 3001, // 服务端口号    open: true, // 服务启动时是否自动打开浏览器    cors: true, // 允许跨域      //配置代理    proxy: {      '/api': {        target: 'http://localhost:3000',        changeOrigin: true,        rewrite: (path) => path.replace(/^\/api/, '')      }    }  },  define: {    "process.env": {}  },  build: {    target: 'modules',    outDir: 'dist', //指定输出路径    assetsDir: 'assets', // 指定生成静态资源的存放路径    minify: 'terser', // 混淆器，terser构建后文件体积更小  },  publicDir:"public"})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

5.路由搭建

src下创建routes文件夹下创建index.ts

import { RouteRecordRaw, createWebHashHistory, createRouter } from "vue-router"const routes: RouteRecordRaw[] = [    {        path: "/",        name: 'login',        component: () => import('@/components/login/index.vue'),        meta: {}    }, {        path: "/home",        name: 'home',        component: () => import('@/components/home/index.vue'),        meta: {}    },{        path: "/register",        name: 'register',        component: () => import('@/components/register/index.vue'),        meta: {}     }]const router=createRouter({    history:createWebHashHistory(process.env.BASE_URL),    routes})export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在main.ts中进行挂载

import routes from "@/routers/index"app.use(routes)
1
2

6.pinia使用

6.1 下载pinia

yarn add pinia
1

6.2 创建store文件夹===》创建modules文件夹和index.ts文件

6.3 index.ts文件中创建store

import {createPinia} from "pinia"const store = createPinia()export default store;
1
2
3

6.4 main.ts

import { createApp } from 'vue'import App from './App.vue'import router from "@/router/index"//引入创建的storeimport store from './store'import 'element-plus/dist/index.css'import "@/main.less"const app=createApp(App)app.use(router)//挂载storeapp.use(store)app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6.5 回到module文件夹

6.5.1 创建专用的仓库 userInfoStore.ts

//userInfoStoreimport {defineStore} from "pinia"export const userInfoStore=defineStore('userInfoStore',{    //state    state:()=>({        num:1    }),    //getter    getters:{},	actions:{        //注意不要使用箭头函数，会有this指向问题        increment(){            this.num+=1        }    }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6.5.2 创建第二个仓库secStore.ts

//secStoreimport {defineStore} from "pinia"import {userInfoStore} from "./userInfoStore"export const secStore=defineStore('secStore',{    state:()=>({        age:10,    }),    actions:{        changAge(){        	//跨模块调用            const userInfoState=userInfoStore()            console.log('将infoStore中的num加给sec中的age')            this.age+=userInfoState.num        }    }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6.5.3 页面中

<template>	<div>        <div>            num:{{num}}            <br>            age:{{age}}    	</div>        <div>            <--修改num的第一种方法-->            <el-button @click="userInfo.increment">increment</el-button>			</--修改num的第2种方法-->            <el-button @click="increment1">increment1</el-button>           </--修改num的第3种方法-->            <el-button @click="increment2">increment2</el-button>            </--修改num的第4种方法-->            <el-button @click="resetPath">resetPath</el-button>            </--修改num的第5种方法，跨模块调用-->            <el-button @click="sec.changAge">changAge</el-button>			<el-button @click="changAge">changAge</el-button>    	</div>    </div></template><script lang='ts' setup>//引入结构函数import {storeToRefs} from "pinia";    //引入仓库    import {userInfoStore} from "@/store/module/userInfoStore";    import {secStore} from "@/store/module/secStore";    const userInfo=userInfoStore();    const sec=secStore();    //解构仓库数据    const {num} =storeToRefs(userInfo)    const {age} =storeToRefs(sec)    //函数调用actions函数    const increment1=()=>{        userInfo.increment()    }    //使用patch的第一种    const increment2=()=>{        userInfo.$patch({            //此处num需要使用.value            num:num.value+=1        })    }    //使用patch的第二种    const increment3=()=>{        userInfo.$patch(state=>{            state.num+=1        })    }    //使用跨模块    const changeAge=()=>{        sec.changAge()    }</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55