vue历史
- 读作view，意思为MVC中的V
- MVC中V是vue的重点，M和C则被简化
@vue/cli
搭建vue项目
- yarn global add @vue/cli // 安装vue脚手架工具
- vue create hello-world // 通过vue脚手架搭建项目
获取vue实例
方法一
- 完整版vue
- 通过CDN引用vue.js或者vue.min.js即可
- 通过import引入vue.js或者vue.min.js
new Vue({
el: "#app"
render (h) {
return h('div', "这是挂载的内容")
}
})
方法二
- 使用vue.runtime.js版或者vue.runtime.min.js版
只能采用一下方式，不能使用template。
new Vue({
el: "#app"
render (h) {
return h('div', "这是挂载的内容")
}
})
// 或者使用template
new Vue({
el: "#app"
template: `<div>这是挂载的内容</div>`
})
- 使用不方便，但是减少体积
当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。所以在@vue/cli中使用的vue.runtime.min.js,虽然在开发中使用的是template而不是render的方式，这是因为配置了vue-loader可以将template转为render格式的代码。
使用vue-loader
- 可以把.vue文件翻译成h构建方法
- 但这样HTML就只有一个div#app,SEO不友好
编辑vue
使用本地编辑器
- s使用vscode等编辑器，可以通过cdn引用线上的js，或者通过node等下载vue，通过script的方式引入vue.js或者vue.min.js。
使用codesanbox.io
codesanbox在线编辑。
1 创建vue项目
image.png
2 通过修改代码，可以在右侧预览效果
image.png
SEO
SEO
- 搜索引擎优化
- 搜索引擎在不停的curl
- 搜索引擎根据curl结果猜测页面内容
- 如果页面都是js创建的div，curl无法解析
解决方法
- 跟curl提示内容
- 把title、description、keyword、h1、a写好
- 原理：让curl获取页面内容，SEO就能正常工作
- 搜索人多了，排名就会靠前
