net core + vue

时间:2018-12-11
本文章向大家介绍net core + vue,主要包括net core + vue相关应用实例、知识点总结和注意事项,具有一定的参考价值,需要的朋友可以参考一下。
node.js下载地址   https://nodejs.org/en/download/
安装完成后 找到 Node.js command prompt  打开即为node的命令窗口
执行命令       npm install -g @vue/cli
查看vue版本   vue --version
创建一个新项目  vue create hello-world
运行项目            npm run serve
打包项目             npm run build
打包之后得到dist文件夹  可以将打包的发布到IIS 参考  https://www.jianshu.com/p/7cc266438f09 


新建net core项目
nuget 安装 
Microsoft.AspNetCore.SpaServices 2.11
VueCliMiddleware 2.11
把 hello-world项目复制到core项目根目录

  public void ConfigureServices(IServiceCollection services)
  {
       services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

       services.AddSpaStaticFiles(configuration => { configuration.RootPath = "hello-world/dist"; });
  }


    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "hello-world";

         if (env.IsDevelopment())
         {
            spa.UseVueCli(npmScript: "serve", port: 8080); // optional port
         }
    });

直接运行项目即可 访问 http://localhost:8080/ 就是你的core项目啦