如何区分完整版与非完整版？

以bootcdn为例，我们可以看到，vue有许许多多不同的版本。

其中，最大的区别就是完整版与非完整版。

当然，一般开发时我们都会选择mini版本，因为其去除了注释，并且经过压缩，体积更小。

完整版与非完整版的区别

当我们的项目是以runtime版本进行时，我们无法之际额获取html中的元素。

浏览器会提示我们正在使用的是非完整版，无法获取html中的元素，对其进行更换。

原因是非完整版缺少一个编译器，无法将复杂的，以vue语法写的html转换为dom节点。例如@click等。所以只能使用render(h){}进行编写，该方法比较复杂，这里不做演示。

而完整版是由编译器的，所以可以直接获取dom节点。

那此时，我们会有一个疑问，既然非完整版没有编译器，那么，它存在的意义是什么呢？

那是因为完整版虽然功能强大，但是由于编译器的存在，使得用户端的文件变得十分庞大，与非完整版相比，它大了30%-40%。

因此，开发者们会尽量选择非完整版编写vue项目，提高用户的体验。

而且，由于webpack的存在，使得我们可以在非完整版中写完整版的语法，在通过vue-loader转换为非完整版的语法，在减小开发难度的情况下又保证了用户体验。

总结：

我们可以创建一个vue结尾的文件，其中写需要loader的代码，

该文件一般包含3个部分，template script style

<template> 
//需要放进container中的html代码
</template>

<script>
//js相关代码
</script>

<style>
//css相关代码
</style>

写完之后，需要在js文件中render

import Vue from 'vue'
import demo from "./demo.vue"
//引入vue中的文件

new Vue({
    el: '#app',
  render (h){
     return h(demo)
   },
 })

最后，给大家安利一个网站 codesandbox.io

它是一个非常强大的在线编辑网站，我们打开以后无需配置即可创建下载vue项目，

不要注册登录，否则只能创建50个项目。