背景

.net core 与 vue 的简介不再赘述,目前使用vue开发基本分为几种情况:

  • 使用webpack进行纯前端开发
  • 传统的web应用中使用vue,主要使用vue的对象模型绑定

对于使用传统的web+vue进行单页面应用开的几乎没有找到例子,因此决定自己动手尝试,让自己在实际的应用中学习vue,并将自己的学习过程记录下来。个人认为,这种开发方式更适用于此类的猿:

  • 不会使用Node开发,希望使用传统的发布方式进行发布。
  • 为了更爽,希望使用angular、vue等前端框架。
  • 尝试单页应用的开发,如果是传统的web应用,使用vue的例子、教程就很多了。

依赖的环境和开发工具

使用到的技术

  • .net core
  • vue全家桶
  • element ui

先创建一个项目吧

创建应用

打开vs创建一个.net mvc应用 

选择web应用

等待创建完成后,调整目录,删除不必要模板、css引用等。控制器中只保留一个Index。视图只保留Home/Index。 
 
 
最后目录结构如下: 

使用webpack

为工程创建webpack、vue配置文件 
 
配置内容如下: 
app.conf.js

 
 
  1. exports.conf = {
  2. dev: true,//开发模式
  3. assetsSubDirectory:'resources'//资源目录
  4. }

utils.js

 
 
  1. var path = require('path')
  2. var conf = require('./app.conf')
  3. var ExtractTextPlugin = require('extract-text-webpack-plugin')
  4. exports.assetsPath = function (_path) {
  5. return path.posix.join(conf.conf.assetsSubDirectory, _path)
  6. }
  7. exports.cssLoaders = function (options) {
  8. options = options || {}
  9. var cssLoader = {
  10. loader: 'css-loader',
  11. options: {
  12. minimize: !conf.conf.dev,
  13. sourceMap: options.sourceMap
  14. }
  15. }
  16. // generate loader string to be used with extract text plugin
  17. function generateLoaders (loader, loaderOptions) {
  18. var loaders = [cssLoader]
  19. if (loader) {
  20. loaders.push({
  21. loader: loader + '-loader',
  22. options: Object.assign({}, loaderOptions, {
  23. sourceMap: options.sourceMap
  24. })
  25. })
  26. }
  27. // Extract CSS when that option is specified
  28. // (which is the case during production build)
  29. if (options.extract) {
  30. return ExtractTextPlugin.extract({
  31. use: loaders,
  32. fallback: 'vue-style-loader'
  33. })
  34. } else {
  35. return ['vue-style-loader'].concat(loaders)
  36. }
  37. }
  38. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  39. return {
  40. css: generateLoaders(),
  41. postcss: generateLoaders(),
  42. less: generateLoaders('less'),
  43. sass: generateLoaders('sass', { indentedSyntax: true }),
  44. scss: generateLoaders('sass'),
  45. stylus: generateLoaders('stylus'),
  46. styl: generateLoaders('stylus')
  47. }
  48. }
  49. // Generate loaders for standalone style files (outside of .vue)
  50. exports.styleLoaders = function (options) {
  51. var output = []
  52. var loaders = exports.cssLoaders(options)
  53. for (var extension in loaders) {
  54. var loader = loaders[extension]
  55. output.push({
  56. test: new RegExp('\\.' + extension + '$'),
  57. use: loader
  58. })
  59. }
  60. return output
  61. }

vue-loader.conf.js

 
 
  1. var utils = require('./utils')
  2. var conf = require('./app.conf')
  3. module.exports = {
  4. loaders: utils.cssLoaders({
  5. sourceMap: !conf.conf.dev,
  6. extract: conf.conf.dev
  7. })
  8. }

webpack.config.js

 
 
  1. var path = require('path')
  2. var utils = require('./utils')
  3. var webpack = require('webpack')
  4. var conf = require('./app.conf')
  5. function resolve(dir) {
  6. return path.join(__dirname, dir)
  7. }
  8. module.exports = {
  9. entry: {
  10. app: './wwwroot/main.js'
  11. },
  12. output: {
  13. filename: 'bundle.js',
  14. path: path.resolve(__dirname, './wwwroot/dist/')
  15. },
  16. module: {
  17. rules: [
  18. {
  19. test: /\.vue$/,
  20. loader: 'vue-loader'
  21. },
  22. {
  23. test: /\.js$/,
  24. loader: 'babel-loader',
  25. include: [resolve('wwwroot')]
  26. },
  27. {
  28. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  29. loader: 'url-loader',
  30. options: {
  31. limit: 10000,
  32. name: utils.assetsPath('img/[name].[hash:7].[ext]'),
  33. options: {
  34. publicPath: 'dist/resources/img/'
  35. }
  36. }
  37. },
  38. {
  39. test: /\.css$/,
  40. loader: 'style-loader!css-loader'
  41. },
  42. {
  43. test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  44. loader: 'file-loader',
  45. options: {
  46. publicPath: 'dist/'
  47. }
  48. },
  49. ]
  50. },
  51. resolve: {
  52. extensions: ['.js', '.vue', '.json'],
  53. }
  54. };

进入项目的主目录(Startup.cs所在的目录),执行npm命令:

 
 
  1. npm init -y
  2. npm install

wwwroot下创建main.js,目前先测试项目结构是否正常,不引入路由等插件。

 
 
  1. import Vue from 'vue'
  2. import App from './App'
  3. new Vue({
  4. render: h => h(App)
  5. }).$mount('#app')

wwwroot下创建App.vue文件,只简单显示一个字符串

 
 
  1. <template>
  2. <div id="app">
  3. {{msg}}
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'app',
  9. components: {
  10. },
  11. data() {
  12. return {
  13. msg:'Hello Vue'
  14. }
  15. }
  16. }
  17. </script>

编译项目,运行起来吧

可以先在cmd中运行

 
 
  1. npm run build

验证配置无错后运行。也可以直接编译,NPM Task Runner插件会在vs编译时同时运行npm命令。

已经可以正常运行了,下一篇将开始进行正式的应用开发流程。

Logo

前往低代码交流专区

更多推荐