vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置

简介: 这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。

前言

一、Runtime-Compiler和Runtime-only两个模式

1. 模式来源

创建项目时需要选择一个模式,就是这两个模式之一 runtimecompilerruntimeonly ,如下所示
在这里插入图片描述

2. 案例显示

使用脚手架2版本 vue init webpack project-name新建两个项目,如图
在这里插入图片描述
01 选择的是 Runtime+Compiler
02 选择的事 Runtime-only

3. 区别

模式不同主要体现在两个项目中的 main.js 中的不同,如下:
01_runtimecompiler项目
在这里插入图片描述
02_runtimeonly项目
在这里插入图片描述

4. 引发思考

引发思考:为什么存在这样的差异呢?

  1. 我们需要先理解Vue应用程序是如何运行起来的。
  2. Vue中的模板如何最终渲染成真实DOM。
  3. 我们来看下面的一幅图:vue 程序运行过程

二、Vue程序运行过程和原因

在这里插入图片描述
运行过程解析

  1. template的模板存放到 vue 的 option 中,
  2. 然后 parse(解析) 成 ast(abstract syntax tree 抽象语法树)
  3. 在编译,然后使用 render() 方法
  4. 通过render() 生成 虚拟dom ,在展现成 UI。
  5. 总结下:template -> ast -> render -> vdom -> UI

综上所述,区别如下:
通过 上面了解到, 两个模式的区别如下:

 runtime-compiler(v1)
 template -> ast -> render -> vdom -> UI

 runtime-only(v2)(1.性能更高 2.下面的代码量更少)
 render -> vdom -> UI

可以看到 runtime-only 比 Runtime+Compiler 1. 性能更高 2.下面的代码量更少

当然: runtime-compiler 模式中,也可以使用 render() 函数,看本项目的 main.js 即可。

注意runtime-compiler模式下,也可以使用 render 函数进行开发
推荐使用 第一个。但是在以后项目开发时,推荐使用第二个,因为 1.性能更高 2.下面的代码量更少

三、render 函数使用

1. 使用方式一

在这里插入图片描述
在这里插入图片描述

2. 使用方式二

这里的 cpn 组件,也就是后来的 APP 组件。
在这里插入图片描述

四、eslint 关闭

01_runtimecompiler\config\index.jsuseEslint 属性,true 开启, false 关闭

五、脚手架2和3版本的配置文件

1. 脚手架2版本

  1. 先看下脚手架2版本创建的项目目录
    在这里插入图片描述
  2. 有两个文件夹,build 和 config 。里面都是配置文件
  3. 先看package.json 里面的 script 脚本,如下:
    在这里插入图片描述
  4. 可以看到对应的配置文件,里面又会引入其他配置文件。

2. 脚手架3版本

  1. 先看下脚手架3版本创建的项目目录,03是命令式创建,04是 可视化工具创建
    这里没有配置文件的文件夹。
    在这里插入图片描述
  2. 先看下 package.json,这里并没有配置文件路径。
  3. 说明脚手架3版本创建的项目把配置文件给隐藏了,
    隐藏路径:04-vuecli3test/node_modules/@vue/cli-service/webpack.config.js
  4. 如何修改配置呢,继续往下看

六、vue项目管理器

  1. 通过命令 vue UI 进行启动服务 vue项目管理器。

  2. 有三个模块:项目、创建、导入

    • 项目:vue项目管理器 进行管理 通过脚手架创建的项目
    • 创建脚手架3版本 可视化创建vue项目
    • 导入: 没有通过脚手架3版本可视化创建的项目,是不会出现在项目模块中,可以通过导入进行使用 vue项目管理器 进行管理
      在这里插入图片描述
  3. 点击项目,就进入了项目的管理界面,如下:
    在这里插入图片描述

  4. 分析项目界面的五个模块

    • 仪表盘:没什么好说的
    • 插件: 可以看到已经安装的插件,也可以进行安装新插件
    • 依赖: 可以看到已经安装的依赖包,也可以在此安装新依赖包,如axios、vue-router等
    • 配置: 一些webpack的配置
    • 任务: 启动项目等操作,对应 package.jsonscript 脚本操作。

七、脚手架3版本创建项目的配置文件配置

有三种 方式

1. vue项目管理器配置

通过 vue UI 命令启动 vue项目管理器 服务。
配置中修改,这里其实就是替换了项目中的webpack.config.js如下: 在这里插入图片描述

2. 脚手架2版本配置

  1. 脚手架2版本中,有两个文件build 和config 存放配置文件,
  2. 而在脚手架3版本中,是没有这两个配置文件的,而在被隐藏了
  3. 隐藏路径:04-vuecli3test/node_modules/@vue/cli-service/webpack.config.js
  4. webpack.config.js 文件中又引入了其他文件。一层层的去调用和引用

3. vue.config,js

在项目根目录下创建配置文件 vue.config,js, 作为额外的 配置文件内容。
里面的内容会和 隐藏起来的配置文件内容 进行合并。
文件名称固定,不可以更改。

相关文章
|
17天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
17天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
17天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
19天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
20天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
23 1
vue学习第一章
|
20天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
22 1
vue学习第三章
|
20天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章
|
20天前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
21 1
vue学习第7章(循环)
|
20天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
28 1
vue学习第九章(v-model)
|
20天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
33 1
vue学习第十章(组件开发)