vue3+pinia+ts+vite+element-plus项目搭建--20220727

仅供学习记录

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

//使用npm
npm init vite@latest
//使用yarn
yarn create vite
//使用pnpm
pnpm create vite

//需要下载依赖
npm install

1.1 解决爆红线问题

//
npm install @types/node --save-dev

//然后关闭项目重新打开 如：找不到path

1.2 模板创建项目

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

2.下载相关插件

//安装typescript、router、axios、element-plus插件

npm install vue-router@next axios --save
npm install typescript element-plus --save-dev
yarn add less less-loader
或

yarn add vue-router@next axios
yarn add typescript element-plus --dev
yarn add less less-loader

3.引入elementplus

3.1 完整引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//拆解createApp
const app=createApp(App)
app.use(ElementPlus)

app.mount('#app')

3.2 自动引入

3.2.1 插件下载

//安装unplugin-vue-components 和 unplugin-auto-import
npm install -D unplugin-vue-components unplugin-auto-import

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

// vite.config.ts
import 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()],
    }),
  ],
}

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

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"
})

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

在main.ts中进行挂载

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

6.pinia使用

6.1 下载pinia

yarn add pinia

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

6.3 index.ts文件中创建store

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

6.4 main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router/index"
//引入创建的store
import store from './store'
import 'element-plus/dist/index.css'
import "@/main.less"
const app=createApp(App)

app.use(router)
//挂载store
app.use(store)


app.mount('#app')

6.5 回到module文件夹

6.5.1 创建专用的仓库 userInfoStore.ts

//userInfoStore
import {defineStore} from "pinia"
export const userInfoStore=defineStore('userInfoStore',{
    //state
    state:()=>({
        num:1
    }),
    //getter
    getters:{},
	actions:{
        //注意不要使用箭头函数，会有this指向问题
        increment(){
            this.num+=1
        }
    }
})

6.5.2 创建第二个仓库secStore.ts

//secStore
import {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
        }
    }
})

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="increment3">increment3</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>