如何在Vue 3中使用打印脚本

VUE 3.0(终于！)。几周前被释放。这在很大程度上与老Vue 2的做事方式是兼容的。但很多事情已经改变了。

我已经创建了一个样例应用程序，以及GitHub上的Vue 3应用程序源代码。

这款应用非常简单，仅供演示之用。我发现，当教程和指南有更大的应用程序可供参考时，它们就更容易查看，而不仅仅是简短的代码片段。

在Vue 3的合成API上有大量的指南。我真的很兴奋能开始在一些项目中使用它(尽管我对它的用处仍有一些保留意见--但我对Reaction挂钩的感觉也是一样的--它们真的很受欢迎)。

在Vue 2中(在Vue 3中也是如此，因为您仍然可以使用Options API)，您可能会习惯于看到这样的情况：

//...。导出默认{data(){return{postTitle：'；a Default Title'；，}}，方法：{updateTitle(NewValue){this。PostTitle=newValue；}}，计算：{numWordsInTitle(){返回此。邮报标题。拆分('；'；)。长度；}。

<；模板&>h1>；{{postTitle}}<；/h1>；<；p>；帖子有{{numWordsInTitle}}个单词<；/p>；<；Button@Click="；updateTitle('；新事物)&34；&>更新到'；新事物。

要从旧的Vue 2选项API转换为使用Vue 3合成API，请执行以下操作：

从'；vue'；导入{fineComponent，ref，Computed}；导出默认定义组件({name：'；BlogSummary'；，Components：{}，道具：{post：Object，}，Setup(Props){const postTitle=ref('；postTitle'；)；const numWordsInTitle=Computed(()=>；postTitle)。价值。拆分('；'；)。长度)；const updateTitle=(NewValue)=>；postTitle。Value=newValue；return{postTitle，numWordsInTitle，updateTitle}})；

<；模板>；...<；/模板&>部件将与上面相同。从Setup()的对象返回的任何内容都可以在<；模板>；中使用。

关于合成API，还有更多可以说的。但这只是一个简短的介绍。

使用Vue 3设置Sass非常容易，我一直更喜欢Vue 3，因为它可以让编写CSS变得更好一些。

在Vue 3中，Sass的基本设置相当简单：纱线Add-D Sass-Loader Sass。我在这里写了更多关于在Vue 3中设置Sass的内容(包括全局配置)。

有一些争论认为，由于Vue 3)[/programming-tricks/vue3/vue3-guides/vue-3-composition-api/].中的Compostion API，Vuex将不会经常被需要。但我认为，对于大型应用程序，它仍将是使用Vue的主要部分。

在main.js或main.ts文件中，您需要这样设置它：

从'；vue'；导入{createStore}从'；vuex'；导入应用程序。/App.vue'；；//您的主要组件常量存储=createStore({state：{post：[]，}，getters：{allPosts(State){返回状态。发布}，}，突变：{}，操作：{}，模块：{}})createApp(App)。使用(存储)//<；<；这一点很重要。挂载(#app'；)

设置好Vue 3Vuex配置后，只需访问Vue 3组件中的商店即可。

从'；vue'；导入{useStore}；从"；vuex"；导入{Computed，fineComponent}；从"；vuex"；导入默认定义组件({name：'；SinglePost'；，Components：{}，Setup(){const store=useStore()；const post=Computed(()=&>store。吸毒者。全都爆炸了。查找((POST：ANY)=>；POST。Slug=路由。参数。Slug))返回{post，}}，})；

有关在Vue3中使用Vuex4的更深入的例子，我推荐查看样例Vue3样板应用程序，其中包括Vue3和Vuex配置。

VUE路由器在VUE 3中运行良好。要开始使用，您必须使用以下命令进行安装：YAR ADD VUE-ROUTER。

从导入应用程序中导入{createApp}。/App.vue'；从导入{createRouter，createWebHashHistory，RouteRecordRaw}从'；vue-router'；导入BlogIndex；@/Components/Blog/Views/BlogIndex.vue&34；Const routs：array<；RouteRecordRaw>；=[{path。，名称：'；blog.index；，组件：博客索引，//没有webpack拆码}，{路径：'；/post/：slug'；，名称：'；blog.show；//带webpack拆码(最适合大型应用，那么就可以懒加载了)：组件：()=>；import(/*webpack ChunkName："；blog-show&34；*/'；../Components/Blog/Views/SinglePost.vue'；)}，]const路由器=createRouter({History：createWebHashHistory()，routes})createApp(App)。使用(路由器)//<；<；重要！挂载(#app'；)。

有关在Vue 3中使用VUE路由器的更深入的示例，我建议查看示例Vue 3样板应用程序，其中包括Vue 3和VUE路由器。

在Vue 3中使用Vue Test Utils进行测试与在Vue 2中非常相似。

以下是Vue 3中使用<；router-link>；(Vue Router)的组件的Vue Test Utils测试(使用Jest)的一个示例。

从"；@vue/test-utils；导入{postFactory}；从"；@/Components/Blog/Model/Post；导入您的组件("；@/components/blog/components/YourComponent.vue&34；；它('；emitePost"；'；，emitsDeletePost)；；从"；@vue/test-utils"；导入{postFactory}；从"；@/Components/Blog/Model/Post；导入您的组件('；emits"；'；，emitsDeletePost)；函数emitsDeletePost()：void{const post={slug：'；Example-slug'；}；const$ROUTER={PUSH：JEST。Fn()}const$route={params：{id：1}}const wrapper=mount(YourComponent，{props：{post}，global：{Components：{RouterLink：RouterLinkStub}，mock：{$route，$Router})const按钮=wrapper。获取(按钮)；按钮。触发器(单击)；Expect(包装。已发出('；deletePost'；)。To EQUAL([[POST.。弹头]]))}。

VUE 3完全支持打印。在Vue 3中，我最喜欢的新功能之一就是它现在的打字效果非常好。在Vue 2中要把所有东西都打对总是有点困难。

如果你不喜欢打字，也可以在Vue 3中使用普通的Javascript。

对于在Vue 3中设置TypeScrip的配置，我建议查看tsconfig.json。您还需要编写add-D类型的脚本(请查看该repo中的Package.json)。

设置完成后，您只需将.VUE文件中的<；脚本&>更改为<；脚本lang="；ts"；>；即可。