安装简单 直接看上面官网链接
这里记录一下在安装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搭建项目
② 线上创建修改 下载 链接地址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图解
方法2图解
方法3图解
也叫vue 单文件组件
什么是SEO
搜索引擎优化
你可以认为搜索引擎就是不停地curl
搜索引擎根据curl结果猜测页面内容,
如果你的页面都是用JS创建div的,那么curl就很瞎
解决方法
给curl一点内容
把title、description、keyword、h1、a写好即可
原则:让curl能得到页面的信息,SEO就能正常工作
图解:
以上内容总结图展示