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
AI 代码解读

可以看到 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, 作为额外的 配置文件内容。
里面的内容会和 隐藏起来的配置文件内容 进行合并。
文件名称固定,不可以更改。

目录
打赏
0
3
3
0
49
分享
相关文章
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
64 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
60 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
49 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
69 12
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
155 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
76 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
79 1

热门文章

最新文章