前言

最近要开一个新项目，那当然怎么潮怎么来了...

技术栈暂定为：Vite、Vue3、Typescript、AtndV、Less

环境

• Windows 11
• node：v14.16.1
• npm：v6.14.12

Vite

首先我们看看与Vue-cli相对应的构建工具，我们可以看到官网的介绍非常简洁。

总的来说就是使用了原生的ESM与ESBuild构建所以非常的快。

install

npm init @vitejs/app

之后根据提示操作即可

Ts node描述包

这里我们使用了vue-ts模板，但是我们有些时候是需要使用node能力的，而ts会表示报错

npm install @types/node -D

我们安装node的描述包

路径别名

为了方便使用，我们在vite.config.ts文件中添加别名

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

我们会发现单单这样设置ts会报错，我们去tsconfig中配置一下

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
+   "paths": {
+     "@/*": ["./src/*"]
+   }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"]
}

这下不会报错了，但是我们在vscode中使用别名时路径联想没用了

路径联想

在plugin中安装Path Intellisense，并在settings中配置如下：

+  "path-intellisense.mappings": {
+    "@": "${workspaceRoot}/src/"
+  }

这样就完美的完成了我们的别名配置

Vue3全家桶

与vue3对应的是vue-router@4、vuex@4，注意不要安装错了版本噢。

vue-router

npm install vue-router@4

之后我们在src下创建router

/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import routes from '@/config/routes.config'

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

export default router

我比较喜欢将路径抽离在config中

/src/config/routes.config

import Index from '../views/index/index.vue'

const routes: any[] = [
  {
    path: '/',
    component: Index
  }
]

export default routes

然后在main.ts中

  import { createApp } from 'vue'
+ import router from './router'
  import vuex from './store'
  import App from './App.vue'

  const app = createApp(App)
+ app.use(router)
  app.use(vuex)
  app.mount('#app')

vuex

值得注意的是，vuex@4支持多仓库，但是我没有这个需求

之后我们在src下创建store

/src/store/index.ts

import { createStore } from 'vuex'

const store = createStore({
  state: {
    version: '1'
  }
})

export default store

然后在main.ts中

  import { createApp } from 'vue'
  import router from './router'
+ import vuex from './store'
  import App from './App.vue'

  const app = createApp(App)
  app.use(router)
+ app.use(vuex)
  app.mount('#app')

Less 安装

因为AntdV使用的时Less，我们优先安装它。

vite内部已经做了相关处理，所以我们只需要安装语言插件即可

npm install less -D

开启less Js运行时

通常未开启时是不能在js中导入less的

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'

  const { resolve } = require('path')

  // https://vitejs.dev/config/
  export default defineConfig({
+   css: {
+     preprocessorOptions: {
+       less: {
+        javascriptEnabled: true
+      }
+     }
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    },
    plugins: [
      vue(),
      ViteComponents({
        customComponentResolvers: [AntDesignVueResolver()],
      })
    ]
  })

AntdV 安装

到了我们的最终站，这里我们配置按需加载的方式

先去安装AntdV官方提供的按需加载插件

npm install vite-plugin-components -D

然后在vite.config.ts中增加以下配置

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
+ import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'

  const { resolve } = require('path')

  // https://vitejs.dev/config/
  export default defineConfig({
  	css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true
        }
      }
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    },
    plugins: [
      vue(),
+     ViteComponents({
+       customComponentResolvers: [AntDesignVueResolver()],
+     })
    ]
  })

然后我们就可以随时使用了~

结语

这里我们已经搭建好了基本的运行框架，可以发现与webpack有一定的差异，但是基本流程是一致的。

这里，感谢大家看到最后！