【呆萌の体验】vue.js初次体验

摘要：官方默认项目是存放了一个为的打开文件夹有一个，还有一个名为组件的文件夹，里面放了一个文件。部分我们会发现这几排字就是显示在页面的几排文字部分这其中的这个文件引入了，还有上述的。结合查询其他说法，就是说它会把是的元素以形式替换。

我很早就想来学习学习vue.js啦，终于有了那么一些空闲的时间可以拿来学习，于是从前天开始我就每天抽一个多小时来体验vue.js。
当然啦，因为是小白入门，这其中可能会有“错误”或者不恰当的说法，还请各位大神能多指正我(●"◡"●)。

Vue.js官网：https://cn.vuejs.org/v2/guide...
固然最好的资料就是官网了，所以一开始我在官网上看了一些基本的用法，然后就跟着官方的安装教程安装（https://cn.vuejs.org/v2/guide...），过程比较顺利，也相对容易。
安装好vue和vue-cli之后，就可以初始化项目了，运行

vue init webpack my-project

之后，出现了一个名为my-project的项目文件夹。进去之后就会发现整个项目的结构：

当然node_modules这个文件夹是后面才出现的，也就是我们还要运行

npm install

这个命令会根据pakage.json里的依赖内容去安装相关的依赖包，但是我就是在这里遇到了一个小麻烦，就是它很久都没有反应，后来查询才知道是因为命令会去国外的网站去下载的，速度太慢了，所以我们最好用国内的镜像去下载。直接下载淘宝的cnmp命令行工具（https://npm.taobao.org/）或者借用镜像地址下载就可以解决问题。

npm install --registry=https://registry.npm.taobao.org

最后，只要输入

npm run dev

就可以运行项目了，会在git上看到如下图的提示，浏览器也会自动打开页面：

看到官网的默认页面就是运行成功了。

我们看看这个文档结构的文件，要找到入手改代码的地方，就要知道这些文件是做什么用的。

index.html：官方默认项目是存放了一个ID为app的DIV

打开src文件夹：

有一个main.js、App.vue，还有一个名为组件的文件夹，里面放了一个HelloVue.vue文件。我们都打开看看。
HelloVue.vue部分：

我们会发现这几排字就是显示在页面的几排文字~
App.vue部分：

这其中的", components: { App } })

这个文件引入了App.vue，还有上述的router.js。并在下面用到了App的组件。
所以可以得出一个简单的结论：以main.js为中心，main.js引进了App.vue，App.vue借助使用到了HelloWorld。
在main.js中这个组件对准了id是app的元素，使用APP组件去替换。
其中有一句template: ""，官方对template（https://cn.vuejs.org/v2/api/#...）的解释是：

一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
结合查询其他说法，就是说它会把id是app的元素以形式替换。

router-view替换
在App.vue中，不用写出一样的效果