Vue学习笔记——Vue CLI详解

视频资源来自:b站coderwhy王红元老师——最全最新Vue、Vuejs教程,从入门到精通
文章仅为个人观看视频后的学习心得笔记,用于个人查看和记录保存。文中定有疏漏错误之处,恳请指正。

Vue CLI详解

Vue CLI

<font color=#909534>Command-Line Interface</font>

Vue CLI使用前提 :Node、webpack、npm

安装:npm install -g @vue/cli

安装CLI2:npm install @vue/cli-init -g

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

Vue CLI3初始化项目:vue create my-project

Vue CLI2

VueCore+vue-router+vuex

ES(js)-Lint<font color=#909534>——对js代码进行限制,之后都必须写规范。</font>不能有任何错误(多个逗号、分号、函数和括号少空格了、定义了函数没有用),否则会报错。

可以在config文件夹里的修改useEslint为false

<font color=#909534>ctrl + S保存程序</font>

e2e<font color=#909534>——end to end端到端测试</font>->selenium

image-20210709100646643

js ->字节码 ->浏览器

V8引擎:js ->二进制代码

static静态资源文件夹,编译后会原封不动地放到dist文件夹

CLI2生成的目录结构解析

image-20210709150414397

Runtime-Compiler和Runtime-only的区别

箭头函数:

render: h => h(App)

等价于

render: function (h) {
  return h(App)
}

Vue程序运行过程:

image-20210709151857174

template - >ast ->render ->virtual dom ->真实dom


==runtime-complier:==

image-20210709152323442

template - >ast ->render ->virtual dom ->UI


==runtime-only:==

image-20210709152651266
image-20210709153213535

render ->virtual dom ->UI

流程少,性能更高,代码量更少(轻6kB)

1.createElement('标签',{标签的属性},['标签里的内容'])

new Vue({
 el: '#app',
 render: function (createElement) {
    return createElement('h2',
      {class:'box'},
      ['Hello World',createElement('button',['按钮'])])
  }
})

2.传入组件对象:<font color=#909534>这样就不用写template了</font>

new Vue({
 el: '#app',
 render: function (createElement) {
    return createElement(cpn)
 },
 components: {
    cpn
  }
})

相似于runtime-only

那么,.vue文件中的template是由谁处理的呢?

loader-template-complier

App对象:没有template,只有render

image-20210709160925836
image-20210709170114602
image-20210709170125903

Vue CLI3

vue2.5.21 ->vue2.x ->flow-type(facebook)

Vue3.x ->TypeScript(microsoft)

设计原则:“0”配置

vue ui 可视化

<font color=#909534>preset:配置</font>

<font color=#909534>manually:手动的</font>

按空格是选择/取消

配置:

image-20210709172800096

<font color=#909534 size=2>Users/YY/</font>全局配置文件.vuerc保存了个人配置

vcs -> version control system 版本控制错误

之前的dev变成serve了。"serve": "vue-cli-service serve",

<img src="https://xiao910888.oss-cn-hangzhou.aliyuncs.com/img/image-20210709175444224.png" alt="image-20210709175444224" style="zoom:50%;" />

el也不用写

配置:

1.在终端/cmd:vue ui

导入文件夹后,可以显示项目仪表盘

2.项目中创建文件:vue.config.js <font color=#909534>必须这个名</font>

使用git添加进去:git add .git commit -m '修改配置文件'

总目录:
总目录:
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 视频资源来自:b站coderwhy王红元老师——最全最新Vue、Vuejs教程,从入门到精通[https://ww...
    小910888阅读 944评论 0 0
  • 一、什么是Vue CLI 使用Vue开发大型项目时,如果诸如代码目录结构、项目结构和部署、热加载、代码单元测试等事...
    想吃热干面了阅读 1,397评论 0 1
  • [toc] 邂逅Vue.js 1.编程范式- 命令式编程 如jquery- 声明式编程 只需要生命需要显示的东西...
    debug_LX阅读 239评论 0 0
  • Vue CLI[cli.vuejs.org] 1. 什么是 Vue CLI 网址:cli.vuejs.org 脚手...
    cscoder阅读 276评论 0 1
  • 前沿 置身世外只为暗中观察!!!Hello大家好,我是魔王哪吒!重学巩固你的Vuejs知识体系,如果有哪些知识点遗...
    lessonSam阅读 1,203评论 0 13