Vue浅析

Rinsann 2021年09月08日 561次浏览

VUE有两个版本

分别是完整版vue.js和运行时版vue.runtime.js,生产环境使用带min的版本。

template 和 render 怎么用

template的用法

如果需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

render 的用法

当使用 vue-loadervueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

codesandbo.io

CodeSandbox是一个在线代码编辑器和原型设计工具,可以更快地创建和共享 Web 应用程序。

首先进入codesandbo.io点击Create Sandbox创建一个沙箱环境

image20210925001306385.png

可以选择项目类型

image20210925001417552.png

创建成功后进入编辑器界面:

image20210925001557214.png

可通过左上角的菜单将项目导出到本地或分享
image20210925001652300.png

@vue/cli用法

  1. 全局安装:yarn global add @vue/cli
  2. 创建目录:vue create 路径(路径可以用 . ,. 就是当前目录变成vue目录)
  3. 选择使用那些配置
  4. 进入目录,运行yarn serve 开启 webpack-dev-server
  5. 用WebStorm 或 VSCode打开项目开始CRM(复制,运行,修改)
  6. 进入@vue/cli 官网看看目录,后面用到可以查
  7. 选错了Ctrl+C中断然后重来(配置根据实际情况选择)
    image20210924224013630.png
    image20210924224031547.png
    image20210924224046028.png
    image20210924224053351.png
    image20210924224102645.png
    image20210924224113790.png

SEO友好

SEO

  • 搜索引擎优化,可以认为搜索引擎就是不停的curl
  • 搜索引擎根据curl结果猜测页面内容,如果你的页面都是用JS创建div的,那么curl就很瞎

怎么做到SEO友好

  • 很简单,给curl一点内容
  • 把title、description、keyword、h1、a写好即可
  • 原则:让curl能得到页面的信息,SEO就能正常工作

深入理解两种区别

image20210924235512891.png

最佳实践:总是使用费完整版,然后配合vue-loader和vue文件

思路:

  1. 保证用户体验,用户下载的JS文件体积最小,但只支持h函数
  2. 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
  3. 其他的交给loader做,vue-loader把vue文件里的HTML转为h函数