Vue——day13之脚手架

目录

概述

创建一个脚手架

首先下载脚手架

创建文件

脚手架中代码分析

main.js

index.html

render

为什么要用render

脚手架的默认配置

总结


概述

Vue的脚手架是一个快速构建Vue项目的工具,它集成了一系列的开发工具和配置,提供了一种标准化的项目结构和开发流程,使得开发者可以更加方便、快速地搭建和开发Vue项目。Vue官方推出的脚手架工具是Vue CLI(Command Line Interface),通过使用Vue CLI,开发者可以通过简单的命令行指令来创建、开发和打包Vue项目。Vue脚手架提供了一套默认的项目模板和配置,同时也支持自定义配置,开发者可以根据项目需求进行相应的配置和扩展。通过使用Vue脚手架,开发者可以省去繁琐的配置步骤,更加专注于业务逻辑的开发。

创建一个脚手架

首先下载脚手架

打开CMD

bash 复制代码
npm install -g @vue/cli@版本号

例如:npm install -g @vue/cli@4.5.13

下载完成之后重启CMD输入下面的命令

创建文件

bash 复制代码
vue create vue_test

此时他会让你选择,我这里是已经选择好的界面

因为我是使用Vue2,所以我就选择Vue2了,如果你们选择Vue3那就选。

这样就创建成功了,然后我们进入 vue_test这个文件夹再执行命令

bash 复制代码
npm run serve

就可以启动这个脚手架了了,里面有一些初识代码,启动后效果如下

如果看到下面的页面就说明成功创建啦!!!!


脚手架中代码分析

main.js

html 复制代码
/**
 * 该文件是整个项目的入口文件
 */

// 引入Vue
import Vue from 'vue'
// 引入App组件,它是所有组件的父组件
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false

// 创建Vue示例对象
new Vue({
  el:'#app',
  // 将App组件放入容器中
  render: h => h(App),
})

index.html

html 复制代码
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的特殊配置,让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页的标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持JS的时候, noscript中的元素就会被渲染-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

render

在Vue脚手架中的render函数是一个用来生成DOM结构的函数。在Vue.js中,我们可以通过编写模板来描述我们的页面,然后Vue会根据模板生成相应的DOM结构。而在Vue脚手架中,可以选择使用render函数来代替模板。

render函数接受一个函数作为参数,这个函数返回一个虚拟节点(VNode),Vue会根据这个虚拟节点来生成实际的DOM结构。通过在render函数中编写JavaScript代码,我们可以更灵活地控制DOM的生成过程。

例如,下面是一个简单的Vue脚手架中的render函数的示例:

javascript 复制代码
import Vue from 'vue';

new Vue({
  render: function (h) {
    // 返回一个虚拟节点,用于生成DOM结构
    return h('div', 'Hello World');
  },
}).$mount('#app');

在上面的例子中,我们在render函数中通过调用h方法创建了一个div元素,并且将Hello World作为文本内容传递给div元素。然后,render函数返回了这个虚拟节点,Vue会根据这个虚拟节点生成相应的DOM结构,最后将DOM结构挂载到idapp的元素上。

使用render函数可以更直观地描述我们的页面结构,也可以更灵活地控制DOM的生成过程,适用于更复杂的页面需求。但对于简单的页面,使用模板可能会更加方便和直观。

为什么要用render

Vue有不同版本,其中包括vue.js和vue.runtime.xxx.js。它们之间的区别在于功能的不同:

  1. vue.js是完整版的Vue,包含Vue的核心功能和模板解析器。这意味着在使用vue.js时,可以使用Vue提供的模板语法来编写页面的模板,并由Vue自动编译和解析模板。

  2. vue.runtime.xxx.js是运行版的Vue,只包含Vue的核心功能,没有模板解析器。因此,在使用vue.runtime.xxx.js时,不能直接使用template配置项来编写模板。相反,需要使用render函数接收到的createElement函数来通过JavaScript代码来定义页面的结构和内容。

所以,对于vue.runtime.xxx.js版本,需要手动编写render函数,并在函数中使用createElement函数来创建虚拟节点(VNode)来描述页面的结构。这样,Vue就可以根据这些虚拟节点来生成实际的DOM结构。这种方式更加灵活,适用于需要更精细控制的情况。

总结一下:

  • vue.js是完整版的Vue,包含核心功能和模板解析器,可以直接使用模板进行开发。
  • vue.runtime.xxx.js是运行版的Vue,只包含核心功能,需要手动编写render函数,并使用createElement函数来创建虚拟节点描述页面结构。不能使用模板配置项来编写模板。

脚手架的默认配置

Vue脚手架隐藏了所有webpack相关的配置,若想看具体的webpack配置,可以执行

vue inspect > output.js

这个命令

然后就会有一个output.js文件可以看见啦

总结

这篇文章挺水的,因为逻辑不清晰嘿嘿

相关推荐
web行路人4 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0016 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92124 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂26 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石35 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程36 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二1 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236481 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript