基于 Vue3 ，打造前台+中台通用提效解决方案Vue3前台+中台通用项目构建 Vite是Vue的作者尤雨溪开发的Web

下哉地止：ukoou.com/resource/1187

Vue3前台+中台通用项目构建

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。

Vite具有以下特点：快速的冷启动即时热模块更新（HMR，Hot Module Replacement）真正按需编译Vite是在推出Vue 3的时候开发的，目前仅支持Vue 3.x，这意味着与Vue 3不兼容的库也不能与Vite一起使用。使用Vite

yarn create vite vite-demo --template react-ts

上面这行命令使用 react-ts 模板创建了一个叫 vite-demo 的项目。由于我在的团队日常使用 react 和 typescript 开发居多，因此选择了 react-ts 这个模板，vite 官方支持的模板还有很多，可以在 create-vite 中查看。

项目初始化完成以后，目录结构如下：

.
|____index.html
|____.gitignore
|____package.json
|____tsconfig.json
|____vite.config.ts
|____src
| |____App.tsx
| |____main.tsx
| |____App.css
| |____index.css
| |____vite-env.d.ts
| |____logo.svg
| |____favicon.svg

其中 vite.config.ts 内容如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

可以看出，vite 官方已经做了比较完善的封装，相较于之前版本，开发体验提升了很多。

按照指示安装完依赖，启动应用以后，速度确实很快。现在我们来做一些基本改造。

我通常使用 less 来写样式，vite 已经做了很好的支持，在安装完依赖以后，只需要直接在代码中引用 xxx.less 即可。对于一个久经考验的开发者来说，样式还是要引入作用域的，通常使用 css modules。

安装 less 预处理器，

yarn add --dev less

然后修改 vite.config.ts 文件，添加 css modules 配置：

export default defineConfig({
  ...
  css: {
    modules: {
      localsConvention: 'camelCaseOnly', // 我们使用驼峰形式
    },
  },
  ...
})

添加完配置以后，只要将原来的 xxx.less 改成 xxx.module.less 即可，这点与 create-react-app 是一样的。

由于我开发的是一个中后台项目，使用了 antd 和 lodash，大家都知道，这两个是按需加载大户，以前我们使用 babel-plugin-import 来处理，vite 生态里也有很多类似的方案。我选用了 vite-plugin-imp 这个插件，修改 vite.config.ts 如下：

import vitePluginImp from 'vite-plugin-imp';

export default defineConfig({
  ...
  plugins: [
    ...
    vitePluginImp({
      libList: [
        {
          libName: 'lodash',
          libDirectory: '',
          camel2DashComponentName: false,
        },
        {
          libName: 'antd',
          style(name) {
              // use less
              return `antd/es/${name}/style/index.js`;
          },
        },
      ],
    }),
  ],
  css: {
    ...
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});

antd 已经默认支持了 Tree Shaking，上面的配置最终只会处理样式的按需加载。lodash 不支持 Tree Shaking，我们也可以使用 ESM 版本 lodash-es，这样就可以不使用 vite-plugin-imp 了，配置如下：

export default defineConfig({
  resolve: {
    alias: [{
      find: /^lodash$/,
      replacement: 'lodash-es',
    }],
  },
});
通常，我们在开发前端项目时，需要一些代理来调用后端 API 接口，vite 配置如下：

export default defineConfig({
    ...
    server: {
      proxy: {
        '/api_path/': {
          target: 'http://xxx.server.domain.com/',
          changeOrigin: true,
        },
      },
    },
});

代理底层都是基于 http-proxy 实现，这里不做过多说明了。

现在可以愉快的开发代码了。

Vue 前台+中台通用 header组件开发

一、 header 组件开发之数据的传递

App.vue 引入组件

import header from './components/header/header'

App.vue 中注册组件

 export default {
     components:{
         v-header:header
     }
 }

使用组件

<v-header :sell="sellerObj"></v-header>

解释：:sell="sellerObj",这里就像一个函数传参一样把sell当成形参，sellerObj就是实参，那么父组件实参是怎么传给子组件的，通过什么传 4. 父组件向子组件传递数据在父组件中需要将sellerObj作为数据导出，子组件通过props从父组件中获得数据，且要指定数据类型

export default {
 props:{  //  子组件获取 父组件 数据
 	sell:{
 	  type:Object // 传递的类型 
 	}
  }
 }