1. Prism项目创建

前言

本人从事机器视觉项目开发多年,一直使用WinForm来开发UI程序,近期才开始转换到WPF。WPF的华丽效果还有数据绑定等机制让我有相见恨晚之感。可是在学习WPF的过程中我走了很多弯路,首先是WPF的学习资料较少,很多的资料已经有十年左右了,和现在的开发环境存在较大差异了;其次是很少有人做桌面软件相关的技术分享了。所以我希望在这个系列博客中将我在学习过程中遇到的问题和学习过程做一个分享,帮助到其他同样想入门WPF的小伙伴。

初识Prism

我在第一次学习WPF时,用的是《深入浅出WPF》这本书,不得不说这本书对WPF的内部机制剖析的比较透彻,但很多地方其实和实际开发过程存在较大差异,对于我这种初学者来说并不能很好的理解,尤其是命令、消息路由等实现起来非常繁琐,直接将我劝退了。

后来我无意中发现了这个系列的博客,利刃 MVVMLight 1:MVVMLight介绍以及在项目中的使用 - Hello-Brand - 博客园

作者用非常详细的说明和示例演示了MVVMLight的使用方法,将绑定、命令等作了非常明了的演示,同时MVVMLight对命令、依赖属性等的封装也比原本的WPF代码简洁了许多,这时我才第一次能够使用WPF。

因为MVVMLight是一个已经停止更新的框架,所以我就找了找他的替代品,这时我才接触到了Prism。不仅有MVVMLight中的依赖属性、命令等的实现,还有更进一步的区域、模块、导航等,简直让我感到惊喜,这正是我想要的!

强烈建议新加入WPF学习的小伙伴们,在学习了XAML语法、了解了WPF的基本结构之后,一定要学习Prism!可能大大缩短你的学习时间!

我的心酸学习经历就回顾到这里,接下来我将分享一系列Prism的相关博客,其内容有很多是对《WPF-Prism8.0核心教程》WPF-Prism8.0核心教程(公益)_哔哩哔哩_bilibili的总结,感谢这位大牛的分享!(这位大牛是微软MVP!)

使用Prism

Prism可以通过安装Nuget包或者安装Prism工具来使用。我比较喜欢用Prism工具,能够省去一些对项目代码的修改,更加的方便。

1. 安装Prism工具

打开VS(我用的是VS2019),在顶部工具栏选择《扩展》-《管理扩展》

2. 创建项目

安装了扩展之后,我们就可以创建基于Prism的WPF项目了。

在创建项目的页面,我们搜索“prism”,就可以找到prism扩展为我们提供的几种项目。如下图

 我们根据自己的需要选择.net core或者.net framework的项目就可以了。选择好了之后,在创建项目时,会提示我们选择容器,这里一般选择DryIoc(性能更好)。

创建好了之后直接将程序运行起来,就可以看到这样一个窗口了。

 

创建好的项目的结构如下图。Prism扩展为我们创建了Views和ViewModels两个文件夹。我们启动的窗口就是Views中的MainWindow.xaml,和这个窗口匹配的viewmodel文件就是ViewModels中的MainWindowViewModel.cs。

 3. Prism中的binding机制

我们直接打开这个默认的MainWindow.xaml可以看到,这个默认主窗体的Title属性使用了Binding,如下图

 其绑定的数据在ViewModels/MainWindowViewModel.cs,

 可是我们并没有看到程序里有设置DataContext等的代码啊,那这个binding是如何实现的呢?原来秘密在xaml文件中

 Prism框架能够自动的将View和ViewModel关联起来,我们所需要做的就是在Views文件夹中创建xaml文件,在ViewModels文件夹中创建ViewModel,同时,xaml文件的名称和ViewModel文件的名称的前半部分相同,viewModel文件的后半部分为“ViewModel”,框架就可以自动将这两个文件关联起来,用ViewModel作为View的数据上下文。

这个功能确实是极为方便的,但缺点就是不能在xaml文件的设计页面中直接看到关联的数据内容了,要到运行期间才能够看到。

 

 

