1. 首页

快速搭建Vue3 + TypeScript项目

Vue3 已经发布beta版本了,笔者在新项目中尝试体验了下Vue3 + TypeScript全家桶,通过本文记录下项目搭建的过程。

用Vue Cli初始化项目

笔者已经安装了最新版本的Vue Cli,如果你的机器上尚未安装最新版本的Vue Cli,可以先去官网安装一下。


npm install -g @vue/cli // Js中文网 -前端Vue3源码解析 https://www.javascriptc.com/

然后使用Vue Cli初始化一个基本的Vue项目


vue create vue3-project // Js中文网 -前端Vue3源码解析 https://www.javascriptc.com/

因为需要使用TypeScript、Vue Router等选项,所以我们这里选择自定义初始化的特性,所以建议把这些选项都勾选上:

1.png

升级到Vue 3.x 项目

这里需要使用 Vue 官方提供的vue-cli-plugin-vue-next插件,这个插件帮助我们将一般的Vue Cli 创建的项目升级到 Vue 3.x beta版本。


vue add vue-next // Js中文网 -前端Vue3源码解析 https://www.javascriptc.com/

安装好后,我们的项目并不能直接跑起来,需要我们手动做一些修改。由于我们项目中的组件是基于Vue 2.x 的语法写的,我们首先做一些减法,把项目中的组件删掉,再用使用Vue 3.x 的语法的组件进行替换。

修改router模块

这一步很简单,因为最新版本的Vue-Router替换为了createRouter的形式来创建router实例,我们按照Vue-Router最新版本的文档操作即可。


// router/index.ts import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue'), }, { path: '/about', name: 'About', component: () => import('@/views/About.vue'), }, ]; // 使用createRouter来创建Router实例 const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router; // Js中文网 -前端Vue3源码解析 https://www.javascriptc.com/

修改store模块

为了对参数类型进行校验,Vuex也改为使用工厂函数来创建 Vuex 实例,笔者这里写了一个最简单 store 模块:


import { nextTick } from 'vue'; import { createLogger, createStore, ActionContext } from 'vuex'; interface State { title: string; } export default createStore({ state(): State { return { title: '', }; }, mutations: { setTitle(state: State, title: string) { state.title = title; }, }, actions: { async nextTickSetTitle({ commit }: ActionContext<State, State>, title: string) { await nextTick(); commit('setTitle', title); }, }, plugins: process.env.NODE_ENV === 'development' ? [createLogger()] : [], }); // Js中文网 -前端Vue3源码解析 https://www.javascriptc.com/

一个最简单的示例组件

开始使用Compoisition API来写一个最简单的示例组件,在组件中使用 Vuex 的方式改为了useStore API,如下示例所示,注意 script 需要声明lang="ts"


<template> <div class="home"> <div>{{ title }}</div> <button @click="setTitle('setTitle')">setTitle</button> <button @click="nextTickSetTitle('nextTickSetTitle')">nextTickSetTitle</button> </div> </template> <script lang="ts"> import { defineComponent, computed, onMounted, onUpdated, onUnmounted, } from 'vue'; import { useStore } from 'vuex'; export default defineComponent({ name: 'hello world', props: {}, setup() { const store = useStore(); const title = computed(() => store.state.title); const setTitle = (nextTitle: string): void => { store.commit('setTitle', nextTitle); }; const nextTickSetTitle = async (nextTitle: string): Promise<void> => { await store.dispatch('nextTickSetTitle', nextTitle); }; onMounted(() => { console.log('onMounted'); }); onUpdated(() => { console.log('onUpdated'); }); onUnmounted(() => { console.log('onUnmounted'); }); return { setTitle, nextTickSetTitle, title, }; }, }); </script> // Js中文网 -前端Vue3源码解析 https://www.javascriptc.com/

小结

本文很简单,只是笔者搭建 Vue 3.x 项目的简单小结,关于 Vue 3.x 的原理,笔者也写了一些相关的文章,感兴趣的读者可以查阅,一起学习。

作者:counterxing
链接:https://juejin.im/post/6854573217986805768

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:快速搭建Vue3 + TypeScript项目

链接:https://www.javascriptc.com/4160.html

« LeetCode 012. 整数转罗马数字
LeetCode 011. 盛最多水的容器»
Flutter 中文教程资源

相关推荐

QR code