Webpack

一、搭建Vue项目的前提的环境 1.1、node.js 的的下载安装和环境变量的教程链接： Nodejs的下载和安装以及环境配置 1.2、Webpack （1）WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格 式供浏览器使用。 （2）注意node的版本，只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本。 　1、下载安装包之后直接点击安装即可。windown+R测试安装成功的界面如下： 2.安装淘宝镜像（类似于阿里云的maven中央仓库镜像） 安装时间有点长 安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org 验证命令：cnpm -v 3.安装webpack 1、利用 cnpm安装webpack 命令行语句为 cnpm install webpack -g 。时间略长。测试安装成功的界面如下： 4.接下来就是 全局安装vue-cli 。时间略长请耐心等待 安装语句为： cnpm install --global vue-cli 验证命令:vue -V (V要大写)

分析： https://kuangpf.com/vue-cli-analysis/create/basic-verification.html vue-cli-service : https://blog.csdn.net/weixin_34080903/article/details/88667618 vue-cli: 举个插件的栗子： 传送门： vue-cli-plugin- element 尽管我觉得vue -cli-plugin- element可以做得更好，比如自定义选择需要添加的组件，自定义主题色（vue ui的交互页面其实是提供了颜色选择器的，如下图），模板选择等 2. webpack,vue-cli,vue都使用到了插件机制。面向接口编程，确实是很优秀的想法。这个也是插件模式的一种体现插件（Plugin）模式向用户提供了一种扩展程序的接口，用户可以在程序本体之外，按照指定接口编写插件来为程序增加功能 cli插件 https://blog.csdn.net/dengdongxia/article/details/87923329 https://juejin.im/post/5b8f586c5188255c9d55eedf#comment https://juejin.im/post/5cedb26451882566477b7235 https://juejin.im

自定义自己的vue-cli模板 在使用vue-cli的过程中，常用的webpack模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来，这样就造成挺大的不方便，如果是作为一个团队，那么维护一个通用的模板，我认为是挺有必要的。 例如下面是我常用构建项目的目录。 src ├─api //接口 ├─assets //图片 ├─components //公用组件 ├─css //样式 主要是scss ├─js //第三方以及工具类 ├─page //页面 ├─router //路由 └─store //vuex 下面说下怎么自定义自己的vue-cli模板 fork一个自己的模板 从 https://github.com/vuejs-templates/webpack fork 一个库，再提交自己的修改到【自己的分支】，因为我们大部分内容还是在这个基础上做修改的。 关于vue-cli的源码分析可以参考下这个文章 从vue-cli源码学习如何写模板 vuejs-templates/webpack 目录如下， │ .gitignore │ circle.yml │ deploy-docs.sh │ LICENSE │ meta.js //该文件必须导出为一个对象, 用于定义模板的 meta 信息 │ package.json │ README.md │

新建一个项目，使用vue-cli 3.0进行构建，使用了vux和vue-router，本地运行时是没有问题的，但是在打包之后，页面就一片空白，打开控制台会看到是各种资源引用出错。 这是因为webpack的配置不对，只需要将webpack的配置修改一下就好。 vue-cli 3.0 内置了webpack，并且将vue的配置文件作为了一个可选的配置（创建时没有），如果需要修改vue和webpack的配置，则需要自己建一个配置文件 vue.config.js 放在项目的根目录下。 然后设置一个baseUrl： module.exports = { baseUrl: './' } 这样在打包的时候，就能加载到静态资源了。 然后这个时候还没完，修改完之后，页面变成了这个样子： 页面上只剩一个在App.vue里面的两个跳转按钮，并且跳转按钮跳转后也是不对的。 这个是因为在router里面的mode配置，默认设置为 history ，只要将这个mode注释掉再打包，就能正常显示了。 当然也可以使用history模式的路由，只是项目需要在服务器环境下运行。 比如使用node的serve，这个在vue-cli的文档中有说： https://cli.vuejs.org/zh/guide/deployment.html 我是直接使用了phpstudy的环境运行浏览。 来源： oschina 链接：

<! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > < meta http-equiv ="X-UA-Compatible" content ="ie=edge" > < title > Document </ title > < script src ="./lib/vue-2.4.0.js" ></ script > < script src ="./lib/vue-resource-1.3.4.js" ></ script > < link rel ="stylesheet" href ="./lib/bootstrap-3.3.7.css" > </ head > < body > < div id ="app" > < div class ="panel panel-primary" > < div class ="panel-heading" > < h3 class ="panel-title" > 添加品牌 </ h3 > </ div > < div class ="panel-body form-inline" > <

作者：Maxim Koretskyi 译文：Leiy https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/ React 是一个用于构建用户交互界面的 JavaScript 库，其核心 机制 就是跟踪组件的状态变化，并将更新的状态映射到到新的界面。在 React 中，我们将此过程称之为 协调 。我们调用 setState 方法来改变状态，而框架本身会去检查 state 或 props 是否已经更改来决定是否重新渲染组件。 React 的官方文档对 协调机制 进行了良好的抽象描述：React 元素、生命周期、 render 方法，以及应用于组件子元素的 diffing 算法综合起到的作用，就是协调。 从 render 方法返回的不可变的 React 元素通常称为 虚拟 DOM 。这个术语有助于早期向人们解释 React，但它也引起了混乱，并且不再用于 React 文档。在本文中，我将坚持称它为 React 元素的树。 除了 React 元素的树之外，框架总是在内部维护一个实例来持有状态（如组件、 DOM 节点等）。从版本 16 开始， React 推出了内部实例树的新的实现方法，以及被称之为 Fiber 的算法。 下文中，我们将结合

来源 | http://www.fly63.com/article/detial/8806 一、安装 1、如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择Yes，后面下载依赖会自动下载vue-router。 Install vue-router? Yes 2、npm npm install vue-router 二、将组件 (components) 映射到路由 (routes)并渲染 步骤一 使用vue-cli搭建项目，项目结构中会有一个src文件目录，src文件目录下会有一个router文件夹，此处就是用来编写路由组件的地方。 在src/router/index.js，这个文件就是路由的核心文件。在这个文件里，我们需要做的是，将组件 (components) 映射到路由 (routes)。 // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) import Vue from 'vue' // 导入vue import VueRouter from 'vue-router' // 导入vue-router Vue.use(VueRouter) // 1. 定义（路由）组件 import Home from '@/components/Home' // 2. 创建 router 实例，然后传