[转].net mvc + vuejs 的项目结构
.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 的项目结构的更多相关文章
- 从零开始写C# MVC框架之--- 项目结构
框架总分2个项目:Web开发项目.帮助类项目 (ZyCommon.Zy.Utilities) 1.ZyCommon,是Web开发项目结构.新建一个空解决方案,再建Data.Service.ZyWeb解 ...
- MVC 5 第二章 项目结构
通过本章学习,你将了解到一个MVC 5应用程序的项目组成以及项目文件的相关信息,从而更好地架构设计出自己的项目结构. 单从MVC的字面意思我们便能够注意到M-模型, View-视图, Controll ...
- MVC项目创建与项目结构介绍
一.创建MVC项目 打开VS202,点击:文件—>新建—>项目—>Web—>Asp.Net MVC 4 Web应用程序 填好项目名称.解决方案名称和文件存放位置,然后点击确定, ...
- 1.2 认识ASP.NET MVC项目结构
1.开发环境 操作系统:xp.vista.windows 7.windows 8.windows server 2003|2008|2008R2|2012: 集成开发环境IDE: Vsiual Stu ...
- Django--基本篇:项目结构与设计模式(MVC)
Django在项目开发中有着结构清晰.层次明显.容易编写理解查阅demo的优点,那么我们来个小案例具体看看. 一.项目结构简析: 我们按照上一篇中的开发流程步骤创建一个新项目myblog,项目下 ...
- .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI
作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...
- 使用Asp.Net Core MVC 开发项目实践[第一篇:项目结构说明]
先从下图看整体项目结构: Mango.Manager: 为后台管理项目 Mango.Web: 为前台项目 Mango.Framework.Core: 为常用的基础操作类项目 Mango.Framewo ...
- 《ASP.NET MVC 5 破境之道》:第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构
第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构 接下来,我们来看看,VS为我们自动创建的项目,是什么样子的? 可以通过菜单中[View]->[Solution Explo ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 01. 创建项目 +项目结构和配置简介
新建项目:Tutotial.Web 解决方案名称可以把web去掉 视频里面把git这个选项勾选了.我就不勾选了 dotnet CLI创建项目 首先必须安装好了.net Core的SDK dotnet ...
随机推荐
- 【深入学习linux】VMware新建虚拟机教程
新建虚拟机 1. 点击创建新的虚拟机 2.进入新建向导,选择典型安装,点击下一步 3.为什么不选择第二个选项是因为系统会默认帮助我们安装一个简单配置,这里我们需要学习配置安装所以选择第三项,然后点击下 ...
- PP篇11 增、改生产订单组件BAPI
增.改生产订单组件BAPI BAPI_ALM_ORDER_MAINTAIN USE BAPI_ALM_ORDER_MAINTAIN TO CREATE OR CHANGE PM WORK ORDER ...
- copyProperties 忽略null值字段
在做项目时遇到需要copy两个对象之间的属性值,但是有源对象有null值,在使用BeanUtils来copy时null值会覆盖目标对象的同名字段属性值,然后采用以下方法找到null值字段,然后忽略: ...
- k8s pv,pvc无法删除问题
一般删除步骤为:先删pod再删pvc最后删pv 但是遇到pv始终处于“Terminating”状态,而且delete不掉.如下图: 解决方法: 直接删除k8s中的记录: 1 kubectl patch ...
- python:当文件中出现特定字符串时执行robot用例
#coding:utf-8 import os import datetime import time def execute_rpt_db_full_effe_cainiao_city(): fla ...
- webpack打包时候去掉console.log配置
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true,//console pure ...
- idea关闭sonarLint自动扫描
手动运行SonarLint 停止SonarLint自动检测代码之后,可以使用Ctrl+Shift+S手动运行SonarLint检查代码
- PHP计算两个坐标之间的距离
<?php /** * 计算两点之间的距离 * @param $lng1 经度1 * @param $lat1 纬度1 * @param $lng2 经度2 * @param $lat2 纬度2 ...
- 04 javascirpt基础知识---听课笔记
1.JavaScript概念 一门客户端脚本语言运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎脚本语言:不需要编译,直接就可以被浏览器解析执行了 * 功能:可以来增强用户和ht ...
- [转帖]华为一枝独秀!Q3国内智能手机出货量公布:Ov、小米、iPhone侧目
华为一枝独秀!Q3国内智能手机出货量公布:Ov.小米.iPhone侧目 https://news.cnblogs.com/n/645880/ 华为真生猛.. 作者:花生酱 国内手机市场份额争夺激烈,你 ...