(初识MVC Core)三、包的安装NPM与打包--css和js

一:NPM的安装

1.右键项目=》添加新建项=》创建NPM配置文件

2.新增引用插件包(会出现自动提示),写完一个之后,保存一下,就会自动安装插件包

显示所有隐藏文件就可以看到安装的插件包了

二:js和css打包bundleConfig.json

1.新建一个名为bundleConfig.json的json

2.打包

1)在项目wwwroot底下创建文件夹js和css

2)修改bundleConfig.json内容

[
  //css
  {
    //打捆生成的css文件路径和名称并压缩
    "outputFileName": "wwwroot/css/all.min.css",
    "inputFiles": [
      //需要打捆的css文件路径和名称
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/css/bootstrap.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    "minify": {
      "enabled": false//是否压缩(开发使用)
    }
  },
  //js
  {
    "outputFileName": "wwwroot/js/all.min.js",
    "inputFiles": [
      "node_modules/jquery-slim/dist/jquery.slim.js",
      "node_modules/popper.js/dist/js/popper.js",
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  },
  {
    "outputFileName": "wwwroot/js/vendor.js",
    "inputFiles": [
      "node_modules/jquery-slim/dist/jquery.slim.js",
      "node_modules/popper.js/dist/js/popper.js",
      "node_modules/bootstrap/dist/js/bootstrap.js"
    ],
    "minify": {
      "enabled": false
    }
  }
]

3)使用Nuget安装BuildBundlerMinifier

4)安装后执行一下,生成

参阅:https://v.qq.com/x/page/r0745234k98.html

谢谢Dave

原文地址:https://www.cnblogs.com/dzw159/p/10569123.html

时间: 2024-08-28 00:14:53

(初识MVC Core)三、包的安装NPM与打包--css和js的相关文章

初识MVC Core(一)

1.新建一个Mvc Core项目 注:刚开始依赖项是有黄色三角形,等待安装 2.打开Startup.cs,修改Configure public void Configure(IApplicationBuilder app, IHostingEnvironment env,ILogger<Startup> logger) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.Run(async (context)

(初识MVC Core)八、发布

1.部署方式 1)FDD(Framework-dependent) 说明:类似IIS网站类的部署,服务器上面必须安装好Framework环境,只发布自己程序文件生成的文件 优势: ①无需配置目标系统 ②部署的文件很小 ③.NET Core被共享使用 劣势: ①必须预先安装.NET Core ②可能存在兼容性问题 2)SCD(Self-Contained),自包含的部署 说明:打包好了的.NET Core包,一同发布,省得在服务器安装.NET Core环境 优势: ①对Web应用使用的.NET C

(初识MVC Core)七、复用的View:View Component

1.优点: 1)相当于PartialView + 一个小型轻量级的Controller(注:PartialView无法包含业务逻辑) 2)适用于较为复杂业务 3)可以使用Razor语法 2.创建View Component 结构: 1)创建ViewComponents文件夹.MovieCountViewComponent.cs using CoreModel; using CoreModelTwo.Services; using Microsoft.AspNetCore.Mvc; using S

(初识MVC Core)二、建立基础逻辑数据

1.结构 2.新建一个model类库CoreModel 建立model:Cinema.cs.Movie.cs.Sales.cs using System; using System.Collections.Generic; using System.Text; namespace CoreModel { /// <summary> /// 电影院 /// </summary> public class Cinema { /// <summary> /// 编码 ///

Linux安装npm并打包前端代码

查看node版本$ node -v查看npm版本$ npm -v如果没有安装node及npm,需要先安装node及npm#yum install node# yum install npm安装cnpm并切换淘宝镜像(使用国外镜像速度慢)$ npm install -g cnpm --registry=https://registry.npm.taobao.org查看cnpm信息$ cnpm i使用npm打包前端vue代码$ npm run build运行dev$ npm run dev 原文地址

简洁的MVC思想框架——Nancy(Post操作与外部引用css和JS)

之前介绍了关于Nancy配置与Get基础操作,以下来介绍有关Nancy的Post操作. 第一步,设计主界面,以登录界面为例:Login.cshtml 路径为: 设计好页面后,在之前的modules类中设定指向路径和相关post操作,如下图所示: <body> <div id="login"> <form action="/Home" method="post" id="form1"> <

.Net Core(三)MVC Core

MVC Core的改动感觉挺大的,需要的功能大多从Nuget安装,还内置了IOC,支持SelfHost方式运行等等. 一.项目结构的变化创建的新MVC项目的结构发生了变化,比如:静态文件需要统一放置到wwwroot文件夹,配置文件变成了appsettings.json,用startup.cs文件代替了global文件:原先对view命名空间的引用配置在view下的web.config,现在则改成了使用_ViewImport.cshtml文件,并且用razor语法来配置. 二.内置IOCa)Aut

NPM包的安装及卸载

NPM全名:node package manager,是node包管理工具,负责安装.卸载.更新等.新版的NodeJS已经集成了npm.所以装好NodeJS的同时,npm也已经装好了! 可以用cmd命令测试是否安装成功,出现版本就表示可以了. 本地安装与全局安装 命令行的区别只在于是否有-g而已: 本地安装: 1.将安装放在./node_modules下(运行npm时所在的目录). 2.可以通过require()引入本地安装的包 全局安装: 1.将安装包放在 /usr/local 下或者你 no

安装npm包的时候报错rollbackFailedOptional: verb npm-session

报这个问题是因为npm代理的问题,解决办法: 1. 可以临时使用淘宝镜像 npm --registry https://registry.npm.taobao.org install 你想安装的npm包名称 解析:registry是npm 模块仓库提供了一个查询服务,叫做 registry .以 npmjs.org 为例,它的查询服务网址是 https://registry.npmjs.org/ .通过 https://registry.npm.taobao.org这个服务网址 进行npm包的安