vue3.0+vite+TypeScript 初体验

一、什么是 vite

Vite 是面向现代浏览器，基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具。在生产环境下基于 Rollup 打包。

优点：

• 快速冷启动服务器
• 即时热模块更换（HMR）
• 真正的按需编译

二、vite 创建项目

npm init vite-app <project-name>	// 创建项目 
cd <project-name>	// 进入新创建的项目
npm install		// 安装项目依赖
npm i -S typescript	vue-router@next axios	// 集成 TypeScript vue-router axios
npm i -D eslint eslint-plugin-vue	// 集成 eslint sass
npm i sass --save-dev	// 集成css预编译sass
npm run dev		// 运行当前项目

三、项目配置

3.1、配置 vite.config.js

vite.config.js的作用类似于之前 @vue-cli 项目中的 vue.config.js

import path from 'path'
module.exports = {
  // 导入别名
  alias: {
    '/@/': path.resolve(__dirname, './src'),
    '/@/': path.resolve(__dirname, './src/views'),
    '/@components/': path.resolve(__dirname, './src/components'),
    '/@utils/': path.resolve(__dirname, './src/utils'),
  },
  // 配置Dep优化行为
  optimizeDeps: {
    include: ["lodash"]
  },
  // 为开发服务器配置自定义代理规则。
  proxy: {
    '/api': {
      target: 'http://rap2.taobao.org:38080/app/mock/237355',
      changeOrigin: true,
      rewrite: (path: string) => path.replace(/^\/api/, '')
    }
  }
  // ... 
}

参考 GitHub

3.2、集成 Ant Design of Vue 2.0 UI框架

安装 Ant Design of Vue ( 该 UI 库支持 Vite & TypeScript 具体使用关注官方文档 )

npm install ant-design-vue --save ( yarn add ant-design-vue )

按需加载所需的 UI 组件

npm install -D babel-plugin-import

{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

Ant Design of Vue 官网

3.3、配置 Router

在src目录下，新建 router 文件夹，并在文件夹内创建 index.js

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: import('/@views/Home'),
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('/@views/User'),
  },
];

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

export default router;

使用参考

3.4、新建 jsx 页面

在src目录下，新建 views 文件夹，并在文件夹内创建 Home.jsx User.jsx

** HomePage **

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  setup() {
    const msg='hello Home'
    return () => (
      <>
        <h1>Home</h1>
        <h1>{msg}</h1>
      </>
    );
  }
});

** UserPage **

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'User',
  setup() {
    const msg='hello 用户中心'
    return () => (
      <>
        <h1>User</h1>
        <h1>{msg}</h1>
      </>
    );
  }
});

Vue 3.0 中使用 JSX

3.5、 main.ts

在 main 中引入 router 以及 ant-design-vue

import { createApp } from 'vue'
import App from './App'
import router from './router/index'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(router).use(Antd).mount('#app')