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

前言

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

Vue.jsの安装

Vue.js官网：https://cn.vuejs.org/v2/guide&＃8230;
固然最好的资料就是官网了，所以一开始我在官网上看了一些基本的用法，然后就跟着官方的安装教程安装（https://cn.vuejs.org/v2/guide&＃8230;），过程比较顺利，也相对容易。
安装好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上看到如下图的提示，浏览器也会自动打开页面：

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

demo页面是怎么组成的？

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

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

打开src文件夹：

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

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

这其中的是显示在主页上面的图片，所以它也与主页的输出有关系。
我们还可以猜想，下面的router-view就输出了HelloWorld里面写的内容。但是我们没有看到直接的引用。我们就去查询一下这个router-view（https://router.vuejs.org/zh-c&＃8230;），还可以想到下面main.js中引用的router，所以我们看看router下的router.js：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: HelloWorld
}
]
})

作为小白还不是很清楚其中的原理，但是我们可以肯定，就是在这里引用了HelloWorld这个组件。
main.js：

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productiOnTip= false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '',
components: { App }
})

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

一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

结合查询其他说法，就是说它会把id是app的元素以形式替换。

修改和比较

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

直接在这里引入HelloWorld也可以显示文字内容。
相应在main.js可以把router相关的内容删除，不过router肯定有更加多的功能0-0。

关于templateの简单测试
我们在index.html文档里添加一个div

在App.vue中修改一下模板的内容：

然后在main.js再加一个渲染

new Vue({
el: '#app',
template: '',
components: { App }
})
new Vue({
el: '#app1',
template: '',
components: { App }
})

渲染出来的结果就是：

两个class是app的div。也就很好说明了它的替换~
还可以思考，我们在其他的.vue文件中，直接在template标签中写组件的名字作为标签就可以引用到组件，但是在main.js中，我们要用template:'&＃8217;去替换，缺少这句就会失败，也可以猜想因为我们也不能在js里面直接写上结构代码。

Vueの初体验细节

关于ESLint
刚开始随便修改了几个代码，结果git上频繁的报错，一看错误内容竟然是说空格多了，没有空行之类的格式问题，后来才发现，原来是开启了一个格式检测的依赖。

就是在初始化项目的时候，问你

Use ESLint to lint your code?(Y/n)


因为我是初学怕出错，所以当然都默认写了yesQAQ，度娘一下就知道：

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格

所以不需要的话，要记得输入n。