如何从零搭建 vite2 + vue3+antdv+ ts

如何从零搭建 vite2 + vue3+antdv+ ts

初始化项目

$ npm create vite@latest

初始配置 vite.config.ts

添加初始路径、本地ip启动地址、以及别名路径
  base: './',
  server: {
    cors: true,
    open: false,
    host: '0.0.0.0'
  },

  resolve: {
    alias: {
      "@": pathResolve("src"),
      "COM": pathResolve("src/components")
    }
  },
配置别名需要安装@types/node
  $ npm i @types/node
  /**
   * @types/node
   */
  import { resolve } from 'path'
  const pathResolve = (dir: any) => resolve(__dirname, '.', dir)
注：配置别名时，如果是 ts 项目，需要在 tsconfig.json 中也配置对应别名，不然会提示错误
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ],
      "COM": [
        "src/components/*"
      ],
    }

初始化视图部分操作

首先引入 flex.css、reset.css文件, 对项目做样式重置以及flex布局容易化操作
在main.ts中引入
import './assets/css/reset.css'
import './assets/css/flex.css'

css 使用 less预加载
$ npm i less

初始化路由 router v4.x

$ npm install vue-router@4

路由过渡使用 nprogress 进度 插件来美化
$ npm i nprogress -D

注：一般 install 后还报 找不到模块“nprogress”或其相应的类型声明。 就需要在 env.d.ts 添加声明

最后在 main.ts 中使用相对路径引入
然后就可以正常使用了

初始化 store

我这里使用 pinia，俗称 vuex v5.0
$ npm i pinia
$ npm i pinia-plugin-persist (pinia 持久化插件)

---index.ts
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

---Home/index.ts
import { defineStore } from 'pinia'

export const layoutStore = defineStore('layout', {
  state() {
    return {
      data: ['home1', 'home2']
    }
  },
  getters: {
    
  },
  actions: {
  },
  // 开启数据缓存
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'Home'
      }
    ]
  }
})

注：pinia 持久化 bug，当路由跳转时 修改pinia模块，该模块是不会及时持久化保存的

初始化 axios

$ npm install axios
$ npm i qs -D (get中对数组的处理)

初始化 antdv ui组件

$ npm i ant-design-vue -D
Vue官方人员开发的一款自动引入插件，可以省去比如 UI 库的大量 import 语句
$ npm i unplugin-vue-components -D
开发预打包
$ npm i vite-plugin-optimize-persist -D
$ npm i vite-plugin-package-config -D

其他插件配置

因为使用了 setup 语法，为了可以优雅的定义组件 name
$ npm i vite-plugin-vue-setup-extend -D
---vite.config.ts
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
  plugins: [
    ...
    VueSetupExtend(),
    ...
  ]
---.vue
<script setup lang="ts" name="App">

屏幕适配
$ npm i postcss-pxtorem -D
---postcss.config.js
module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 100, //根节点字体大小，以100px为例，可根据自己需求修改
      propList: ['*'],
      selectorBlackList: ['.px'] 
      // 过滤掉.px-开头的class，不进行rem转换
    }
  }
}
---flexible.js

vite.config.ts (打包)

build: {
    target: 'modules',
    outDir: 'dist',
    assetsDir: 'assets',
    chunkSizeWarningLimit: 1000,
    reportCompressedSize: false,
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log'],
      },
      output: {
        comments: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId
            ? chunkInfo.facadeModuleId.split('/')
            : [];
          const fileName =
            facadeModuleId[facadeModuleId.length - 2] || '[name]';
          return `js/${fileName}/[name].[hash].js`
        }
      }
    }
  },

vite.config.ts 其他配置

$ npm i vite-plugin-vue-setup-extend -D

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

plugins: [
    ...
    VueSetupExtend(),
    ...
]
// vue3 setup 语法 component 添加 name

<script setup lang="ts" name="AccountManagement">
    
------------------------------------------------------

import OptimizePersist from 'vite-plugin-optimize-persist'
import PackageConfig from 'vite-plugin-package-config'
    
plugins: [
    ...
    PackageConfig(),
    OptimizePersist(),
    ...
]
    
// 针对 vite2 首次启动加载问题，因为使用的模块加载机制导致每个页面第一次加载一些 动态渲染的组件（如果你是使用 vite 推荐的动态加载 ui 组件的方式）都需要加载一些时间，而这两个插件可以在你第一次加载后生成 components.ts 文件，在你下一次启动时，全部预加载完毕
    
-------------------------------------------------------
下面是动态按需加载 ui组件（antd 2）
以及对 less 的引入与全局化

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

css: {
    preprocessorOptions: {
      less: {
        charset: false,
        // 全局主题色
        modifyVars: {
          'primary-color': '#0F5BFF'
        },
        // 需要全局使用的自定义变量
        additionalData: `@import "${pathResolve('./src/assets/styles/global.less')}";`,
        javascriptEnabled: true,
      },
    }
  },
      
plugins: [
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: 'less'
        })
      ],
      include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/]
    }),
    ...
  ]

最后 npm run build ~