快速创建vue-ts项目基本结构

1. 创建vue-ts的项目框架：

npm create vite@latest +项目名称 --template vue-ts

 2.配置路径别名

// 在项目根目录下tsconfig.json, 添加以下内容：

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


//在vite.config.js添加以下内容：
import 'path' from path

export default defineConfig({
  plugins:[],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }

})

3.配置路由

// 1)引入依赖： npm i vue-router@4

// 2) src下创建router/index.ts文件，写入：
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/home.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// 3.在main.ts中引入：
import router from '@/router/index'
app.use(router)

4.使用Element-plusUI框架

1.安装：npm install element-plus --save

2.在main.ts中引入：
     import ElementPlus from 'element-plus'
     import 'element-plus/dist/index.css'
     app.use(ElementPlus)

3.按需引入：
     1）安装：npm install -D unplugin-vue-components unplugin-auto-import

     2）在vite.config.ts中：
        import AutoImport from 'unplugin-auto-import/vite'
        import Components from 'unplugin-vue-components/vite'
        import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

     3）在plugins插件写入：
        plugins: [
           Vue(),
           AutoImport({
           resolvers: [ElementPlusResolver()],
           }),
           Components({
           resolvers: [ElementPlusResolver()],
           })
          ]

4)全局引入组件库icon图标：
        01.安装：npm install @element-plus/icons-vue

        02.在main.ts中引入：
           import * as ElementPlusIconsVue from '@element-plus/icons-vue'
           for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
          }

5.使用状态管理Pinia

安装pinia:

   //1)引入依赖：
    npm i pinia

   //2)在src下新建store/index.ts文件：

      import { createPinia } from 'pinia'

      const pinia = createPinia()

      export default pinia

   //3)在main.ts中注册：

      import pinia from './store/index'

      app.use(pinia)

   //4.基本使用
    01.在store下新建user.ts:
    // defineStore的作用：创建pinia仓库
   // 有两个参数：第一参数是仓库的名称(模块的组件名),
  // 第二个参数是仓库中保存的数据，返回值是函数,调用时得到pinia仓库
  export const useUserStore = defineStore('use', () => {
  // 定义数据和方法
  let num = ref<number>(123)
  let addNum = () => {
    num.value++
  }
  return {
    num,
    addNum
  }
})

//5.组件中使用
<template>
    <h2>{{ num }}</h2>
    <el-button type="primary" @click="addNum">+1</el-button>
</template>
<script setup lang="ts">
   import { useUserStore } from '@/store/use'
   // storeToRefs的作用：解决解构仓库状态中数据丢失响应式的问题
   import { storeToRefs } from 'pinia'
   let user = useUserStore()
   let { addNum } = user
   let { num } = storeToRefs(user)
</script>

//6.自动保存pinia数据
1）安装依赖：npm i pinia-plugin-persistedstate
2）在src下store/index.ts进行引入：

   import presist from 'pinia-plugin-persistedstate'
   pinia.use(presist)

3）在store/user.ts中使用：
 export const useUserStore = defineStore('use',()=>{

 },{
    //开启自动保存、
    persist:true
 })