.net项目结构:


程序目录结构:


vue操作:
前提:安装npm ,vue,vue-cli
1、进入控制台窗口
2、进入程序目录
3、运行 vue init webpack webjs 生成webjs及其子目录
4、cd webjs
5、npm install 安装依赖包
6、修改vue配置文件: webjs/config/index.js ,内容:

 // see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path') module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../../sccod/views/home/index.cshtml'),
assetsRoot: path.resolve(__dirname, '../../sccod/'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target: 'http://localhost:3472',
changeOrigin:true,
pathRewrite:{
'^/api': '/api'
}
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}

达到目的:
发布时,运行命令 npm run build ,将在.net mvc 的视图中生成index.cshtml文件,在.net mvc的根建立static目录并将vuejs用到的内容生成在这个地方。
调试时,proxyTable的配置提供了一个映射关系,将http://localhost:8080/api/operator/test的访问指向了http://localhost:3472/api/operator/test。

通过修改app.vue文件内容进行测试:

<template>
<div id="app">
<img src="./assets/logo.png">
<div v-html="svrtest"></div>
<router-view></router-view>
</div>
</template> <script>
require('@/util/util.js');
export default {
name: 'app',
data(){
return{
svrtest:''
};
},
mounted(){
this.$http.post('/api/operator/test').then(response=>{
console.log(response.body);
var obj = response.body;
for(var item in obj){
this.svrtest += '{0}={1}<br>'.format(item,obj[item]);
}
},response=>{
console.log('err',response);
})
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

[转].net mvc + vuejs 的项目结构的更多相关文章

  1. 从零开始写C# MVC框架之--- 项目结构

    框架总分2个项目:Web开发项目.帮助类项目 (ZyCommon.Zy.Utilities) 1.ZyCommon,是Web开发项目结构.新建一个空解决方案,再建Data.Service.ZyWeb解 ...

  2. MVC 5 第二章 项目结构

    通过本章学习,你将了解到一个MVC 5应用程序的项目组成以及项目文件的相关信息,从而更好地架构设计出自己的项目结构. 单从MVC的字面意思我们便能够注意到M-模型, View-视图, Controll ...

  3. MVC项目创建与项目结构介绍

    一.创建MVC项目 打开VS202,点击:文件—>新建—>项目—>Web—>Asp.Net MVC 4 Web应用程序 填好项目名称.解决方案名称和文件存放位置,然后点击确定, ...

  4. 1.2 认识ASP.NET MVC项目结构

    1.开发环境 操作系统:xp.vista.windows 7.windows 8.windows server 2003|2008|2008R2|2012: 集成开发环境IDE: Vsiual Stu ...

  5. Django--基本篇:项目结构与设计模式(MVC)

    Django在项目开发中有着结构清晰.层次明显.容易编写理解查阅demo的优点,那么我们来个小案例具体看看.    一.项目结构简析: 我们按照上一篇中的开发流程步骤创建一个新项目myblog,项目下 ...

  6. .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI

    作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...

  7. 使用Asp.Net Core MVC 开发项目实践[第一篇:项目结构说明]

    先从下图看整体项目结构: Mango.Manager: 为后台管理项目 Mango.Web: 为前台项目 Mango.Framework.Core: 为常用的基础操作类项目 Mango.Framewo ...

  8. 《ASP.NET MVC 5 破境之道》:第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构

    第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构 接下来,我们来看看,VS为我们自动创建的项目,是什么样子的? 可以通过菜单中[View]->[Solution Explo ...

  9. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 01. 创建项目 +项目结构和配置简介

    新建项目:Tutotial.Web 解决方案名称可以把web去掉 视频里面把git这个选项勾选了.我就不勾选了 dotnet CLI创建项目 首先必须安装好了.net Core的SDK dotnet ...

随机推荐

  1. css3实现左侧固宽,右侧随着屏幕,右侧随着屏幕变化而变化

    A, ----float+calc(css3新属性计算属性)方式 <div class="Father"> <div class="LeftChildr ...

  2. PostgreSQL--with子句

    在PostgreSQL中,WITH查询提供了一种编写辅助语句的方法,以便在更大的查询中使用.它有助于将复杂的大型查询分解为更简单的表单,便于阅读.这些语句通常称为公共表表达式(Common Table ...

  3. XCode教程之 如何在苹果开发者平台添加设备UDID

    XCode教程之 如何在苹果开发者平台添加设备UDID.在Xcode开发中,如何在苹果开发者平台添加新的手机设备UDID,进行测试,具体如下 工具/原料 Apple Developer 方法/步骤 1 ...

  4. [转]CSS3 使用 calc() 计算高度 vh px

    1.px 像素,我们在网页布局中一般都是用px. 2.百分比 百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了. 3.Viewport    viewport:可视窗口,也 ...

  5. apt与apt-get命令的区别

    apt 和 apt-get的区别 Debian 作为 Ubuntu.Linux Mint 和 elementary OS 等 Linux 操作系统的母板,其具有强健的「包管理」系统,它的每个组件和应用 ...

  6. ThinkPHP 控制器不存在问题排查

    新手经常会遇到这种问题,提示控制器找不到,一般的情况如下: 1. 命名空间地址错误 检查你的控制器命名空间是否正确

  7. python中的捕获异常、异常跟踪

    # 捕获异常,打印异常信息 try: 1/0 except Exception as e: print(e) 输出结果是integer division or modulo by zero,只知道是报 ...

  8. 转 zabbix debug and zabbix使用percona插件监控mysql

    ########## https://www.cnblogs.com/keithtt/p/8542987.html zabbix使用percona插件监控mysql   1.添加percona仓库. ...

  9. ucos III中任务之间的数据通信和任务划分

    1. 如果将关系密切(比如两个任务之间需要经常收发数据)的若干功能分别用不同的任务来实现,则需要进行大量的任务之间数据通信和同步通信,这系统来说是一个很大的负担.因此应该将关系密切的若干功能组合成一个 ...

  10. ue4 优化建议与经验

    转自:https://dawnarc.com/2016/12/ue4%E4%BC%98%E5%8C%96%E5%BB%BA%E8%AE%AE%E4%B8%8E%E7%BB%8F%E9%AA%8C/ 内 ...