问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

想用ASP.NET + vue.js构建一个单页面应用，会涉及到比较多的组件(各种按钮等)，有哪位大佬有这方面的经验吗？

头像
晓天
    9123

    新手菜鸟，想要了解一下有没有人有整合过webform + vue 的单页面应用？

    因为目前有一个任务是：考虑重构一个旧的报表项目。
    该项目运作原理：
    1.将前端配置一些数据库查询语句参数等配置项持久化到数据库中。
    2.调用的时候通过id读取数据库中该报表的这些配置项，然后进行数据库查询，把结果返回到前端，前端再通过juqery进行字符串拼接，把整个页面拼出来，最后渲染。有点类似于:
    case '分页控件' : 渲染分页控件
    case '图表' : 渲染echarts。
    case '网格' : 渲染table。
    最后html(data);

    了解到vue似乎有这种组件复用的特性,想看看能否整合。

    目前使用到的技术:
    jquery(操作拼接dom和数据),
    ashx(接口控制层),
    aspx(页面容器)

    在其他的项目中的一些简单的页面上有通过<script>直接引的方式使用过Vue.js。会一些简单的vue语法。

    希望了解：
    1.如果使用这种组件的方式开发，能否继续在VS2017上比较好的工作(语法提示等)？还是要切IDE？换到vscode？
    2.是否还需要了解一下vue-cli，vue-x，vue-router等相关生态（我属于服务端，但是出报表这种内部使用的业务数据相关的页面又不属于前端处理，前端有其他的业务需要处理。）？
    3.综合起来说就是，希望更新当前的技术栈，但是成本不太明确，有稍微查了一下。都是推荐在vscode中写typescript和vue的(ts似乎在vs2017中会有比较好的支持，所以有想ts+vue这样)。然后想试试在vs2017中编译ts，也没成功。提示找不到那个tsc文件，不知道是不是哪儿没配置对，有按照官网教程上新建那两个json。
    package.json:
    {
    "version": "1.0.0",
    "name": "asp.net",
    "private": true,
    "devDependencies": {

    "gulp": "3.9.0",
"del": "2.2.0"

    }
    }

    tsconfig.json:
    {
    "compilerOptions": {

    "noImplicitAny": true,
"noEmitOnError": true,
"sourceMap": true,
"target": "es5"

    },
    "files": [

    "./app.ts"

    ],
    "compileOnSave": true
    }

    有大佬能指点指点吗？感激不尽！

    Microsofttypescriptasp.netvue.js
    阅读 6.8k
    2 个回答
    得票最新
    头像
    孟思行
      2.1k1920
      ✓ 已被采纳

      1、使用 ASP.NET 创建一个 webapi 的项目，用来写后端接口。
      2、使用 vue-cli 初始化一个 vue 全家桶前端项目。

      总的来说就是做成前后端分离，前端用vue，后端用webapi。

      头像
      晓天
        9123

        目前找到了两种方案，可以给后续有可能会有需要的同学看看吧。

        方案1

        似乎有一个名为http-vue-loader的库比较符合旧有的模式，也是通过<script>标签进行引入。如：

        <!doctype html>
<html lang="en">
<head>
    <title>ceshiye</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
</head>

<body>
<div id="my-app">
    <my-component></my-component>
</div>

<script type="text/javascript">
    new Vue({
        el: '#my-app',
        components: {
            'my-component': httpVueLoader('my-component.vue')
        }
    });
</script>
</body>
</html>

        这样就可以将与当前的.apsx页面同级目录下的my-component.vue加载到页面中使用。 这个方案似乎比较可行。 但是需要注意，如果这样使用，要在.vs文件下的applicationhost.config中添加mimeType 才能使用：
        <mimeMap fileExtension=".vue" mimeType="application/javascript" />
        否则会抛出找不到.vue文件的异常。
        该库的地址：https://github.com/FranckFrei...

        方案2

        在旧的目标项目中使用vue-cli快速搭建一个vue项目。具体步骤为先创建一个webform的项目，然后在该项目下搭建vue项目，在vs中选择展示隐藏文件，将其include进来。 具体的vue应在何目录层级创建多尝试几次就能找对，关于vue-cli的使用可以看这：https://blog.csdn.net/wulala_...

        下面简要谈谈两种方案的优劣吧。

        方案1
        由于采用了脚手架工具，拥有可以实时保存，实时在浏览器中预览效果的优点。但是需要配置npm，webpack等打包工具，每次调试需要执行npm run dev 等指令。同时打包出来的文件是压缩过的，离开源码就比较难以调试。使用起来，与2对比成本会略大。

        方案2
        不使用任何脚手架工具，采用传统的<script>方式引入js文件，优点为不需要配置各种额外的工具，直接就能在页面上进行调试，发布后js不会被压缩，查看较为方便，但是因为没有压缩，文件体积就会略大，同时无法做到保存后无刷新预览。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题