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 页面中