https://github.com/hoowc/asp_net_with_vue3
An example about asp net mvc how to using vue
https://github.com/hoowc/asp_net_with_vue3
asp-net-mvc csharp vue3
Last synced: 5 months ago
JSON representation
An example about asp net mvc how to using vue
- Host: GitHub
- URL: https://github.com/hoowc/asp_net_with_vue3
- Owner: HooWC
- Created: 2025-01-10T11:47:07.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-10T11:48:22.000Z (over 1 year ago)
- Last Synced: 2025-08-21T20:25:49.139Z (11 months ago)
- Topics: asp-net-mvc, csharp, vue3
- Language: Vue
- Homepage:
- Size: 959 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Create Vue In WWW
```
MyMvcApp/
│
├── wwwroot/
│ └──frontend/
│ └── src/
│ └── main.js
│ └── App.vue
│ └── vite.config.js # Build 出口在 js 文件夹里
│ └── index.html
│ └── package.json
│
│ └──js/
│ └── main.js # Vue 出口
│
├── Controllers/
│ └── HomeController.cs
├── Views/
│ └── Home/
│ └── Index.cshtml # 引用 Vue 构建文件
```
Open a File Name : Frontend, and then CMD type install
```
npm create vue@latest
npm install
npm install vite-plugin-vue-devtools --save-dev
npm install vue-loader@next vue-router@next
```
index.html
```html
Vite App
```
package.json
```js
{
"name": "vue",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"vite": "^6.0.5",
"vite-plugin-vue-devtools": "^7.7.0"
}
}
```
vite.cofig.js
```js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()], // 使用 vue 插件
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)), // 确保 src 目录存在
},
},
build: {
outDir: '../../js', // 输出到 wwwroot/js 目录
emptyOutDir: true, // 清空旧的构建文件
rollupOptions: {
input: '/src/main.js', // 确保输入文件为 main.js
output: {
entryFileNames: 'main.js', // 入口文件为 main.js
chunkFileNames: 'chunk.js', // 其他的 JS 代码块
assetFileNames: '[name].[ext]' // 静态资源文件名保持原样
}
}
}
});
```
src/main.js
```js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
```
src/App.vue
```vue
Welcome to Vue with Vite!
// Vue 组件逻辑
```
Home/Index.cshtml
```html
@{
ViewData["Title"] = "Home Page";
Layout = null;
}
```
```
npm run build
```
```
F5 run project
```