小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
问题： .net中没.vue
在前端开发人员眼中，前后端分离的项目开发模式无疑是最方便的， 但是有时候会事事并不能尽如人意。目前部门的项目都是使用Visual Studio进行开发的，所以基本都是C#的.net项目。
在我去年毕业刚入职后，有一个新项目要进行开发，刚刚进就要开始干活啦，当时在前端上准备统一使用vue的架构。不过项目当中前后端是不分离的，因此项目中也并没有使用webpack这类打包工具，当然更别提vue cli了。
没有就没有吧，直接用aspx来代替html进行编写，直接写在里面吧。
不过没做多久就发现了新问题，因为需要我制作一些共用的组件，所以我当时一心就是想使用.vue的方式去写出组件来，但是这样我就发现问题了，.net项目怎么会支持.vue格式的文件呢，无法使用<template></template>去定义vue组件，一般来说vue组件的定义是由<template>包裹的，但是在项目中<template>属于无效标签。
解决
百思不得其解，当时网上也查了.net挺久的。
做asp.net开发，大概都会了解到.aspx,.ascx和.ashx。
这里重点就是.ascx，比较正式的介绍：
asp.net的用户控件,是作为一种封装了特定功能和行为（这两者要被用在Web应用程序的各种页面上）的Web页面被开发的。一个用户控件包含了html、代码和其他Web或者用户控件的组合，并在Web服务器上以自己的文件格式保存，其扩展名是*.ascx。asp.net里的缺省配置并不允许Web客户端通过url来访问这些文件，但是这个网站的其他页面可以集成这些文件里所包含的功能。
我可以把.ascx当作.vue文件来写，里面大致写法基本上也是相同的。
首先创建一个用户控件：
可以在新建项中选择，也可以直接选择下方的web窗体用户控件
创建好了之后，里面的大致格式基本上也是与.vue相同
页面中的代码格式如下：
这里主体的元素可以使用<script></script>包裹，不过类型要选择成text/template。其他的写法基本就与是一样了。
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="" %>
<!-- 样式 -->
<style>
</style>
<!-- 元素 -->
<script id="onecatalogs" type="text/template">
<div class="teaching-catalog"></div>
</script>
<script>
//子组件
var son = {
template: "#onecatalogs",
props:[],
data: function () {
return {}
},
created: function () {},
mounted: function () {},
updated:function(){},
methods: {},
filters: {}
}
</script>
引用：创建好ascx组件之后，可以直接拖动ascx进入aspx页面当中，然后在aspx的vue的components当中将组件添加进入。
例子：
-
拖入
-
组件添加
- 调用
这样，即使是前后端不分离的项目，同样也可以写.vue组件了。 每天一个小知识Get
