.net mvc + vuejs 的项目结构
.net项目结构:程序目录结构:vue操作:前提:安装npm ,vue,vue-cli1、进入控制台窗口2、进入程序目录3、运行 vue init webpack webjs生成webjs及其子目录4、cd webjs5、npm install安装依赖包6、修改vue配置文件: webjs/config/index.js ,内容:// see http:/
·
.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>
更多推荐
已为社区贡献11条内容
所有评论(0)