Vue的起手式

Vue的历史

MVC中的V是Vue的重点，M和C被简化

版本

2013：0.6

2015：1.0

2016：2.0

2016：2.6

2020：3.0

Vue作者：

尤雨溪

@vue/cli

安装：可以使用npm 和yarn 我是用yarn安装的

yarn global add @vue/cli

首先创建一个Vue的实例：在命令行输入

1.vue create hello-world//创建一个Vue文件

2.安装好可选择默认也可以手动选择特性

3.等待初始化

4.进入目录 cd hello-world

5.yarn serve 打开一个本地服务器

注意：官方文档很清楚

Vue实例

1.如何使用Vue实例

方法一：从HTML中得到视图

  也就是文档中的完整版Vue,从CDN引用vue.js或者vue.min.js即可做到

  也可以通过import 引用vue.js或者vue.min.js

 详情去看文档

2.Vue两个版本运行时和完整版

区别：完整版有一个编译器比比运行时大一些；但是运行时版可以配合webpack使用

不完整版要使用h函数rander()

最佳实践：总是使用非完整版，然后配合vue-loader和vue文件

思路：

1.保证用户体验，用户下载的JS文件体积更小，但只支持h函数

2.保证开发体验，开发者可以在vue文件里写HTML标签，而不写h函数；

3.脏活让laoder做，vue-loader把vue文件里的html转为h函数

3.seo友好

1.搜索引擎优化

2.你可以认为搜索引擎就是不断的curl

3.搜索引擎根据curl的结果猜测页面内容

4.如果你的页面使用的都是JS创建的div，那么curl就很瞎

解决办法：

1.给curl一点内容

2.把title,description,keyword，hi,写好即可

3.原则：让curl能得到页面的信息，seo就能正常工作

进入codesandbox选择Vue进去之后是这样 ，在APP.vue中可以进行修改

 <div id="app">    {{ n }}    <button @click='add'>+1</button>  </div>

<script>export default {  name: "App",    data(){    return {n:0}    },methods:{  add(){    this.n +=1;  }}};</script>