为了使用vue单文件组我都做了哪些额外的努力

本来只想学vue

本来是想学vue的，因为觉得学了vue就可以利用一些框架，可以直接利用一些组件了，虽然有Bootstrap这样的东西，但是它是静态的，只组件了css和html，并没有组件js，无法做到动态切换界面内容，数据更新等，所以学vue还是有用的；
本来只以为学学vue语法就好了，学的过程中经常碰见什么脚手架，npm，我以为不用学这么多，反正我是一个后端，这些了解一下就行了；后来直到我想用.vue文件这样的单文件组，不想把模板写到js中了，但是我没有想到，单文件组件的方式，语法居然不是js的，是vue自己发明的语法，需要vue插件的翻译才行，服了，官网推荐脚手架，一堆名词根本看不懂，我不得不又去学了什么是npm，什么是node.js，什么是webpack，什么是vue cli…
下面是我对这些东西的一些总结，如果你想学vue，就一定会用到但文件组的方式，不然学vue意义不大，用着还不如Bootstrap，所以你一定得去了解这些知识才行；

node.js是什么

node.js是一个js代码运行的引擎，基于谷歌的v8引擎，v8是个发动机名字不是版本；谷歌浏览器的引擎也是v8；

node.js把这个引擎提取出来，作为一个运行js的服务软件，所以一般浏览器支持的js语法，node.js也会支持；

npm是什么

它是一个包管理器，使用js语言开发的，需要node.js运行支持；它的作用不仅仅是包管理，他还有发布，构建，运行js插件代码的功能；node.js不仅仅可以使用这个，还由yran可以使用；

差不多和maven这样的工具差不多；

babel是什么

一个基于js写的，把es6的语言的代码转化成es5的工具；它可以成为npm的插件；

webpack是什么

webpack是一个打包工具，可以分析代码的依赖关系，转化成标准的项目文件格式，它可以利用其它许多工具，比如babel来做语法转义，利用vue的插件实现支持vue单文件组件的语法；

配置很麻烦；他也是基于js写的；npm功能的补充；

用npm进行运行；

单文件组件vue

这个文件是一个组件，他基本满足js语法，但是它有自己的语言，因为它把把模板html代码css代码js代码都放到一个文件内了；这三个都成为js对象组件，所以需要额外的解析才可以使用；

普通的注册，html模板注册是需要携带js代码里字符串变量中的，然后用js进行注册，但是不能注册css；要注意好css的路径问题；

vue脚手架

快速生成一个支持单文件组件的项目，自动生成一个支持npm，也就支持了webpack的项目；

安装一个vue脚手架，命令行就可以使用 vue命令；

vue ui命令可以使用可视化的方式生成项目；

只是生成，运行打包还是需要npm命令；

命令行的还得使用npm配合使用运行打包；可视化的直接控制全部；

关系总结

node.js提供了基础的运行环境，npm用于项目的包管理打包，构建，运行，发布一套工具，且基于js环境，又用cmd命令打包成一个exe文件；

其它的babel啊，webpack啊都是它的插件代码，提供额外的功能；

vue脚手架是用于帮npm控制快速生成一个具有webpack,第三方ui框架的工具，他和npm具有同等地位，也是一个exe运行环境文件；命令行版的需要搭配npm使用，可视化版的不用直接控制npm；