06 2021 档案
摘要：1.概念 1.当打包构建应用时，JavaScript包会变得非常大，影响页面加载。 2.把不同路由对银行的组件分割造成不同的代码块，当路由被访问时加载对应的组件，更加高效化。 2.实现 1.index.js页面，将导入修改为 与一次性所有导入不同，当使用到这个路由的时候才会导入。 // import
阅读全文
摘要：1.components在新建User.vue页面 2.index.js导入搭建 import User from '../components/User.vue' { path: '/user/:userId', component: User }, 3.App.vue定义数据和引用 data()
阅读全文
摘要：1.$route $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1. $route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。 2. $route.params 一个 key/value 对象
阅读全文
摘要：1.如不使用router-link <!-- <router-link to="/home" tag="button" replace>首页</router-link> <router-link to="/about">关于</router-link> --> <button @click="hom
阅读全文
摘要：1.tag 指定router-link之后渲染成什么组件如渲染成button <router-link to="/home" tag="button" repalce>首页</router-link> 2.repace 添加replace不会留下history记录，后退键返回不到上一级元素 3.ac
阅读全文
摘要：1.router下index 配置映射规则中新增一个对象 { // redirect路由重定向 path:'', redirect:'/home' //重定向地址 } 2.history 因为默认是hash地址，url栏中不美观 http://localhost:8080/home#/home 改变
阅读全文
摘要：1.安装Vue-router npm install vue-router --save 2.components 1.新建About.vue <template> <div> <h2>首页</h2> <p>首页内容</p> </div> </template> <script> export de
阅读全文
摘要：1.后端路由阶段 后端处理URL和页面之间的映射关系 发送URL地址给后端，后端java代码从数据库中读取数据，在后端服务器产生渲染好的HTML页面返回客户端展示。 页面中既有CSS又有php还有java，比较杂乱。 2.前后端分离阶段 由HTML+CSS+JS组成，后端只负责提供数据，1.url到
阅读全文
摘要：1.概念 1.this指向函数的直接调用者而非间接调用者 2.如果有new关键字，this指向new出来的那个对象 3.在DOM事件中，this指向目标元素 4.箭头函数的this指向他所在的函数级作用域，并且不可改变 2.案例 1.此时function()中传入的是window，所以this指向W
阅读全文
摘要：1.配置 1.插件安装 npm install webpack-merge@4.0.0 --save-dev 2.build新建文件夹 将webpack.config.js代码CV进这三个文件并作删减，最后删除webpack.config.js文件 （1）base.config.js 因为base引
阅读全文
摘要：1.安装插件 npm install webpack-dev-server@2.9.3 --save-dev 2.webpackconfig.js新增 devServer:{ contentBase:'./dist', //为哪一个文件夹提供本地服务，默认根文件夹，这里填写./dist inline
阅读全文
摘要：1.安装插件 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev 2.配置 webpack.config.js中导入 const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin') p
阅读全文
摘要：1.webpack.config.js中导入 const HtmlWebpackPlugin = require('html-webpack-plugin') 2.pulgin中新增 new HtmlWebpackPlugin({ template:'index.html' }) 3.需要删除out
阅读全文
摘要：1.webpack.config.js中新增 const webpack = require('webpack') //新增 2.module.exports中新增 plugins:[ new webpack.BannerPlugin('最终版权归你爹我所有') ] 3.运行 npm run bui
阅读全文
摘要：1.搭建 1.依赖安装 npm install vue@2.5.21 --save 2.index.html中新增 <div id="app"> <h2>{{message}}</h2> </div> 3.main.js中 import Vue from "vue"; const app = new
阅读全文
摘要：1.搭建 1.依赖安装 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 2.webpack.config.js新增 { test: /\.js$/, //排除node模块的js和bower的js exclude
阅读全文
摘要：1.搭建 src下新建img文件夹放入图片,normal.css文件中引用图片 body{ background-color: red; background: url("../img/small.jpg"); } 1.webpack.config.js中引入 { test:/\.(png|jpg|
阅读全文
摘要：1.css-loader打包 1.目录结构 2.运行与搭建 1.新建normal.css文件 2.运行npm install --save-dev css-loader@2.0.2 安装css-loader开发依赖 3.运行 npm install --save-dev style-loader@0
阅读全文
摘要：2.自动化Webpack打包 1.目录结构 2.搭建与运行 1.在根目录新建webpack.config.js文件此名称固定不可更改，否则系统无法识别到 2.在根目录初始化 npm init -y，生成pack.json文件，如pack.json有依赖时 npm install安装依赖。 3.web
阅读全文
摘要：1.Webpack打包 1.目录结构 2.搭建与运行 1.新建mathUtils.js文件 定义函数并导出 function add(num1,num2){ return num1+num2; } function mul(num1,num2){ return num1 *num2 } module
阅读全文
摘要：Vue/Cli 1.脚手架的安装 1.最新脚手架的安装 npm install -g @vue/cli 2.脚手架2的安装 npm install @vue/cli-init -g 2.不同脚手架版本的项目初始化 1.Vue CLI2初始化项目 vue init webpack my-project
阅读全文
