vue
关注
分享
扫一扫
火星飞鸟
学习前端ing...
展开
-
Vue项目路由懒加载
当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。安装@babel/plugin-syntax-dynamic-import包在babel.config.js配置文件中声明该插件将路由改为按需加载的形式，示例代码如下const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')co原创 2021-02-23 15:11:45 · 185 阅读 · 0 评论 -
Vue项目通过CDN优化ElementUI的打包
在main-prod.js中，注释掉element-ui按需加载的代码在index.html的头部区域中，通过 CDN 加载element-ui的 js 和 css 样式：<!-- element-ui 的样式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" /><!-- element-ui 的 js 文件 --.原创 2021-02-23 11:10:23 · 582 阅读 · 0 评论 -
Vue项目通过externals加载外部CDN资源
在项目配置文件vue.config.js中的发布模式添加如下：config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor'})然后，在index.html文件的原创 2021-02-23 11:02:21 · 659 阅读 · 1 评论 -
Vue项目通过chainWebpack自定义打包入口
默认情况下，Vue 项目的开发模式与发布模式，共用同一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：开发模式的入口文件为src/main-dev.js发布模式的入口文件为src/main-prod.js在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义 webpack 的打包配置。在这里，configureWebpack和chainWebpa原创 2021-02-23 10:40:59 · 1070 阅读 · 1 评论 -
学习记录——Vue的组件化开发
1. 组件注册1.2 全局注册Vue.component('组件名称', { })全局组件注册后，任何vue实例都可以用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component></my-component></div><script> // 注册组件 // 1、 my-component 就是组件中自定义原创 2020-12-09 21:52:05 · 184 阅读 · 0 评论 -
学习记录——Vue常用特性
1. 表单基本操作1.1 获取单选框中的值通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值，我们只需要实时监控他的值就可以了 --> <input type=原创 2020-12-09 21:33:26 · 218 阅读 · 0 评论 -
基于vue-router的小练习——后台管理系统
1. 练习到的技术点路由的基础用法嵌套路由路由重定向路由传参编程式导航2. 实现效果3. 实现代码<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8" /> <title>基于vue-router的案例</title> <style> html, body, #原创 2020-12-08 19:49:27 · 591 阅读 · 0 评论 -
基于Vue组件化开发的购物车小练习
实现效果：实现代码：<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8"> <title>Document</title> <style> .container .cart { width: 300px; margin: auto; }原创 2020-12-02 19:45:26 · 295 阅读 · 1 评论 -
基于Vue的增、删、改小练习——图书管理
实现效果：实现对图书的增、删、改等操作页面刷新，编号输入框自动获取鼠标焦点当点击修改按钮时，禁止修改图书的编号计算图书的总数，动态显示在页面添加或修改图书，图书名重复时，禁止提交格式化显示时间实现代码：<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2020-12-01 20:18:05 · 363 阅读 · 0 评论 -
学习记录——Vue基础使用和模版语法
1. Vue基本使用1.1 Hello World基本步骤<body> <div id="app"> <div>{{msg}}</div> <div>{{1 + 2}}</div> <div>{{msg + '----' + 123}}</div> </div> <script type="text/javascript原创 2020-11-30 22:16:48 · 430 阅读 · 1 评论 -
基于Vue的TAB栏切换小练习
实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TAB选项卡</title> <style> .tab u原创 2020-11-30 15:10:51 · 313 阅读 · 1 评论