{"id":25056697,"url":"https://github.com/hoowc/asp_net_with_vue3","last_synced_at":"2026-02-12T14:34:41.444Z","repository":{"id":271870612,"uuid":"914828980","full_name":"HooWC/ASP_NET_With_Vue3","owner":"HooWC","description":"An example about asp net mvc how to using vue","archived":false,"fork":false,"pushed_at":"2025-01-10T11:48:22.000Z","size":982,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-21T20:25:49.139Z","etag":null,"topics":["asp-net-mvc","csharp","vue3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HooWC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-10T11:47:07.000Z","updated_at":"2025-01-20T05:33:07.000Z","dependencies_parsed_at":"2025-01-10T12:40:39.755Z","dependency_job_id":"b468b950-c7ad-4d43-83e1-1cd76a5295be","html_url":"https://github.com/HooWC/ASP_NET_With_Vue3","commit_stats":null,"previous_names":["hoowc/asp_net_with_vue3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HooWC/ASP_NET_With_Vue3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HooWC%2FASP_NET_With_Vue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HooWC%2FASP_NET_With_Vue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HooWC%2FASP_NET_With_Vue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HooWC%2FASP_NET_With_Vue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HooWC","download_url":"https://codeload.github.com/HooWC/ASP_NET_With_Vue3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HooWC%2FASP_NET_With_Vue3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29368702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T08:51:36.827Z","status":"ssl_error","status_checked_at":"2026-02-12T08:51:26.849Z","response_time":55,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asp-net-mvc","csharp","vue3"],"created_at":"2025-02-06T13:36:52.213Z","updated_at":"2026-02-12T14:34:41.427Z","avatar_url":"https://github.com/HooWC.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Create Vue In WWW\r\n\r\n```\r\nMyMvcApp/\r\n│\r\n├── wwwroot/\r\n│   └──frontend/               \r\n│      └── src/                \r\n│          └── main.js         \r\n│          └── App.vue         \r\n│      └── vite.config.js  # Build 出口在 js 文件夹里   \r\n│      └── index.html       \r\n│      └── package.json \r\n│ \r\n│   └──js/               \r\n│      └── main.js          # Vue 出口\r\n│      \r\n├── Controllers/\r\n│   └── HomeController.cs\r\n├── Views/\r\n│   └── Home/\r\n│       └── Index.cshtml    # 引用 Vue 构建文件\r\n```\r\n\r\n\r\n\r\nOpen a File Name : Frontend, and then CMD type install\r\n\r\n```\r\nnpm create vue@latest\r\nnpm install\r\nnpm install vite-plugin-vue-devtools --save-dev\r\nnpm install vue-loader@next vue-router@next\r\n```\r\n\r\nindex.html\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml lang=\"\"\u003e\r\n  \u003chead\u003e\r\n    \u003cmeta charset=\"UTF-8\"\u003e\r\n    \u003clink rel=\"icon\" href=\"/favicon.ico\"\u003e\r\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\r\n    \u003ctitle\u003eVite App\u003c/title\u003e\r\n  \u003c/head\u003e\r\n  \u003cbody\u003e\r\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\r\n    \u003cscript src=\"/js/main.js\"\u003e\u003c/script\u003e\r\n  \u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\npackage.json\r\n\r\n```js\r\n{\r\n  \"name\": \"vue\",\r\n  \"version\": \"0.0.0\",\r\n  \"private\": true,\r\n  \"type\": \"module\",\r\n  \"scripts\": {\r\n    \"dev\": \"vite\",\r\n    \"build\": \"vite build\",\r\n    \"preview\": \"vite preview\"\r\n  },\r\n  \"dependencies\": {\r\n    \"vue\": \"^3.5.13\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@vitejs/plugin-vue\": \"^5.2.1\",\r\n    \"vite\": \"^6.0.5\",\r\n    \"vite-plugin-vue-devtools\": \"^7.7.0\"\r\n  }\r\n}\r\n```\r\n\r\nvite.cofig.js\r\n\r\n```js\r\nimport { fileURLToPath, URL } from 'node:url'\r\nimport { defineConfig } from 'vite'\r\nimport vue from '@vitejs/plugin-vue'\r\n\r\n// https://vite.dev/config/\r\nexport default defineConfig({\r\n    plugins: [vue()],  // 使用 vue 插件\r\n    resolve: {\r\n        alias: {\r\n            '@': fileURLToPath(new URL('./src', import.meta.url)), // 确保 src 目录存在\r\n        },\r\n    },\r\n    build: {\r\n        outDir: '../../js',  // 输出到 wwwroot/js 目录\r\n        emptyOutDir: true,           // 清空旧的构建文件\r\n        rollupOptions: {\r\n            input: '/src/main.js',     // 确保输入文件为 main.js\r\n            output: {\r\n                entryFileNames: 'main.js',  // 入口文件为 main.js\r\n                chunkFileNames: 'chunk.js', // 其他的 JS 代码块\r\n                assetFileNames: '[name].[ext]'  // 静态资源文件名保持原样\r\n            }\r\n        }\r\n    }\r\n});\r\n```\r\n\r\nsrc/main.js\r\n\r\n```js\r\nimport { createApp } from 'vue';\r\nimport App from './App.vue';\r\n\r\ncreateApp(App).mount('#app');\r\n```\r\n\r\nsrc/App.vue\r\n\r\n```vue\r\n\u003ctemplate\u003e\r\n    \u003cdiv\u003e\r\n        \u003ch1\u003eWelcome to Vue with Vite!\u003c/h1\u003e\r\n    \u003c/div\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript setup\u003e\r\n    // Vue 组件逻辑\r\n\u003c/script\u003e\r\n```\r\n\r\n\r\n\r\n\r\n\r\nHome/Index.cshtml\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"Home Page\";\r\n    Layout = null;\r\n}\r\n\r\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\r\n\r\n\u003c!-- 引入 Vue 构建后的 JS 文件 --\u003e\r\n\u003cscript src=\"~/js/main.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n\r\n\r\n```\r\nnpm run build\r\n```\r\n\r\n```\r\nF5 run project\r\n```\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoowc%2Fasp_net_with_vue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoowc%2Fasp_net_with_vue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoowc%2Fasp_net_with_vue3/lists"}