VUE超超超！入门介绍

嗯。。。VUE手把手教程来了！

在运行vue项目之前是必须需要安装下面两个，但实际上node.js中有npm,npm是一个包管理工具，可以理解为和Maven差不多 的东西
在执行npm命令时，默认使用的是国外的下载源，可以 通过一下代码配置为淘宝的镜像 ：

npm config set registry https://registry.npm.taobao.org

成功之后，接下来安装 Vue的工具：

• npm install -g vue-cli # 只需要第一次安装时执行
• vue init webpack my-project # 使用webpack模板创建一个vue项目
• cd my-project #进入到项目目录中
• npm install # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）
• npm run dev # 启动项目

这里我们使用PowerShell来创建一个 vue项目，用cmd也是可以的

在downloading template一段时间后就会开始一些列的设置，黄色字体为系统对你的询问，后面为我创建这次项目时候做出的选择。在最后一步我选择了No,是因为带你第一次创建vue项目还是一步一步来，熟悉后便可选择上面两项的 任意一项了。这里其实只是选择No后，需要我们进入到项目文件夹中手动执行运行一下npm install，而选择了yes他会自动帮你执行这条命令。项目生成后我们这次使用HBuilder X来打开目录，不要问为什么。。。

其中package.jsonpackage.json 定义了当前项目的依赖，其中dependencies 当项目打包后会跟着项目一起发布。devDependencies开发时候的依赖，项目打包后不会跟着项目一起发布。执行npminstall 时下载的也就是这里面的依赖，就是node_modules文件。
运行项目后我们发现，明明 只有一个index.html页面，为什么却显示了这么多内容呢？这里修改了index.html中的title为javaboy，来确定这一点。


很容易想到 ，这里是因为html页面中body的内容被替代了！我们来看main.js的代码（整个项目入口）

这里new了一个vue对象，el: #'app'的意思是把前面html页面中id='app’进行 了渲染，然后注册新的组件{ App }（导入在页面最上方import。先导入，在注册!)
最后显示的内容为 template: '<App/>'。我们来看看App.vue里面定义的内容

页面由<template>，<script>，</style>三部分组成。是不是发现了template呢？
在div中，展示了一张图片，然后是一个陌生的<router-view/>路由。可以把路由简单理解为一个占位符，展示什么内容不确定也不知道，具体所展示的内容由访问 的URL来决定。URL指向了什么资源，这个标签的位置就展示什么！简单的来说就是不同路径展示 不同的东西。
可以在components中看到一个HelloWorld.vue的文件，定义好之后需要在路由里面去注册 ，注册后才能跳转可以看到index.js中先import,然后在routes[]中定义了路径、名字、组件名称。路径。然后找组件 。现在我们来自定义一个组件，然后注册后访问他！
在components文件夹下定义一个.vue文件

随后在路由表中注册，并且进行配置


大功告成！