Vue 全家桶、原理及优化简议

Easter79 等级 196 0 0

不少互联网公司都在使用vue技术栈,或称为vue全家桶。

使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Model-View-ViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计思想。相比Angular.js,Vue.js API更加简洁;相比 React + Redux 复杂的架构,Vue.js 上手更加容易。 

目录

一、vue全家桶包括什么

    vue-router路由

    vuex

    vue-resource

    构建工具vue-cli

    调度工具Devtools

    关于UI组件库

二、vue工程目录结构

    编辑器

三、vue使用简介

    数据代理

    vue实例生命周期图解

四、vue的运行原理

    双向绑定图解

    模板是如何解析的

五、发布前优化

    UI组件按需加载

    路由懒加载

    使用异步组件(动态组件)

    图片压缩与合并

    使用CDN加速vue类库

    压缩代码

    v-for和v-if不要同时使用

    使用Object.freeze冻结大数据

    使用Keep-alive标签优化组件创建

    使用Set

    在scope中少用元素选择器

    关于template的优化

-------------------------------------------------

一、vue全家桶包括什么

vue-router路由

网站:http://router.vuejs.org。使用npm工具来安装vue-router

npm install vue-router 

通过import导入Vue模块、vue-router模块及其它组件。

import Vue from’vue’ 

importRouter from’vue-router’

在使用路由前,必须要通过 Vue.use() 明确地安装路由功能。 

Vue.use(Router)

通过const router= new VueRouter()定义路由,并传入对应的配置,包括路径path和组件components等。

Vue 全家桶、原理及优化简议

在使用newVue来创建和挂载vue根实例的时候,记得要通过 router配置参数注入路由。使用router-link:

Vue 全家桶、原理及优化简议

有两种模式:

  • hash 模式

  • history 模式

vuex

网站:http://vuex.vuejs.org

在vue开发实战中,多个组件共享数据时,单向数据流的简洁性很容易被破坏。为解决多个视图使用同一数据及多个视图驱动同一数据更新的问题,vuex应运而生。

当网站足够大时,一个状态树下,根的部分字段繁多,解决这个问题就要模块化 vuex,官网提供了模块化方案,允许我们在初始化 vuex 的时候配置 modules。每一个 module 里面又分别包含 state 、action 等,看似是多个状态树,其实还是基于 rootState 的子树。细分后整个 state 结构就清晰了,管理起来也方便许多。

Vue 全家桶、原理及优化简议

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的四个核心概念是: 

  • The state tree:Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。至此它便作为一个唯一数据源(SSOT)而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。 

  • Getters:用来从 store 获取 Vue 组件数据。 

  • Mutators:事件处理器用来驱动状态的变化。 

  • Actions:可以给组件使用的函数,以此用来驱动事件处理器 mutations。(注:此许或许称之为EventHandler更为恰当。)

Vuex和简单的全局对象是不同的。当Vuex从store中读取状态值的时候,若状态发生了变化,那么相应的组件也会更新。并且改变store中状态的唯一途径就是提交commit mutations。只要发生了状态的变化,一定伴随着mutation的提交。 例如:

Vue 全家桶、原理及优化简议

通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:

Vue 全家桶、原理及优化简议

由于 vuex 的灵活性,带来了编码不统一的情况,完整的闭环是 store.dispatch('action') -> action -> commit -> mutation -> getter -> computed,实际上中间的环节有的可以省略,因为 API 文档提供了以下几个方法 mapState、mapGetters、mapActions、mapMutations,然后在组件里可以直接调取任何一步,还是项目小想怎么调用都可以,项目大的时候,就要考虑 vuex 使用的统一性,有人建议是不论多简单的流程都跑完整个闭环,形成代码的统一,方便后期管理,在组件里只允许出现 dispatch 和 mapGetters,其余的流程都在名为 store 的 vuex 文件夹里进行。

注:mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中。它的功能和 mapState 非常类似。

vue-resource

网站:https://github.com/pagekit/vue-resource

使用npm来安装Vue-resource:

$ npm install vue-resource 

在安装并引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。 

Vue 全家桶、原理及优化简议

在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。 

vue-resource的请求API是按照REST风格设计的,它提供了7种请求API: 

