vue-cli4.0的安装和使用

1.安装全局cli

安装cli:npm install -g @vue/cli
查看版本:vue --version

2.创建项目

命令:vue create my-project(项目名,禁止大写)


image.png

default:默认配置
Manually:手动配置

3.创建项目时Runtime + compiler和Runtime-only选项的区别

image.png

render函数是用来创建html模板,右边图中render函数等价于


image.png

createElement 是 render 函数 的参数,它本身也是个函数,并且有三个参数。
createElement约定的简写为h。

1、区别一

通过这两种方法创建的脚手架,区别在于main.js(在src文件夹中)

在Vue实例中,runtime-compiler创建的项目中参数是:

components和template

runtime-only创建的项目中参数为:
      render函数

2、组件的渲染过程

组件是如何被渲染到页面中的?
    template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面

ast:抽象语法树

vDom:虚拟DOM
3、runtime-only

·我们在使用runtime-only的时候,需要借助webpack的loader工具,将.vue文件编译为javascript,因为是在编译阶段做的,所以他只包含运行时的vue.js代码,所以代码体积会更轻量

·再将.vue 文件编译为javascript文件的过程当中会将组件的template模板编译为render函数,所以我们得到的是render函数的版本

运行的时候是不带编译的,编译是在离线的时候做的

·template会通过vue-template-compiler转换为render函数

4、runtime-compiler

·在vue中,最终渲染都是通过render函数,如果写template属性,则会编译为render函数,那么这个编译过程会在运行时发生,所以需要带有编译器的版本

·编译过程会对性能有一定的损耗
结论:

runtime-only:将template在打包的时候,就已经编译为render函数

runtime-compiler:在运行的时候才去编译template

结果:

发布生产的时候,runtime-only构建的项目代码体积更小,运行速度更快

推荐使用runtime-only函数
转自:https://juejin.im/post/5dd6008cf265da47d67c214f

4.vue项目图形化管理

终端命令:vue ui
所有的配置文件都可以在里面修改

5.手动更改配置文件

在根目录下创建vue.config.js文件,通过module.exports={}导出

6.项目文件说明

image.png

7.打包文件说明

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,701评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,649评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,037评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,994评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,018评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,796评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,481评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,370评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,868评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,014评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,153评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,832评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,494评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,039评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,437评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,131评论 2 356

推荐阅读更多精彩内容

  • 2017年9月3日下午,泰安市实验学校的阶梯教室里300多教师齐聚一堂,共同聆听来自北京的核心素养专家谢应新老...
    泰山兔阅读 1,242评论 0 0
  • 4:40,放学的铃声响了,一班车的孩子奔涌出了教室,汇向广场集合。家长接送的孩子也在你推我嚷中到楼下整队...
    心之山水阅读 320评论 0 2
  • 人间烟火,烹制的是苦辣甜酸。 苏笑娥说:“不要这样迁就我,我会照顾自己。” 姜家声说:“我不是不放心你,我是不放心...
    籽盐阅读 259评论 0 1
  • 新年到来之时我们早早准备好祝福,在太阳升起的前一刻送出那句暖心的话,新的一年也在祝福声中拉开帷幕! 随着时代的变迁...
    淡之水阅读 340评论 0 0
  • 现在是凌晨3点,女儿在我旁边甜甜地睡着,小孩儿总是闲不住,睡觉的时候小腿儿也是踢腾,我时不时地给她盖盖被子。...
    c5405e31417a阅读 237评论 0 0