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
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相关配置后面单独讲。