这里我们将使用vite创建vue3项目

• 依赖 大多为纯 JavaScript 并在开发时不会变动。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模块中。

  Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

• 源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载。（例如基于路由拆分的代码模块）。

  Vite 以 原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

创建项目

使用 NPM:

npm init @vitejs/app

使用 Yarn:

yarn create @vitejs/app

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

安装node_nodules

yarn

我们的package.json文件来判断安装是否成功

{
  "name": "vuevite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "element-plus": "^1.0.2-beta.70",
    "vue": "^3.0.5",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "sass": "^1.37.5",
    "vite": "^2.4.4"
  }
}

现在开始配置ui组件引用

vite创建的vue3项目 需要用到Element Plus

Element-plus 官网如下 element-plus.gitee.io/#/zh-CN/com…

main.js 代码如下:

import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";

const app = createApp(App);
app.use(ElementPlus).use(router).use(store).mount("#app");

效果展示

接下来开始Antd-ui + Echarts引入

// 引入echarts
import * as echarts from "echarts";
// 引入antd
import * as Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";

app.use(ElementPlus).use(Antd).use(router).use(store).mount("#app");
app.echarts = echarts;

Echarts效果以及官网如下:

https://echarts.apache.org/zh/index.html

Antd效果以及官网如下:

https://antdv.com/docs/vue/introduce-cn/

Form表单输入

在element Plus + vue3 + TS 的项目中出现的

<el-form :model="writeForm" :rules="rules" ref="form" label-width="0px" class="ms-content">

将model绑定值 与 ref 绑定值的名称换成不一样的就搞定了，

<el-form :model="writeForm" :rules="rules" ref="formRef" label-width="0px" class="ms-content">

<script setup>
import { ref, reactive} from "vue";
const formRef = ref(null);
let obj = {
  anchor_name: "",
  anchor_wechat: "",
  close_comment: 1,
  close_goods: 1,
  close_like: 1,
  name: "",
  phone: "",
  screen_type: 0,
  sort: "0",
  start_time: [],
  type: 0,
};
const writeForm = reactive({ form: obj });
</script>