Want to use ASP.NET + vue.js to build a single page application, will involve more components (various buttons, etc.), which boss has this kind of experience?

rookie, want to know if anyone has integrated webform + vue single page application?

because there is currently a task: consider refactoring an old report project.
how the project works:
1. The front-end configuration of some database query statement parameters and other configuration items persisted to the database.
2. When calling, read these configuration items of the report in the database through id, and then query the database, return the results to the front end, and then splice the strings through juqery to spell out the whole page, and finally render. Somewhat similar to:
case "paging control": render paging control
case "chart": render echarts.
case "grid": render table.
Last html (data);

learned that vue seems to have this feature of component reuse and wanted to see if it could be integrated.

currently used technologies:
jquery (operation splicing dom and data),
ashx (interface control layer),
aspx (page container)

Vue.js has been used directly through < script > on some simple pages in other projects. Know some simple vue syntax.

want to know:
1. If you develop with this component, can you continue to work better on VS2017 (syntax hints, etc.)? Or should I cut IDE? Switch to vscode?
2. Whether you also need to know about vue-cli,vue-x,vue-router and other related ecology (I belong to the server, but the pages related to the business data used internally, such as reporting, do not belong to the front-end processing, and the front-end has other business to deal with. )?
3. To sum up, I hope to update the current technology stack, but the cost is not clear, so I have checked it a little bit. It is recommended to write typescript and vue in vscode (ts seems to have better support in vs2017, so you want to do this in ts+vue). Then I tried to compile ts in vs2017, but it didn"t work. Prompt can not find that tsc file, do not know where is not configured right, according to the official website tutorials on the new two 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
}

is there a boss who can give me some advice? be deeply grateful!

Vue.js asp.net typescript
May.17,2022

1. Create a webapi project using ASP.NET to write the back-end interface.
2. Use vue-cli to initialize a vue family bucket front-end project.

generally speaking, the front and rear ends are separated, with vue in the front end and webapi in the back end.

so far, two solutions have been found, which can be shown to the students who may need it later.

scenario 1

there seems to be a library called http-vue-loader that fits the old pattern and is also introduced through the < script > tag. For example, 

<!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: '-sharpmy-app',
        components: {
            'my-component': httpVueLoader('my-component.vue')
        }
    });
</script>
</body>
</html>

this allows you to load the my-component.vue in the same directory as the current .apsx page into the page. This plan seems more feasible. Note, however, that if you use it this way, you have to add mimeType to the applicationhost.config under the .vs file before you can use it:
< mimeMap fileExtension= ".vue" mimeType= "application/javascript" / >
otherwise you will throw an exception that the .vue file cannot be found.
address of the library: https://github.com/FranckFrei...

scenario 2

use vue-cli to quickly build a vue project in the old target project. The specific step is to first create a webform project, and then build a vue project under this project, select to show the hidden file in vs, and include it in. The specific directory level at which vue should be created can be found after several attempts. For more information on the use of vue-cli, please see https://blog.csdn.net/wulala_...

.

Let's briefly talk about the pros and cons of the two options.

Scheme 1
due to the use of scaffolding tools, it has the advantages of real-time saving and real-time preview of the effect in the browser. However, you need to configure packaging tools such as npm,webpack, and execute instructions such as npm run dev each time you debug. At the same time, the packaged files are compressed, so it is more difficult to debug without the source code. When used, the cost will be slightly higher than that of 2.

Program 2
does not use any scaffolding tools, using the traditional < script > way to introduce js files, the advantage is that there is no need to configure a variety of additional tools, you can debug directly on the page, after the release of js will not be compressed, it is more convenient to view, but because there is no compression, the file volume will be slightly larger, while unable to save without refresh preview.

Previous: Is there a powerful js timer class that works well?

Next: How to introduce md File in react

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e90dfd-130f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e90dfd-130f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?