- 博客(14)
- 收藏
- 关注
RSS订阅原创 Vue嵌套路由中的嵌套命名视图个人感悟
官网解释感觉没有那么通俗易懂，百度到的基本都是赋值黏贴和没有试验总结的。官网例子有墙看不到，所以可以看看我的总结。1.官网解释我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套router-view组件。我们以一个设置面板为例：这个图很形象/settings/emails /settings/profile+-----------------------------------+ ..
2021-03-17 23:35:08
875
原创 Vue深入-28【数组劫持】
observer/array.jsimport { observe } from './index'let oldArrayProtoMethods = Array.prototype;export let newArrayProtoMethods = Object.create(oldArrayProtoMethods);let methods = ['push','shift','unshift','pop','splice','sort','reverse'];export func
2021-03-06 15:13:57
261
原创 Vue深入-27【对象劫持、访问属性代理】
一.对象劫持observe/index.jsimport Observer from './observer'export function initState(vm){ let options = vm.$options; if(options.data){ initData(vm); } if(options.computed){ initComputed(vm); } if(options.watch){
2021-03-06 15:12:07
248
原创 Vue深入-26【环境配置、基础代码编写】
一.环境配置npm init -ynpm install webpack webpack-cli webpack-dev-servernpm install html-webpack-plugin(1).webpack.config.jslet path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry:'./src/ind
2021-03-06 15:08:52
181
原创 Vue深入-25【Vue路由的使用】
一.基本使用<router-link to="/">Home</router-link><router-link to="/about">About</router-link>二.命名路由<router-link :to="{name:'home'}">Home</router-link><router-link :to="{name:'about'}">About</ro.
2021-03-06 15:06:01
195
原创 Vue深入-24【Vue脚手架工具剖析】
一.安装及使用(1).安装npm install -g @vue/cli(2).使用vue create xx 创建项目(3)mode分为两种hash mode localhost:8080/#/history mode localhost:8080IE10才支持 history选择yes可以开启history(4).cli plugins@vue/cli-plugin-开头的是官方插件vue-cli-plugin或其他形式则为第三方插件(...
2021-03-06 15:00:46
215
原创 Webpack-8【Webpack引入库、字体文件、imports-loader】
一.Webpack引入库npm i bootstrap@3.3.7 -Dindex.js中import 'bootstrap/dist/css/bootstrap.css'index.html<div id="app"> <ul class="list-group"> <li class="list-group-item"></li> </ul></div>
2021-03-05 21:52:22
214
原创 Webpack-7【生成HTML、提取CSS、清除文件】
一.生成HTMLHtmlWbpackPluginoptions:template:本地模板文件的位置filename:输出文件的文件名称minify:压缩代码chunks:允许插入到模板中的一些chunkinject:向template或者templateContent中主入所有静态资源var path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin');module.ex
2021-03-05 21:48:56
197
原创 Webpack-6【Less-Sass、postcss、图片处理】
一.Less-SassLess: 是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin,函数等特性Sass:是成熟、稳定、强大的CSS扩展语言npm install less less-loader -Dnpm install node-sass sass-loader -Dmodule:{ rules:[{ test:/\.less$/, use:[{ loader:'style-loader'
2021-03-02 17:57:30
211
原创 Webpack-5【babel编译ES6、编译插件、全局-局部垫片】
一.Webpack处理CSSstyle-loader 是为了在html中以style得方式嵌入csscss-loader 通过require的方式来引入css编译顺序是先用css-loader将css代码编译，再交给style-loader插入到网页里面去file-loader 将文件(一般是图片文件为主，其他的包括字体文件等)，在进行一些处理后移动打包后的目录中module:{ rules:[{ test:/\.css$/, use:[{
2021-03-02 17:53:06
917
1
原创 Webpack-4【babel编译ES6、编译插件、全局-局部垫片】
一.babel编译ES6babel-core:封装了babel编译时需要使用的APIbabel-loader:负责es6语法转化,webpack打包时使用babel-loader处理javascript文件npm install babel-loader @babel/core -Dnpm install babel-loader @7.1.5 babel-core -Dbabel-loader 8.x对应 babel-core7.xbabel-loader 7.x对应 babel-
2021-03-02 17:47:44
383
原创 Webpack-3【零配置、模块化规范、webpack-dev-server】
一.零配置模块化规范、webpack-dev-server(1).file-loadernpm install file-loader --save-devconst path = require('path');module.exports = { entry:'./src/index.js', module:{ rules:[ { test: /\.(png|jpe?g|gif)$/,
2021-03-01 19:49:31
214
原创 Webpack-2【JS模块化、Webpack模块化、CSS模块化概念】
一.JS模块化CommonJs模块化规范引入const Header = require('header.js')抛出module.exports = Header;二.Webpack模块化webpack只知道模块相关的事情，是个模块打包的工具webpack支持模块的类型 js css vue png jpg三.CSS模块化webpack.config.jsconst path = require('path')module.expor
2021-03-01 19:45:53
187
原创 Webpack-1【Webpack的基本安装使用】
一.安装及使用npm initnpm install webpack@4.41.2 webpack-cli@3.10 -Dnpx webpack index.js//翻译引入//ES Moduleimport Header from './Header.js'import Content from './Header.js'import Footer from './Header.js'new Header();new Content();new Footer();
2021-03-01 19:44:04
194
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人