vue cli 安装链接

安装简单 直接看上面官网链接

这里记录一下在安装vue时遇到的问题（纠结了一个小时）

①运行yarn global add @vue/cli  成功  

②查看版本号 vue --version   显示2.9.6 版本  （可能是以前看别的学习资料时装的低版本）

    遇到这个问题查资料，后面发现官网有讲解（反省自己 以后找资料一定优先在官方文档查看）

    最后以及升级   

            01————yarn global upgrade --latest @vue/cli   命令运行  

             02———— yarn global add @vue/cli  

             03———— vue --version（还是报错 说不存在）最后解决办法重启vscode        

使用 @vue/cli搭建项目

① 根据vue-cli官方文档快速创建——点击链接

② 线上创建修改 下载  链接地址https://codesandbox.io/s/vue

简单搭建一个项目示例

附下面两个图 图一为代码示例 图二为浏览器效果示例

以上代码用到的知识下面详解

---

①vue实例

方法1：从html得到视图 （体积大 功能强）

    也就是从文档里说的 `完整版Vue`[引入时后缀为vue.js]  === 它的优点是可以在html中得到视图

    从CND引用vue.js或vue.min.js即可做到

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

    详情看官方文档这一节，把alias去掉即可

方法2：用JS构建视图 （体积小 功能弱）==>>但是高级方法用 

    还是看上面的文档链接，使用vue.runtime.js【引入时后缀为vue.runtime.js】===它不能在html中得到视图，但是它更加独立

    这种方法很不方便，但实际上是对的

方法3：使用vue-loader （） ==>>为上面方法的升级 安装vue-loader 程序员时候用方法1 给用户看的时候用方法二 实现了体积小 功能强

    可以把.vue营业日翻译成h构建方法

    但这样做HTML就只有一个div#app,SEO不友好

方法1图解

方法1 方法1

方法2图解

方法二图1 方法2 图二

方法3图解

也叫vue 单文件组件

什么是SEO

搜索引擎优化

你可以认为搜索引擎就是不停地curl

搜索引擎根据curl结果猜测页面内容，

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

解决方法

给curl一点内容

把title、description、keyword、h1、a写好即可

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

图解：

内容根据需要定

以上内容总结图展示