主要借助的是html-webpack-plugin这个插件以及webpack externals这个属性
众所周知使用.net core 与vue开发项目，往往是前后端分离的两个项目。前端用vs code 或者webstorm开发，后端用vs开发。 然而还有一种方式是放在同一个项目中，vs一起编译。都在vs下面开发。特此记录一下。 本文章针对已经熟悉.net core 及vue的小伙伴们，但未曾尝试一起开发的小伙伴。
dist目录存放编译后的资源 src存放源码文件 运行命令 npm init -y
本文记录 webpack 的安装和使用，并且使用 webpack 搭建 vue 简易脚手架的过程
前后端分离项目如果做成 SPA（单页面）的形式，就必然面临一个首屏加载的问题，因为默认情况下首页文件比较大，可能超过 1 MB，进而带来首页加载很慢的问题。所以我们要通过优化，来提高首页的加载速度。
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
安装依赖包 (-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的)
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 标签引入。
如果我们对所有的代码进行合理的拆分，将首屏和非首屏的代码进行剥离，将业务代码和基础库代码进行拆分，在需要某段代码的时候再加载它，下次若再需要用则从缓存中读取...
前言 在http1的时代，比较常见的一种性能优化就是合并http的请求数量，通常我们会把许多js代码合并在一起，但是如果一个js包体积特别大的话对于性能提升来说就有点矫枉过正了。而如果我们对所有的代码进行合理的拆分，将首屏和非首屏的代码进行剥离，将业务代码和基础库代码进行拆分，在需要某段代码的时候再加载它，下次若再需要用则从缓存中读取，一来可以更好地使用浏览器缓存，再者就是可以提高首屏加载速度，很好提升用户的体验。 核心思想 业务代码和基础库的分离 这个其实很好理解，业务代码通常更新迭代很频繁，而基础库通常
打包成功之后，查看dist目录下的index.html文件是否引用了打包之后的js
Vite是什么就不用笔者多说了，用过Vue的朋友肯定都知道，本文会通过手写一个非常简单的乞丐版Vite来了解一下Vite的基本实现原理，参考的是Vite最早的版本（vite-1.0.0-rc.5版本，Vue版本为3.0.0-rc.10）实现的，现在已经是3.x的版本了，为什么不直接参考最新的版本呢，因为一上来就看这种比较完善的工具源码比较难看懂，反正笔者不行，所以我们可以先从最早的版本来窥探一下原理，能力强的朋友可以忽略~
在 React 和 Vue 之间存在许多相似性。Vue 的设计理念充分汲取了 Angular 和 React 的优点并将它们结合起来，所以如果你真的特别喜欢 React 所拥有的每个特性，那么在Vue 中同样可以发现它们。但是，React 和 Vue 之间除了拥有很多相似性，还有很多差异性。这里所指的差异性不包含所有细微的差异 —— 语法差异、方法名称差异 —— 仅包含那些在框架基本层面中所体现的差异性。
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
随vue技术逐渐成熟，开发者们热爱的脚手架vue-cli也一步步升级优化。在体验度不断上升的过程中，也必不可少的要踩一些坑。 本篇主要记录下在vue-cli2.x升级到3.x以及用Mac系统的踩坑记录。
小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.
此时浏览器会访问 http://localhost:8080/ ，看到 Welcome to Your Vue.js App 的界面就算成功了。
松哥最近正在录制 TienChin 项目视频～采用 Spring Boot+Vue3 技术栈，里边会涉及到各种好玩的技术，小伙伴们来和松哥一起做一个完成率超 90% 的项目，戳戳戳这里-->TienChin 项目配套视频来啦。 ---- TienChin 项目也是一个前后端分离项目，前后端分离项目如果做成 SPA（单页面）的形式，就必然面临一个首屏加载的问题，因为默认情况下首页文件比较大，可能超过 1 MB，进而带来首页加载很慢的问题。所以我们要通过优化，来提高首页的加载速度。 问题的解决，一般来说有这样几
「本文之前发过，但是比较零散，这里我把用到的方案都汇总一下，方便大家索引，有需要的小伙伴可以收藏下方便查找。里边提到的几种方案，大家都可以对照着视频试一下」
按需加载是所有组件库都会提供的一个基础能力，本文会分析ElementUI、Vant及varlet几个组件库的实现并进行相应实践，帮助你彻底搞懂其实现原理。
本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点：
本文主要介绍如何在Vue项目中使用ArcGIS JS API进行开发，文中使用的JS API是目前最新版本的ArcGIS JS API 4.14，主要是在Vue项目demo中用JS API实例化了一张二维地图。
传统的h5只有1端，即浏览器。而uni-app可跨多端，虽仍属前端，与传统h5有不同。 如果你对h5比较了解，可通过本文快速了解uni-app。
推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
有些针对 @vue/cli 的全局配置，例如你惯用的包管理器和你本地保存的 preset，都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
默认 webpack 只能处理 js 文件，如果在 js 文件中导入了 css 代码：
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。
新建 tailwind.css,在 src/assets 新建 css 文件夹，并新建 tailwind.css
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
新增App.vue文件,使用IDEA新建,如果没有的话在Setting->plugin中安装vue插件
vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案：
修改页面后重新打包，测试人员在确认问题时总是说没改，页面没有变化，需要进行繁琐的清缓存操作才能获取到最新版本。
Vue引入bootstrap主要有两种方法 方法一：在main.js中引入 此方法导入的bootstrap中对于html，body的一些预设置的css样式可能无效。 一、引入jQuery 在当前项目的目录下（就是package.json），运行命令 cnpm install jquery --save-dev 若是运行报错，则运行cnpm install jquery （cnpm和npm都可以）这样就将jquery安装到了这个项目中。 然后修改webpack.base.conf.js(在build文件下)
在前面的篇章中，已经说明了 webpack4 的基本使用，那么本章节开始在 webpack4 中构建vue项目，同时对比看看这种构建方式，与在网页script导入 vue.js 中的区别。
以前使用 JQuery 开发前端页面的时候，页面中引用的资源文件如js、css等，一般尾部加一个 t=[时间戳] 参数，用于防止修改不生效。现在工程化开发，使用 Webpack 编译，打包的资源文件路径里自动带有一串随机字符串，称为 hash：
起步 创建项目目录 mkdir webpack-vue3-demo 初始化 package.json npm init -y 参考文档 安装 webpack webpack-cli webpack-dev-server webpack-merge npm install webpack webpack-cli webpack-dev-server webpack-merge --save-dev 创建配置文件 mkdir build cd build touch webpack.b
webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用
bootstrap-css：【<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">】
loader加载器是webpack的核心之一，其用于将不同类型的文件转换为webpack可识别的模块，即用于把模块原内容按照需求转换成新内容，用以加载非js模块，通过配合扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果，从而完成一次完整的构建。
大致说一下项目的背景：我们做了一个拖拽生成报表的系统，通过拖拽内置的组件供用户定制自己的报表形态，但毕竟内置的组件有限，可定制性不高，那么给用户开放一个 code 组件，让用户自己通过写template + js + css的方式自由定制岂不是妙哉。
现在大多项目都是前后端分离的，但是如果前后端都是一个人做，前后端来回切也挺不方便的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