· get(url,[options]) 

· head(url,[options]) 

· delete(url,[options]) 

· jsonp(url,[options]) 

· post(url,[body], [options]) 

· put(url, [body],[options]) 

· patch(url,[body], [options])

构建工具vue-cli

vue-cli是vue标准的开发工具。网站:https://cli.vuejs.org/

安装

npm install -g @vue/cli

最新版本为3.4.0。

创建项目

vue create my-project

以上是命令行创建。也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

运行

npm run serve

调度工具Devtools

vue在调试方面,可以选择安装chrome插件vue Devtools。打开vue项目,在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息。

Vue 全家桶、原理及优化简议

在Devtools工具中,可以选择组件,查看对应组件内的数据信息。也可以选择Vuex选项,查看该项目内Vuex的状态变量信息。 

Vue 全家桶、原理及优化简议

关于UI组件库

可以自己写,为提高开发效率也可以复用第三方组件库。element(https://github.com/ElemeFE/element)是一个最好支持vue2.0的UI组件库。

二、vue工程目录结构

这是一个简单的vue项目的大概结构:

Vue 全家桶、原理及优化简议

  • components/文件夹:用来存放Vue 组件。个人建议,把每一个组件中使用到的image图片放置到对应的组件子文件目录下,便于统一的管理 

  • Node_modules/:npm安装的该项目的依赖库 

  • vuex/文件夹:存放的是和 Vuex store 相关的东西(state对象,actions,mutations) 

  • router/文件夹:存放的是跟vue-router相关的路由配置项 

  • build/文件:是 webpack 的打包编译配置文件 

  • static/文件夹:存放一些静态的、较少变动的image或者css文件 

  • config/文件夹:存放的是一些配置项,比如服务器访问的端口配置等 

  • dist/该文件夹:一开始是不存在,在我们的项目经过 build 之后才会产出 

  • App.vue根组件,所有的子组件都将在这里被引用 

  • index.html整个项目的入口文件,将会引用我们的根组件 App.vue 

  • main.js入口文件的 js 逻辑,在webpack 打包之后将被注入到 index.html 中

编辑器

VSCode with Vetur

Vue 全家桶、原理及优化简议

三、vue使用简介

数据代理

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的。每个 Vue 实例都会代理其 data 对象里所有的属性:

var data = { a: 1 }

var vm = new Vue({

  data: data

})

vm.a === data.a // -> true

设置新值也会同步影响:

vm.a = 2

data.a // -> 2

// ... 反之亦然

data.a = 3

vm.a // -> 3

实现数据代理的伪代码如下:

var self = this;   // this为vue实例, 即vm

Object.keys(this.data).forEach(function(key) {

    Object.defineProperty(this, key, {    // this.title, 即vm.title

        enumerable: false,

        configurable: true,

        get: function getter () {

            return self.data[key];   //触发对应data[key]的getter

        },

        set: function setter (newVal) {

            self.data[key] = newVal;  //触发对应data[key]的setter

        }

    });

}

Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。例如:

vm.$data === data // -> true

vm.$el === document.getElementById('example') // -> true

vue实例生命周期图解

Vue 全家桶、原理及优化简议

四、vue的运行原理

Vue采用简洁的模板语法,以声明的方式将数据渲染进 DOM。vue代码是没有办法直接被浏览器解析的,必须经过“编译”,变为浏览器可以识别为html、js与css代码。这种声明式开发方式把方便留给了程序员,转换工作交给了自动化工具。

Vue 全家桶、原理及优化简议

注:el是element的缩写,指Vue实例挂载的元素节点。

双向绑定图解

一般说的双向绑定,指:

  • 数据变动 --> 视图更新

  • 视图更新 --> 数据变动

视图更新 --> 数据变动,这个方向的绑定比较简单。主要通过事件监听来改变数据,比如input控件可以监听input事件,一旦事件触发,调用JS改变data。

Vue 全家桶、原理及优化简议

模型层(model)只是普通 JavaScript 对象,修改它,DOM本是不能更新的。当程序员把一个普通 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。在每个setter中,可以做许多事件,使表面看起来数据变了,视图就更新了。并且这种数据更新,和原来一样,只是 vm.a=123 这样的简单更新。

Vue 全家桶、原理及优化简议

如上所求,每个vue组件实例都有相应的 watcher 实例对象,它会在vue组件渲染的过程中把需要用到的属性(getter)记录为依赖。之后,当依赖项的 setter 被(其它JS代码)调用时,setter 会通知 watcher 重新计算,从而致使它关联的组件得以更新。

此处实现的是一个观察者模式。

通过object.defineProperty遍历设置this.data里面所有属性,在每个属性的setter里面去通知对应的回调函数,这里的回调函数包括dom视图重新渲染的函数、使用$watch添加的回调函数等,这样我们就通过object.defineProperty劫持了数据,当我们对数据重新赋值时,如this.title = 'hello vue',就会触发setter函数,从而触发dom视图重新渲染的函数,实现数据变动,对应视图更新。

那么,如何在setter里面触发所有绑定该数据的回调函数呢?

既然绑定该数据的回调函数不止一个,我们就把所有的回调函数放在一个数组里面,一旦触发该数据的setter,就遍历数组触发里面所有的回调函数,我们把这些回调函数称为订阅者。数组最好就定义在setter函数的最近的上级作用域中,如下面实例代码所示。

Object.keys(this.data).forEach(function(key) {

    var subs = [];  // 在这里放置添加所有订阅者的数组

    Object.defineProperty(this.data, key, {    // this.data.title

        enumerable: false,

        configurable: true,

        get: function getter () {

            console.log('访问数据啦啦啦')

            return this.data[key];   //返回对应数据的值

        },

        set: function setter (newVal) {

            if (newVal === this.data[key]) {   

                return;    // 如果数据没有变动,函数结束,不执行下面的代码

            }

            this.data[key] = newVal;  //数据重新赋值

            subs.forEach(function () {

                // 通知subs里面的所有的订阅者

            })

        }

    });

}

那么,怎么把绑定数据的所有回调函数放到一个数组里面呢?这是通过gettter内部的代码完成的。

我们知道只要访问数据就会触发对应数据的getter,那我们可以先设置一个全局变量target,如果我们要在data里面title属性添加一个订阅者(changeTitle函数),我们可以先设置target = changeTitle,把changeTitle函数缓存在target中,然后访问this.title去触发title的getter,在getter里面把target这个全局变量的值添加到subs数组里面,添加完成后再把全局变量target设置为null,以便添加其他订阅者。

伪代码如下:

target = changeTitle

...

Object.keys(this.data).forEach(function(key) {

    var subs = [];  // 在这里放置添加所有订阅者的数组

    Object.defineProperty(this.data, key, {    // this.data.title

        enumerable: false,

        configurable: true,

        get: function getter () {

            console.log('访问数据啦啦啦')

            if (target) {

                subs.push(target);                

            }

            return this.data[key];   //返回对应数据的值

        },

        set: function setter (newVal) {

            if (newVal === this.data[key]) {   

                return;    // 如果数据没有变动,函数结束,不执行下面的代码

            }

            this.data[key] = newVal;  //数据重新赋值

            subs.forEach(function () {

                // 通知subs里面的所有的订阅者

            })

        }

    });

}

上面代码中提到的changeTitle,即是上面最近一张图解中的watcher。vue通过getter收集watcher集合。因为vue充许在运行时添加代码,所以该收集行为不能仅限制于模板“编译”之前。(注:vue中是不存在严格的编译的,js是解析执行型语言,像C、Go等语言将源码编译为目标平台的二进制文件,才是真的编译。)

模板是如何解析的

假如说有下面这一段代码,我们怎么把它解析成对应的html呢?

{{title}}

注:该示例实现的效果是,在input输入框内输入任何内容,下方h1文本同步更新。

先简单介绍视图更新函数的用途,比如解析指令v-model="title",v-on:click="changeTitle",还有把{{title}}替换为对应的数据等。

回到上面那个问题,如何解析模板?我们只要去遍历所有dom节点包括其子节点:

  • 如果节点属性含有v-model,视图更新函数就为把input的value设置为title的值

  • 如果节点为文本节点,视图更新函数就为先用正则表达式取出大括号里面的值'title',再设置文本节点的值为data['title']

  • 如果节点属性含有v-on:xxxx,视图更新函数就为先用正则获取事件类型为click,然后获取该属性的值为changeTitle,则事件的回调函数为this.methods['changeTitle'],接着用addEventListener监听节点click事件。

五、发布前优化

使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1M+。

UI组件按需加载

如果使用了第三方组件/UI库,如element-ui, mint-ui,echarts等,如果全部引入,项目体积非常大,这时可以按需引入组件。

安装 babel-plugin-component

npm install babel-plugin-component -D

然后,将.babelrc 修改为:

{

  "presets": [["es2015", { "modules": false }]],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

然后引入部分组件,这样一来,就不需要引入样式了,插件会帮我们处理。

// main.js

import Vue from 'vue'

import { Dialog, Loading } from 'element-ui'

Vue.use(Dialog)

Vue.use(Loading.directive)

Vue.prototype.$loading = Loading.service

// 然后正常使用组件

注:Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码。让不支持ES6的宿主环境,支持使用一套源码开发。

mint-ui是element-ui的移动端组件,所以它的使用和引入几乎和element-ui一样。

路由懒加载

vue-router官方推荐syntax-dynamic-import插件,不过它要求同时安装@bable/core^7.0.0,如果你安装了babel-core6,可能有版本冲突的,解决方法如下:

npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。

// router.js

const login = () => import('@/components/login')

const router = new VueRouter({

  routes: [

    { path: '/login', component: login }

  ]

})

还有一种魔法注释用法,不推荐使用。

使用异步组件(动态组件)

app bundle 文件过大,可以尝试通过组件懒加载优化。

动态组件主页面加载是不会加载,等到触发条件时才加载该组件,并且加载一次后就有缓存。如果组件在页面加载时不需要,只在调用时用到,这时可以使用异步组件的写法。仅仅是引入和组件注册写法不同:

// template

// script

  components: {

    test: () => import('./test') // 将组件异步引入,告诉webpack,将该部分代码分割打包

  },

  methods:{

      clickTest () {

          this.showTest = !this.showTest

    }

  }

图片压缩与合并

无损压缩图片:https://tinypng.com/。可以将图片制成雪碧精灵图。

使用CDN加速vue类库

一般项目里用到的第三方js库主要有:vue、vue-router、vuex、vue-resource、axio、qiniu等。这些依赖库的js文件被一起打包到vender那个js文件里面,导致vender这个文件很大,那首屏加载速度肯定会被拖慢。

类库文件使用cdn加速

修改 build/webpack.base.conf.js

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js'

},

externals:{

'vue': 'Vue',

'vue-router': 'VueRouter',

'vuex':'Vuex',

'vue-resource': 'VueResource'

}

排除已经手动收入的js文件

利用webpack的externals。具体做法就是在 build/webpack.base.conf.js文件的module里面与rules同层加入externals。具体做法,修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource等:

// import Vue from 'vue'

// import VueResource from 'vue-resource'

// Vue.use(VueResource)

上面已经引用过。

压缩代码

vue-cli已经使用UglifyJsPlugin 插件来压缩代码,可以设置成如下配置:

new webpack.optimize.UglifyJsPlugin({

  compress: {

    warnings: false,

    drop_console: true,

    pure_funcs: ['console.log']

  },

  sourceMap: false

})

其中sourceMap: false是禁用除错功能。如果设为true,在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好,但会大大增加整体资源包的体积,所以将其禁用。

v-for和v-if不要同时使用

在vue中v-for和v-if不要放在同一个元素上使用。由于 v-for 和 v-if 放在同一个元素上使用会带来一些性能上的影响,在计算属性上过滤之后再进行遍历。反例:

Vue 全家桶、原理及优化简议

使用Object.freeze冻结大数据

对于前端纯大数据展示(纯大数据指:拿到数据就是直接用于展示的,不需要做修改其中字段等处理的,而且数据量比较大)的情况下,使用Object.freeze方法来包裹变量,那边vue内部不会使用defineproperty去监听数据内部的变化,只有本身变化时才会触发,在大量数据的情况下,vue内部不在去监听数据的变化会提高性能。使用demo如下:

Vue 全家桶、原理及优化简议

使用Keep-alive标签优化组件创建

vue提供了keep-alive标签来存储缓存,对于一些视频控件object或图表类的使用,我们经常会使用v-if指令,而v-if是会创建和销毁的,如果频繁操作在ie下的内存会持续上升,而keep-alive可以有效的缓存,抑制内存的持续上升。

见:https://cn.vuejs.org/v2/api/#keep-alive

使用Set

Es6集合Set()可优化遍历速度,set集合是可用于查找该集合内是否存在某个元素。但如果使用了Bable自动转化,该优化无效。

在scope中少用元素选择器

scope中元素选择器尽量少用。在 scoped 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的。

为了给样式设置作用域,Vue 会为元素添加一个独一无二的特性,例如 data-v-f3f3eg9。然后修改选择器,使得在匹配选择器的元素中,只有带这个特性才会真正生效 (比如 button[data-v-f3f3eg9])。问题在于大量的元素和特性组合的选择器 (比如 button[data-v-f3f3eg9]) 会比类和特性组合的选择器 慢,所以应该尽可能选用类选择器。

关于template的优化

v-show,v-if 用哪个?在我来看要分两个维度去思考问题,第一个维度是权限问题,只要涉及到权限相关的展示无疑要用 v-if,第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的使用 v-show,不频繁切换的使用 v-if,这里要说的优化点在于减少页面中 dom 总数,我比较倾向于使用 v-if,因为减少了 dom 数量,加快首屏渲染,至于性能方面我感觉肉眼看不出来切换的渲染过程,也不会影响用户的体验。

不要在模板里面写过多的表达式与判断 v-if="isShow && isAdmin && (a || b)",这种表达式虽说可以识别,但是不是长久之计,当看着不舒服时,适当的写到 methods 和 computed 里面封装成一个方法,这样的好处是方便我们在多处判断相同的表达式,其他权限相同的元素再判断展示的时候调用同一个方法即可。

循环调用子组件时添加 key,key 可以唯一标识一个循环个体,可以使用例如 item.id 作为 key,假如数组数据是这样的 ['a' , 'b', 'c', 'a'],使用 :key="item" 显然没有意义,更好的办法就是在循环的时候 (item, index) in arr,然后 :key="index"来确保 key 的唯一性。

2019年2月14日

--------------------------------------------------------

参考资料:

本文分享自微信公众号 - 程序员LIYI(CoderLIYI)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

收藏
评论区

相关推荐

Vue 项目性能优化—实践指南
Vue 项目性能优化—实践指南 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效
面试官问 Vue 性能优化,我该怎么回答
前言Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过
Vue开发指南:你都需要学点啥?
如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。 另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。 也许您在面对这些未知的术语和
Vue 性能优化
前言Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
2016我的心路历程:从 Vue 到 Webpack 到 iView
> 2016年工作中做过最自豪的两件事情: * 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范; * 开源 [iView](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fiview%2Fiview) 项目。 初识 Vue ===
2016我的心路历程:从 Vue 到 Webpack 到 iView
> 2016年工作中做过最自豪的两件事情: * 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范; * 开源 [iView](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fiview%2Fiview) 项目。 初识 Vue ===
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue 全家桶
vue全家桶。 使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Model-View-ViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计思想。相比Angular.js,Vue.js API更加简洁;
Vue 全家桶、原理及优化简议
不少互联网公司都在使用vue技术栈,或称为vue全家桶。 使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Model-View-ViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
Vue+Webpack配置css
  使用Vue+Webpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具。在针对css文件配置时遇到一个问题:打包构建时报错——Module build failed: Unknown word。   配置内容如下: {   test: /\.css$/,   use:
springboot+vue 登录页面(一)
首先了解的技术点是: 后台:springboot,mybatis,mybatis逆向工程,mysql,日志 前端: nodejs,npm ,cnpm,vue,vue-cli,webpack,element ui,router,axios 开发工具:idea,webstorm 该项目前端使用的是vue ,目的是实现前后端分离 后台: 1.选择spr
storybook配置之基本配置和webpack配置
#默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其与vue cli的webpack配置非常相似 开始学习Storybook配置 学习内容(Table of Contents) - Babel ES2016+