.net core + vue开发单页应用（一）

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

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

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

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

• vs2017（当然也可以是vs2015）
• NPM Task Runner(vs插件，用来在vs中执行npm命令，当然也可以在cmd中直接使用,可以在https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner下载)
• Node环境（webpack依赖Node环境，开发完的应用部署不依赖Node）

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

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命令。

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