基于Vite2.x的Vue 3.x项目的搭建实现
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了基于Vite2.x的Vue 3.x项目的搭建实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
创建 Vue 3.x 项目
npm init @vitejs/app my-vue-app --template
引入 Router 4.x
npm install vue-router@4 --save
配置路由
在更目录中添加一个 router 的文件夹，新建 index.js
Router 4.x 为我们提供了 createRouter 代替了 Router 3.x 中的 new VueRouter，用于创建路由。
// Router 4.x
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: () => import("../views/Home/index.vue"),
},
{
path: "/login",
name: "Login",
component: () => import("../views/Login/index.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
Router 4.x 中为我们提供了 createWebHashHistory 与 createWebHistory 方法设置哈希模式与历史模式。
const router = createRouter({
history: createWebHashHistory(), // 哈希模式
history: createWebHistory(), // 历史模式
});
相对路径配置
在之前的 VueCli 中，我们得益于 WebPack 进行打包工具可以直接使用特定符号表示当前路径。同样Vite 也为我们提供了 resolve.alias 属性。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 定义相对路径，@代替
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
}
})
引入 Vuex
引入 Vuex 后 在更目录新建文件 src/store/index.ts 文件。
npm i vuex@next --save
Vant 引入
下载
npm install vant@next --save
vite 版本不需要配置组件的按需加载，因为Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力，但是样式必须全部引入。
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vant from "Vant";
import "vant/lib/index.css"; // 全局引入样式
createApp(App).use(router).use(store).use(Vant).mount("#app");
由于 Vue 3.x 中新增了 setup 函数，但是在 setup 中 this 的指向为 undefined ，故 Vant 的一些全局方法无法使用。
<template>
<div>
<van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight" />
<van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
setup() {
const onClickLeft = () => Toast("返回");
const onClickRight = () => Toast("按钮");
return {
onClickLeft,
onClickRight,
};
},
});
</script>
以上的实例中 Toast is not defined，原因就在于我们将 Vant 全局应用后在就不能局部引用，否则 Vite 会报错。
通过编写 工具类二次封装 Toast 即可解决此问题。
// utils/util.ts
// 简易弹窗
import { Toast } from "Vant";
export const toast = (text: string) => {
Toast(text);
};
import { defineComponent } from "vue";
import { toast } from "@/utils/util";
export default defineComponent({
setup() {
const onClickLeft = () => toast("返回");
const onClickRight = () => toast("按钮");
return {
onClickLeft,
onClickRight,
};
}
});
到此这篇关于基于Vite2.x的Vue 3.x项目的搭建实现的文章就介绍到这了,更多相关vite 搭建vue3项目内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！