vue3.0+vite+typescript项目架构搭建
vue3.0 + vite + typescript + Ant Design Vue + router4 + vuex4 架构搭建项目
准备工作
1、安装脚手架工具，用的 Vue CLI v4.5 作为 @vue/cli@next。
全局重新安装最新版本的 @vue/cli：
yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next 2、Vite
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。
$ yarn create vite-app
$ cd
$ yarn
$ yarn dev 初始化vite项目
1、初始化项目，可以打开git bash; win电脑也可以直接cmd打开窗口
yarn create vite-app
下图是基础项目目录结构：
2、扩展项目目录结构
为了项目更好的管理，结构更加清晰，扩展项目结构
下图是扩展后的项目目录结构：
3.项目集成vuex, antd-design-vue,axios，router
main.ts文件代码
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import router from "./router/index";
import store from "./store/index";
import "ant-design-vue/dist/antd.css";
import "./assets/alibabafont/font.css";
import "./assets/css/base.css";
import "./assets/font/iconfont.css";
import "./index.less";
/*moment util*/
import {createMoment} from "./utils/momentUtil";
// import router 后创建并挂载根实例。
const app = createApp(App);
createMoment(app);
app.use(router);
app.use(store);
app.use(Antd);
router.isReady().then(() => {
app.mount("#app");
});
// createApp(App).mount("#app");
App.vue组件代码
4、package.json文件
{
"name": "stars-admin",
"version": "1.0.0",
"scripts": {
"start": "vite",
"build": "vite build"
},
"dependencies": {
"@ant-design/icons-vue": "^5.1.7",
"ant-design-vue": "^2.0.0-rc.2",
"axios": "^0.21.0",
"moment": "^2.29.1",
"vue": "^3.0.4",
"vue-i18n": "^8.22.2",
"vue-router": "4.0.0-rc.1",
"vuex": "4.0.0-beta.4",
"vuex-module-decorators": "^1.0.1"
},
"devDependencies": {
"@types/js-cookie": "^2.2.6",
"@vue/compiler-sfc": "^3.0.4",
"@types/echarts": "^4.9.3",
"babel-plugin-import": "^1.13.3",
"js-cookie": "^2.2.1",
"echarts": "^5.0.0",
"less": "^3.12.2",
"ts-node": "^9.1.0",
"tslint": "^6.1.3",
"typescript": "^4.1.2",
"vite": "^1.0.0-rc.13"
},
"license": "ISC"
}
以上为基本的项目搭建,vuex、router相关配置后面单独讲。