全局安装create-vite-app
yarn global add create-vite-app /OR/ npm install -g create-vite-app
复制代码
创建项目目录
cva vue3-ui /or/ create-vite-app vue3-ui
cd vue3-ui
npm install (or `yarn`)
npm run dev (or `yarn dev`)
复制代码
与 Vue 2 的差异详见: Migration Guide
Vite 配置
根目录创建 vite.config.ts
文件
项目基本配置
eslint-plugin-vue
yarn add -D eslint eslint-plugin-vue
复制代码
根目录创建 .eslintrc.js
加入 TypeScript
yarn add -D typescript
复制代码
加入Vue Router
yarn add vue-router@next
复制代码
加入Vuex
yarn add vuex@next
复制代码
加入Ant Design Vue
yarn add ant-design-vue@next
yarn add -D babel-plugin-import
yarn add @ant-design/colors
复制代码
创建 .babelrc
至此项目创建完成
开始使用
使用 TypeScript
-
main.js
重命名为main.ts
-
index.html
里把/src/main.js
替换为/src/main.ts
使用 Vue Router
使用 Vuex
更改 main.ts
配置 tsconfig.json
解决ts import 模块报错问题 新建types
相关代码如下
项目代码地址 github.com/fushichang/…
至此一个简单的vue+VueRouter+Vuex+AntDesignVue Vite项目就完成了
运行效果图
参考
- Vue 3 - Docs
- Ant Design Vue - Docs
- Vue Vben Admin
- Deploying a subfolder to GitHub Pages
- vue3如何以vite创建项目
------------------------------------------------------------------------------------------------
欢迎同学相互讨论研究指正
O(∩_∩)O