Vue——day13之脚手架

news2024/9/25 19:20:27

概述

创建一个脚手架

首先下载脚手架

创建文件

脚手架中代码分析

main.js

index.html

render

为什么要用render

脚手架的默认配置

总结

概述

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

创建一个脚手架

首先下载脚手架

打开CMD

npm install -g @vue/cli@版本号

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

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

创建文件

vue create vue_test

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

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

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

npm run serve

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

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

脚手架中代码分析

main.js

/**
 * 该文件是整个项目的入口文件
 */

// 引入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

<!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函数的示例：

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结构挂载到id为app的元素上。

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

为什么要用render

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

vue.js是完整版的Vue，包含Vue的核心功能和模板解析器。这意味着在使用vue.js时，可以使用Vue提供的模板语法来编写页面的模板，并由Vue自动编译和解析模板。
vue.runtime.xxx.js是运行版的Vue，只包含Vue的核心功能，没有模板解析器。因此，在使用vue.runtime.xxx.js时，不能直接使用template配置项来编写模板。相反，需要使用render函数接收到的createElement函数来通过JavaScript代码来定义页面的结构和内容。

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

总结一下：