近些年前端开发快速发展，现在学习前端已经不像以前那样仅仅学习一个语法就可以了，它已经是一门编程技术了，它们有自己独立的类似Main函数的入口，有像MVC一样规范好的层次结构，有自己的开发工具可以发布打包程序，甚至还可以独立连接数据库，当然了，优点与缺点共存，不能向其他语言那样断点调试导致了，它的脉络更难被捕捉，犹如远古时代的代码开发一样，但它还是已经可以称为一门编程技术了，所以学习一门前端开发，已经是一件非常有意义的事儿了。
随着前端模块化的兴起，特别在 vue、react等一些热门框架的崛起，越来越多的公司加入了这一阵营。提及前端的模块化（这里主要说的是Javascript语言的模块化），就不得不说 es6标准提出的 export 和 import 两个命令了。当然还有 commonJS里的 module.exports 和 require 这一对组合了，这里暂不介绍这两组命令的具体用法。以后 我会专门写一篇文章介绍这两个命令的用法。我们以 es6中的 export 和 import 为例，介绍一下：
之前已经创建了vue项目，并且将基本的配置都配置了，比如路由，跨域都配置好了，现在就开始开发组件了。
在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
在 router.js 中，我们需要使用 Vue Router 进行路由的配置。我们可以在这个文件中定义各个页面的路径以及对应的组件，并导出一个路由对象。例如：
在上一篇文章中，我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构，大致了解了每一个部分的代码到底要放到何处。从本文起我们就开始涉及真正的编码部分，学习使用Vue的语法去编写小程序。
去年（已经是三年前了！）年末便听得新一代打包工具 Parcel.js 的风风火火，今日（两年前的某一天）也终于得以静下心来试一试。
为了获取服务端GraphQl接口的数据，客户端需要使用apollo这个插件，三大前端框架均可以将apollo集成，下面以vue为例来说明在客户端如何集成vue-apollo这个插件。
以上的配置里面有这个，那么相当于这个项目里面安装了路由，项目里面就可以使用了。
在之前的一系列vue.js文章，我们都是用传统模式引用vue.js以及其他的js文件的，这在开发时会产生一些问题。
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、vuex、ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
每日匆匆忙忙的写老师布置的 Vue 项目，对于 Vue 始终没有一个系统的认知，每天都是遇到什么问题就去查什么样的问题。看起来好像也没啥问题，但是所有的知识都是混入的，导致没有一个像样的体系。
我们当前项目中使用unaipp进行微信小程序的开发，版本是2.0.1-32920211122003。好奇uniapp是如何做到这层转换的。因此从uniapp中抠出了核心逻辑（做了很多简化工作，为了你能更好的理解啊），并写了一个简易demo，来一探究竟。
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
本文记录 webpack 的安装和使用，并且使用 webpack 搭建 vue 简易脚手架的过程
打包成功之后，查看dist目录下的index.html文件是否引用了打包之后的js
真实项目开发过程中，我们都是使用组件化的去开发vue的项目，但是组件化的思想又是如何来的呢？下面就从开始讲解演变过程
在执行npm run dev的时候，会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件，包含项目的名称版本、项目依赖等相关信息。
正文之前，由于这是一个系列的文章，可能第一次看到的看官老爷们会觉得突兀，如果你是webpack新手，我建议你先从前几篇文章看起，如果你对webpack有一些了解，也希望可以在github上下载代码，对照着看会更有效果 在当代的前端开发中，很少会用原生JS来开发页面，最基本的都会使用jQuery来节省我们开发的时间和效率，而angular，vue，react的出现更是为前端开发者带来了福音。那么这篇文章就说说如何用webpack来打包引入第三方框架（类库）。如果单纯的引入jQuery或者其他第三方类库
vonic-webpack-starter 是vonic-template下载后的目录，自动生成结构保持不变，只需要改变Src目录下的目录结构，对修改后的结构进行简单说明如下：
在前面的篇章中，已经说明了 webpack4 的基本使用，那么本章节开始在 webpack4 中构建vue项目，同时对比看看这种构建方式，与在网页script导入 vue.js 中的区别。
2、配置vuex全局 vuex的全局配置与上一节中vue-router的配置相似，抽象上我们有一个store文件夹，store文件夹下内容是实现，main.js中调用实现的内容。 我们看到import store from 'store/index' 代表引用store的index实现，在第12行中将store的实现作为参数赋值给Vue的全局配置进行使用，这样所有的页面都可以使用Vuex了。
注意：不能使用npm下载，需要从 github 上下载现成的包并解压，然后拷贝到项目中使用
前言 想必绝大多数用 Vue 开发过项目的同学，或多或少会有以下两种情况： 用 Vue CLI 工具去搭建一个项目。 在领导或同事搭建好的项目基础上做业务。 长此以往，会导致你对整个项目的把控度越来
正文之前，由于这是一个系列的文章，可能第一次看到的看官老爷们会觉得突兀，如果你是webpack新手，我建议你先从前几篇文章看起，如果你对webpack有一些了解，也希望可以在github上下载代码，对照着看会更有效果
对于大型前端项目，比如公司内部管理系统（一般包括 OA、HR、CRM、会议预约等系统），如果将所有业务放在一个前端项目里，随着业务功能不断增加，就会导致如下这些问题：
用途： 将css样式从js文件中提取出来最终合成一个css文件，该插件只支持webpack4之前的版本，如果你当前是webpack4及以上版本那么就会报错。
{ path:'/gohome', redirect: '/main',//重定向 }
指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
在项目目录下新建目录router，在目录router目录下新建router.js，然后引用vue
https://www.webpackjs.com/loaders/css-loader/
这里也做了一点变更，uniapp的实现中是如下形式，main.js和页面.vue会命中同一个loader（见node_modules/@dcloudio/webpack-uni-mp-loader/lib/main-new.js），然后在这个loader里面根据是是否有resouceQuery来区别处理（显然main.js没有，而页面.vue有。
在前面的篇章，我们已经使用export default以及render函数完成的vue框架在webpack中的组件基本使用方式。
新增App.vue文件,使用IDEA新建,如果没有的话在Setting->plugin中安装vue插件
1.在src/components目录下新建User.vue文件，同时再新建User目录，在User目录下新建UserAdd.vue和UserList.vue两个文件
1 能够说出Vue全家桶的各个组件(Vue-CLI、Vue-Router、Vuex、Axios)的概念、功能和使用场景
核心目标 使用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是一个现代的JavaScript应用的静态模块打包工具。
为另一个项目提供可嵌入的功能单页，大部分页面使用时都是独立功能页，个别页面带有左侧边栏（相当于3-4个页面的整合形态），由于资源定位地址的限定，每个页面打包为单页后，入口html文件需要定制命名，且脚本和样式文件需要放在指定的路径下，公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑（比如下面结构中应用jquery.min.js的路径可能是{{publicRoot}}/{{publicLib}}/jquery.minjs）。假设原工程中拥有AB这2个旧页面，现在需要开发CDE这3个页面，目录结构要求如下：
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
有过开发经验的同学都知道，为使代码层次结构清晰分明，对于一些通用或常用的方法，都会将其抽象成公共方法或配置供使用者调用。
安装依赖包 (-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的)
一、ES6的模块化 1. ES6模块化规范 每个 js 文件都是一个独立的模块 导入模块成员使用 import 关键字 暴露模块成员使用 export 关键字 2. 基本语法 发使用 ex
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。
当然要配vue-loader啊，.vue文件解析全靠他了。vue-loader的整体流程的分析可以参考我之前的文章：「.vue文件的编译」1. vue-loader@15.8.3 的整体流程
就是这个echarts在各个组件里面都会使用，所以，我们要在vue项目里面的全局使用
后续项目中,我们会使用Vuejs进行开发,而且会以特殊的文件来组织Vue的组件
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
