怎么看vue项目有没有elment(查看是否安装vuecli)

本篇文章给大家谈谈怎么看vue项目有没有elment,以及查看是否安装vuecli对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

使用vue-cli构建项目怎么查看组件依赖树

想到grunt glup 我脑中出现的是流水的映像

想到webpack 我脑子出现的是一个仿佛刚从哥贝克力石阵苏醒的巨人,很强大,但也很胖

看看不做任何优化 构建后的文件大小

入口平均大小400多k 不能忍啊……css也100+不能忍

在这放出来会被大家笑话成菜逼的……虽然是……

时光好像抽了我一个嘴巴,回到了当年使用maven的岁月,记得有个myeclipse的maven2插件——可以显示出当前引用jar包的依赖树

所以下一步我们要知道项目到底打包了什么依赖了什么,没有比可视化的依赖树更让人愉悦……

经过一番谷歌(坚决不百x) 终于发现能和vue-cli结合输出构建报告的三个神器

放到wepback.prod.js的plugins配置项中

然而……我是用的vue-cli,构建变成了一个独立模块build 操作

webpack.base.js webpack.prod.js进行构建 所以会用到上面的

stats-webpack-plugin

配置好插件后,运行一次构建过程,如果不加任何文件路径,那么stats.json会被输出到构建输出目录跟你的所有打包文件在一起~~

拿我这个项目来说 它有16m这么大……

感兴趣的你可以双击打开看看……

可以看到我可耻的用了sui的citypicker……当然是经过改造的……

嗯...下班 辛苦一周到家门口做个按摩再说……

有了分析工具,让我们看看需要优化的点有哪些(忽然在你脑海中出现的那些^)

下面是我的vendor包 也就是第三方模块的打包 有600k之大 绝对是个累赘

能看到我这里用的第三方库和属类

对应解决方案:

能做cdn的就直接甩cdn

能自己写的直接自己写

被浪费的要么寻找更轻量的替代、要么换其他方案、要么自己写(比如日期处理)

2016.6.14更

目前进展

未完待续...下个目标是把jquery和sm干掉~

Vue基础知识

数据双向绑定,组件化,单文件组件

全局api: vue.extend 、 vue.set

实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项

实例属性和方法: vm.$on 、 vm.$data 、 vm.$destroy() 在$都是vue的实例和方法

指令: directive

内置组件: components/compontents 、 keep-alive/keep-alive 、 router-view/router-view

数组中不可用的方法:slice,concat;

直接修改数组list[i] = 值,不可以这样直接修改;

Vue.set(数组,索引,{值}) vue的全局方法set来更改数组的某一项的值

标签属性和条件渲染

标签属性: v-bind:href='link"; 等效于 :href="link" 动态绑定;

条件渲染: v-if 、 v-else 、 v-show ;

数据绑定: {{...}} 、 v-html (原始-HTML)、 v-text ;

事件绑定-内置事件绑定,自定义事件绑定

v-on:click="run" 等效于 @:click="run" 事件绑定;

自定义事件绑定: 父组件自定义事件

my-compented @my-event='toggle'/my-compented

子组件触发 my-event 自定义事件; this.$emit('my-event', opation);

父组件执行toggle 函数;

计算属性和数据监听

computed选项 -计算属性:根据我们调用属性来跟新,调用的属性没有变更,我们computed选项里面的方法读取的是缓存;

页面内容响应数据v-once

如果你需要页面内容响应数据的变化,就不加v-once。

如果你需要页面内容渲染后,不随数据的变化而变化,就加上这个。

对于一些固定不变的组件,在调用时我们可以加上v-once,只在第一次渲染执行,保存数据在内存中,后面再调用直接从内容中提取,提高执行效率。

应用

组件的通信

p:is = "动态的组件名"/p 等同于 动态的组件名/动态的组件名 动态绑定组件

注:Vue有个单项数据流的概念:即父组件传递给子组件的参数,子组件不能直接修改;防止引用类型参数被修改后,如果父组件中其他地方也使用了此参数会受到影响。

子组件 props 接受的两种形式:

数组: ['first-name','two-name'] ,从父组件传递两个属性值;

动态展现: {{firstName}}

对象:

slot:插槽

父组件插件里面定义的内容放到子组件 slot 中:

子组件

vue高级功能--过渡和动画

自定义指令:

使用 vue-cli的优势:

成熟的vue项目架构设计;

本地测试服务器;

集成打包上线方案 webpack

npm install vue-cli -g :全局安装vue-cli

vue init webpack my-project :初始化项目

npm install 安装项目依赖

npm run dev :在localhost启动测试服务器;

npm run bulid :生成上线目录(部署)

a、安装 vue-router

b、配置路由

6、关闭eslint

dev模式下,默认会做eslint检测,若要关闭,打开 config/index.js ,设置 useEslint: false ,${}占位符,多行字符串

7、生命周期

8、支持es6

es6中很多新特性很好用class、promise、then、catch、...(数组转换符号)、函数设置参数默认值等

a、安装babel-polyfill

b、在入口main.js文件当中引入:

c、找到build文件夹下的webpack.base.conf.js

文章参考: 慕课网-欧米雪儿lyy

代码中怎么看出使用了vue框架

前端src下有以vue为后缀的页面,就说明前端页面使用了vue框架;3.4.2.代码中有下面这个注解,就说明java后台用了springBoot框架;@SpringBootApplication

怎么查看vue.js是否安装成功

查看vue.js是否安装成功的具体步骤如下:

1、首先打开电脑桌面左下角开始菜单栏中的“运行”。

2、然后在弹出来的窗口中点击输入“cmd”,鼠标左键点击下方的“确定”。

3、然后在弹出来的窗口中点击输入命令“vue -v”,回车确定,弹出vue相关命令的提示,就说明vue是成功安装的了。

vue和element版本对应关系

vue和element版本对应关系,vue是一个渐进式框架,Element-Ui是组件库。Vue是一套用于构建用户界面的渐进式JavaScript框架,开发者只需要关注视图层,它不仅易于上手,还便于与第三方库或既有项目的整合,是基于MVVM,Model-View-ViewModel,即视图层-视图模型层-模型层设计思想,提供MVVM数据双向绑定的库,专注于UI层面,element是基于vue实现的一套不依赖业务的UI组件库,提供了丰富的PC端组件,减少用户对常用组件的封装,降低了开发的难易程度,Element-Ui是基于vue封装的组件库,简化了常用组件的封装,提高了重用性原则,vue是一个渐进式框架,Element-Ui是组件库。

关于怎么看vue项目有没有elment和查看是否安装vuecli的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

1、本网站名称:源码村资源网
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » 怎么看vue项目有没有elment(查看是否安装vuecli)

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论