• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

基于Vite2.x的Vue 3.x项目的搭建实现

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

创建 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项目内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
如何自己实现JavaScript的new操作符发布时间:2022-02-05
下一篇:
Javascript之JSBridge初探发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap