目录
概述
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结构挂载到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结构。这种方式更加灵活,适用于需要更精细控制的情况。
总结一下:
- vue.js是完整版的Vue,包含核心功能和模板解析器,可以直接使用模板进行开发。
- vue.runtime.xxx.js是运行版的Vue,只包含核心功能,需要手动编写render函数,并使用createElement函数来创建虚拟节点描述页面结构。不能使用模板配置项来编写模板。
脚手架的默认配置
Vue脚手架隐藏了所有webpack相关的配置,若想看具体的webpack配置,可以执行
vue inspect > output.js
这个命令
然后就会有一个output.js文件可以看见啦
总结
这篇文章挺水的,因为逻辑不清晰嘿嘿