### 回答1: 在 Vue 2 项目中使用 Prism 需要以下步骤: 1. 安装 Prism:在项目目录中执行 `npm install prismjs` 或 `yarn add prismjs`。 2. 导入 Prism:在需要使用 Prism 的组件中导入 Prism,例如:`import Prism from 'prismjs'`。 3. 加载语言文件:在需要使用的语言文件中导入,例如:`import 'prismjs/components/prism-javascript'`。 4. 加载样式文件:在项目中加载 Prism 的样式文件,例如:`import 'prismjs/themes/prism.css'`。 5. 高亮代码:在模板中使用 Prism 的 `highlight` 方法高亮代码,例如:`<pre v-html="highlightedCode"></pre>`,在组件的 JS 中,需要在 `mounted` 生命周期中调用 Prism的highlight方法,例如`mounted() { this.highlightedCode = Prism.highlight(this.code, Prism.languages.javascript) }` 6.注意:对于需要高亮的内容在页面上最好是通过v-model绑定的变量来渲染,不然高亮不会自动更新 ### 回答2: 在Vue2项目中使用Prism,可以按照以下步骤进行操作: 1. 在项目中安装Prism依赖,可以通过命令行运行`npm install prismjs`安装。同时,你也可以选择安装需要使用的额外插件,如`npm install prismjs/plugins/line-highlight/prism-line-highlight`,或者下载包含所需插件的完整版本。 2. 在Vue项目的入口文件(通常是main.js)中引入Prism。可以通过`import "prismjs";`语句进行引入。若需要使用额外的插件,还需要引入插件的路径,例如`import "prismjs/plugins/line-highlight/prism-line-highlight";`。 3. 在Vue组件中使用Prism。可以在需要使用Prism的组件中,通过以下步骤进行操作: - 在Vue组件的`<template>`模板中,使用`<pre>`标签包裹需要高亮显示的代码块。 - 在`<pre>`标签内,使用`<code class="language-xxxx">`标签,其中`xxxx`是要高亮显示的代码语言,例如`html`、`javascript`等。 4. 如果你使用了Prism的额外插件,需要在Vue组件的`mounted`生命周期钩子中进行初始化,以启用相应的插件。可以使用以下代码进行初始化: ``` mounted() { Prism.highlightAll(); } ``` 5. 最后,在页面中就能看到代码块已经被正确地高亮显示了。 总结起来,在Vue2项目中使用Prism,需要安装Prism依赖、引入Prism,并在需要的组件中使用`<pre><code>`标签包裹代码块,并在mounted钩子中进行初始化。这样就能够实现在Vue2项目中使用Prism进行代码高亮显示了。 ### 回答3: 在Vue2项目中使用Prism的步骤如下: 1. 安装Prism:在终端中执行 `npm install prismjs` 命令来安装Prism。 2. 引入Prism:在需要使用Prism的组件中,可以通过 `import` 或 `require` 来引入Prism库,如 `import 'prismjs'`。 3. 引入样式文件:Prism还需要相应的样式文件来渲染代码高亮效果。可以在项目中的任意位置引入Prism的样式文件,如CSS文件或SASS文件。可以从Prism的官方文档中找到样式文件的链接,并将其直接下载到项目中。 4. 创建代码块组件:在Vue2项目中,可以创建一个代码块组件来展示代码并使用Prism进行高亮。在该组件中,可以使用`<pre>`标签来包裹要高亮的代码,然后为`<pre>`标签添加`language-xxx`的类名(例如`language-javascript`),表示代码的语言类型。 5. 使用Prism指令:可以使用Vue2的自定义指令来调用Prism进行代码高亮。在代码块组件的`<pre>`标签上添加一个自定义指令,例如`v-prism`,并将其值设置为需要高亮的语言类型。然后,在自定义指令中使用Prism的API方法对代码块进行高亮处理。 6. 在需要显示代码的地方使用代码块组件:在Vue组件中,可以使用代码块组件来展示需要高亮显示的代码。通过在代码块组件上绑定数据,可以动态地显示不同的代码。 7. 运行项目:在完成以上步骤后,重新启动Vue2项目,然后就可以在需要的地方看到代码高亮的效果了。 需要注意的是,Prism支持众多的语言类型,可以通过添加不同的类名来指定不同的语言类型,并将代码块组件的`lang`属性绑定到对应语言的类名上。此外,还可以自定义或覆盖Prism的样式来调整代码高亮的显示效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值