随着前端模块化的兴起，特别在 vue、react等一些热门框架的崛起，越来越多的公司加入了这一阵营。提及前端的模块化（这里主要说的是Javascript语言的模块化），就不得不说 es6标准提出的 export 和 import 两个命令了。当然还有 commonJS里的 module.exports 和 require 这一对组合了，这里暂不介绍这两组命令的具体用法。以后 我会专门写一篇文章介绍这两个命令的用法。我们以 es6中的 export 和 import 为例，介绍一下：
近些年前端开发快速发展，现在学习前端已经不像以前那样仅仅学习一个语法就可以了，它已经是一门编程技术了，它们有自己独立的类似Main函数的入口，有像MVC一样规范好的层次结构，有自己的开发工具可以发布打包程序，甚至还可以独立连接数据库，当然了，优点与缺点共存，不能向其他语言那样断点调试导致了，它的脉络更难被捕捉，犹如远古时代的代码开发一样，但它还是已经可以称为一门编程技术了，所以学习一门前端开发，已经是一件非常有意义的事儿了。
对于大型前端项目，比如公司内部管理系统（一般包括 OA、HR、CRM、会议预约等系统），如果将所有业务放在一个前端项目里，随着业务功能不断增加，就会导致如下这些问题：
之前已经创建了vue项目，并且将基本的配置都配置了，比如路由，跨域都配置好了，现在就开始开发组件了。
这里也做了一点变更，uniapp的实现中是如下形式，main.js和页面.vue会命中同一个loader（见node_modules/@dcloudio/webpack-uni-mp-loader/lib/main-new.js），然后在这个loader里面根据是是否有resouceQuery来区别处理（显然main.js没有，而页面.vue有。
3.项目结构 开始编码前，我们先了解下项目的结构。 3.1.目录结构 3.2.调用关系 我们最主要理清index.html、main.js、App.vue之间的关系： 理一下： index.html：
在 router.js 中，我们需要使用 Vue Router 进行路由的配置。我们可以在这个文件中定义各个页面的路径以及对应的组件，并导出一个路由对象。例如：
真实项目开发过程中，我们都是使用组件化的去开发vue的项目，但是组件化的思想又是如何来的呢？下面就从开始讲解演变过程
在之前的一系列vue.js文章，我们都是用传统模式引用vue.js以及其他的js文件的，这在开发时会产生一些问题。
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0
正文之前，由于这是一个系列的文章，可能第一次看到的看官老爷们会觉得突兀，如果你是webpack新手，我建议你先从前几篇文章看起，如果你对webpack有一些了解，也希望可以在github上下载代码，对照着看会更有效果 在当代的前端开发中，很少会用原生JS来开发页面，最基本的都会使用jQuery来节省我们开发的时间和效率，而angular，vue，react的出现更是为前端开发者带来了福音。那么这篇文章就说说如何用webpack来打包引入第三方框架（类库）。如果单纯的引入jQuery或者其他第三方类库
每日匆匆忙忙的写老师布置的 Vue 项目，对于 Vue 始终没有一个系统的认知，每天都是遇到什么问题就去查什么样的问题。看起来好像也没啥问题，但是所有的知识都是混入的，导致没有一个像样的体系。
项目中肯定会常用的一些基础组件，比如弹窗，toast之类的，要是在每个页面去引入的话那也太麻烦了，还好vue提供了一个全局注册组件的api，即Vue.compoment。
去年（已经是三年前了！）年末便听得新一代打包工具 Parcel.js 的风风火火，今日（两年前的某一天）也终于得以静下心来试一试。
正文之前，由于这是一个系列的文章，可能第一次看到的看官老爷们会觉得突兀，如果你是webpack新手，我建议你先从前几篇文章看起，如果你对webpack有一些了解，也希望可以在github上下载代码，对照着看会更有效果
在上一篇文章中，我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构，大致了解了每一个部分的代码到底要放到何处。从本文起我们就开始涉及真正的编码部分，学习使用Vue的语法去编写小程序。
核心目标 使用webpack-dev-server热加载模块 使用eslint文件瘦身 使用stylus进行CSS预处理 使用@ vue / test-utils和Jest进行测试 环境需求 npm init -y npm install --save vue vue-router npm install --save-dev webpack webpack-cli 文件结构 [文件结构] app.js : 应用程序入口 App.vue: 根组件 pages: 包含所有顶级组件的文件夹，每个组件都有一个
本文记录 webpack 的安装和使用，并且使用 webpack 搭建 vue 简易脚手架的过程
相信有些开发者还没开始学 Vue3，但又想尝尝 Vite。那可以参考本文的进食方式。
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、vuex、ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
打包成功之后，查看dist目录下的index.html文件是否引用了打包之后的js
新增App.vue文件,使用IDEA新建,如果没有的话在Setting->plugin中安装vue插件
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
在前面的篇章中，已经说明了 webpack4 的基本使用，那么本章节开始在 webpack4 中构建vue项目，同时对比看看这种构建方式，与在网页script导入 vue.js 中的区别。
在执行npm run dev的时候，会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件，包含项目的名称版本、项目依赖等相关信息。
更多 MintUI 组件请参考 http://mint-ui.github.io/docs/#/zh-cn2/repositories
前言 想必绝大多数用 Vue 开发过项目的同学，或多或少会有以下两种情况： 用 Vue CLI 工具去搭建一个项目。 在领导或同事搭建好的项目基础上做业务。 长此以往，会导致你对整个项目的把控度越来
我们当前项目中使用unaipp进行微信小程序的开发，版本是2.0.1-32920211122003。好奇uniapp是如何做到这层转换的。因此从uniapp中抠出了核心逻辑（做了很多简化工作，为了你能更好的理解啊），并写了一个简易demo，来一探究竟。
2、配置vuex全局 vuex的全局配置与上一节中vue-router的配置相似，抽象上我们有一个store文件夹，store文件夹下内容是实现，main.js中调用实现的内容。 我们看到import store from 'store/index' 代表引用store的index实现，在第12行中将store的实现作为参数赋值给Vue的全局配置进行使用，这样所有的页面都可以使用Vuex了。
做过vue项目的人都知道，当项目越变越大，或者变成多页面应用时，热更新打包速度奇慢无比，每次保存都要几分钟。
现在大多项目都是前后端分离的，但是如果前后端都是一个人做，前后端来回切也挺不方便的。
指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
注意：不能使用npm下载，需要从 github 上下载现成的包并解压，然后拷贝到项目中使用
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文件下)
vonic-webpack-starter 是vonic-template下载后的目录，自动生成结构保持不变，只需要改变Src目录下的目录结构，对修改后的结构进行简单说明如下：
https://github.com/dmhsq/electron-vue-dmhsq 或者 https://github.com/dmhsq/electron-vue/tree/main/template
以上的配置里面有这个，那么相当于这个项目里面安装了路由，项目里面就可以使用了。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
用途： 将css样式从js文件中提取出来最终合成一个css文件，该插件只支持webpack4之前的版本，如果你当前是webpack4及以上版本那么就会报错。
https://www.webpackjs.com/loaders/css-loader/
{ path:'/gohome', redirect: '/main',//重定向 }
在这里汇总一下每次都会忘记或者一直没搞懂的知识点,方便自己以后回来看。大家也可以看看就当做是复习啦~ vue的设计模式: MVVM
在main.js中导入babel-polyfill 以便旧版浏览器中可以使用新的js特性
文章目录 vue实现全局函数以及生成md文档目录和html文件 vue中写全局函数 新建一个log.js文件 main.js中引用 页面使用 md说明文档 vue实现全局函数以及生成md文档目录和html文件 vue中写全局函数 业务介绍：在前面的文章中我们介绍过如果在vue项目中创建一个全局的变量，以便于我们处理一些公共的参数，作出相应的改变与取值，喜欢的可以看一下：vuex的使用，那么其实我们在写项目的过程中不仅仅是只有变量是需要改变和设置全局的，很多的时候我们需要的是一个全局的函数进行做一个业务的处理
上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦，但是是不是感觉心虚虚的，总觉得这么多文件，项目怎么就启动起来了呢？怎么访问到8080 端口就能进入到我们的首页呢。整个的流程是怎么样的呢？
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
1 能够说出Vue全家桶的各个组件(Vue-CLI、Vue-Router、Vuex、Axios)的概念、功能和使用场景
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
