一、什么是 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/, '')
}
}
// ...
}
复制代码
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 文件
]
}
复制代码
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>
</>
);
}
});
复制代码
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')
复制代码