Vue3+vite+vueRouter+Vuex 项目搭建初体验

全局安装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`)
复制代码

访问地址 http://localhost:3000/

与 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