VUE有两个版本
分别是完整版vue.js和运行时版vue.runtime.js,生产环境使用带min的版本。
template 和 render 怎么用
template的用法
如果需要在客户端编译模板 (比如传入一个字符串给 template
选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
render 的用法
当使用 vue-loader
或 vueify
的时候,*.vue
文件内部的模板会在构建时预编译成 JavaScript。在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
codesandbo.io
CodeSandbox是一个在线代码编辑器和原型设计工具,可以更快地创建和共享 Web 应用程序。
首先进入codesandbo.io点击Create Sandbox创建一个沙箱环境
可以选择项目类型
创建成功后进入编辑器界面:
可通过左上角的菜单将项目导出到本地或分享
@vue/cli用法
- 全局安装:yarn global add @vue/cli
- 创建目录:vue create 路径(路径可以用 . ,. 就是当前目录变成vue目录)
- 选择使用那些配置
- 进入目录,运行yarn serve 开启 webpack-dev-server
- 用WebStorm 或 VSCode打开项目开始CRM(复制,运行,修改)
- 进入@vue/cli 官网看看目录,后面用到可以查
- 选错了Ctrl+C中断然后重来(配置根据实际情况选择)
SEO友好
SEO
- 搜索引擎优化,可以认为搜索引擎就是不停的curl
- 搜索引擎根据curl结果猜测页面内容,如果你的页面都是用JS创建div的,那么curl就很瞎
怎么做到SEO友好
- 很简单,给curl一点内容
- 把title、description、keyword、h1、a写好即可
- 原则:让curl能得到页面的信息,SEO就能正常工作
深入理解两种区别
最佳实践:总是使用费完整版,然后配合vue-loader和vue文件
思路:
- 保证用户体验,用户下载的JS文件体积最小,但只支持h函数
- 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
- 其他的交给loader做,vue-loader把vue文件里的HTML转为h函数