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

2020-12-25 5,375 阅读1分钟

全局安装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项目就完成了

运行效果图

参考

------------------------------------------------------------------------------------------------

欢迎同学相互讨论研究指正

O(∩_∩)O