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