蔡书雄目前是腾讯用户体验设计部QQ空间的高级UI工程师。智图图像优化系统总工程师，参与翻译《众妙之门》书籍。
目前专注于前端图像优化及新技术研究。 2020年，乃至接下来的一年，如果要问哪个前端技术框架最受欢迎，那无疑是前端三巨头：React、Angular、Vue。
没错，jQuery、seaJs、gulp 等已经逐渐失宠了。如果你在面试的时候不吹嘘新技术，就会显得你不是做前端的。
当然，我希望大家怀着一颗好学的心开始学习技能。不管怎样，请继续阅读~本系列文章将使用大量清晰的示例和实用的项目组件库，帮助您一步步学习Vue。
毕竟这篇文章还有下面的【入学篇】和【毕业篇】。什么是 Vue.js？不管你想不想知道，你只需要大致知道Vue是一个像jQuery一样的前端框架。
其核心思想是数据驱动。就像古代的老牌jQuery一样，它是结构驱动的。
这是什么意思？过去，我们在编写代码时使用$('.dom').text('我改变了值')。这种写法需要先获取结构体，然后修改数据来更新结构体。
Vue的做法是直接this.msg=“我改变了”，那么msg就会同步到某个结构，视图管理被抽象为数据管理，而不是管理dom结构。如果你不明白也没关系，慢慢来。
另外你必须知道的是，Vue 是中国人写的，技术文档也是中文的。想到这里，我就有了学习的动力。
环境搭建，工欲善其事，必先利其器。我们的学习计划从学习搭建Vue所需的环境开始。
不用说，node和npm环境是必要的。前端流程现在很流行，基本上是一种新技术。
所有的开发都会在这套流程的基础上进行。我们只需站在巨人的XX上，穿上*即可。
我假设你的机器上已经有最新的node和npm，那么我们只需要执行以下命令： 代码语言：javascript copy $ npm install -g vue-cli 构建完成后，输入我们准备的任意一项前进 目录，如 demo 目录，然后在该目录中进行初始化操作： 代码语言：javascript copy $ vue init webpack myProject webpack 参数指的是 myProject 项目，它将帮助你在开发和完成阶段自动打包代码，比如将js文件统一为一个文件，CSS文件统一合并压缩等。如果你不了解webpack，建议先了解一下。
当然，如果你看不懂，也不影响我们继续下去。在init过程中，会要求你定义项目的一些描述和版本信息。
你可以忽略它。继续输入 y 确认跳过。
完成后会出现如下界面。红色框会提示您进行下一步操作。
跟着它。如果出现提示，只需继续键入代码即可。
代码语言： javascript copy cd myProject npm install npm run dev npm install 是安装项目所需的依赖。简单的理解就是安装一些必要的插件，这需要一段时间； npm run dev 开始执行我们的项目。
执行此命令后，稍等片刻，浏览器应该会自动为您打开一个选项卡。运行build会编译我们的源代码并生成最终的发布代码（在dist目录中），看看Vue为我们生成了哪些文件。
其中，我们需要关心的是下面的文件package.json保存了一些依赖信息，config保存了一些项目初始化配置，build保存了webpack的一些初始化配置，index.html是我们的主页。除了这些之外，最关键的代码都在src目录下。
很多服务器语言都预设了Index作为主页，例如index.htm、index.php等；打开build目录下的webpack.base.conf.js，会看到这样的代码，说明我们的入口js文件在目录下的src main.js中，接下来我们先分析这些初始化代码；跟着代码走一遍Vue的核心架构。根据官方的解释和个人理解，主要由组件和路由两个模块组成。
只要理解了这两个模块的思想内容，剩下的使用API??就只是几分钟的事情了。因此，在我的系列文章中，我将教大家如何围绕组件和路由来开发前端组件库。
这个过程也是我个人的训练项目。个人觉得一步一步做完之后，我对Vue的理解可以称得上是大师了，比书上文档看了10遍还要好，那是以后的事了，我们看一下最基本的默认代码首先由Vue生成！代码语言: javascriptCopy // 使用 `import` 命令加载的 Vue 构建版本//（仅运行时或独立）已在 webpack.base.conf 中使用别名设置。
import Vue from 'vue'import App from ' ./App'从'./router'导入路由器Vue.config.productTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, template: ' ' , Components: { App }}) 首先代码语言第一句： javascript copy import Vue from 'vue' 很容易理解，就像你要引入 jQuery，vue 是 jquery-min.js，然后 Vue 是$ ;然后引入./App文件，它是目录下与main.js同级的App.vue文件；在Vue中引入文件时，可以直接使用import，文件后缀可以是.vue，即Vue自带的文件。类型，前面说过，webpack会打包js和css文件。
同理，在webpack中配置好vue插件后（项目默认配置），webpack就可以集成打包.vue类型的文件，这和nodeJs中的require类似。原因。
回到App.vue 文件，这是一个视图（或组件和页面）。想象一下，我们的index.html 中什么都没有，只有一个视图。
这个视图就相当于一个容器，然后我们把它放到这个容器里。各种构建块（其他组件或其他页面），App.vue中的内容稍后讨论；代码语言： javascript 复制代码 import router from './router' 来引入一个路由配置，同样的稍后会讨论（别担心，我很快就会讲到） 接下来实例化 new Vue 其实是等价的到我们平时写js时使用的init，然后声明el:'#app'，意思是把id值中的所有视图放到app的dom元素中，components表示导入的文件，也就是上面说的应用程序.vue 文件。
该文件的内容将被写入#app，并带有类似的标签。总的来说，这段代码的意思就是把App.vue放在#app中，然后用来引用我们的#app。
代码语言： javascript copy import Vue from 'vue' import App from './App'/*引入App组件*/import router from './router'/*引入路由配置*/Vue.config.productTip = false/ * eslint-disable no-new */new Vue({ el: '#app',/*最终效果会将页面中的div元素替换为id app*/ router,/*使用路由*/ template: ' ',/*通知页面此组件被这样的标签包裹并使用*/ Components: { App }/*通知当前页面要使用App组件*/}) -page 组件已经准备好了，现在打开我们的 App.vue 文件，在 Vue 中，官网称其为组件。单页意味着结构、风格、逻辑代码都写在同一个文件中。
当我们引入这个文件的时候，就相当于引入了对应的结构体。 、样式和JS代码，这不正是我们做前端组件化时最希望看到的吗？以前的asp和php也有这个文件的想法。
代码语言：javascript copy < script>export default { name: 'app'}node端之所以能识别.vue文件，是因为前面提到的webpack会编译.vue文件。 vue文件中的html、js、css被提取并合成为新的单独文件。
单页面组件会在后面的实战中得到充分体现。这里我就不过多描述了。
看到我们的文件分为三部分，分别是