Vue起手笔记

一言沙雕
461 阅读6分钟

Vue

  • 读作view(/vjuː/)，意为MVC中的V

MVC中的V是Vue的重点，M和C则被简化

--资料来源于饥人谷

  • 作者

尤雨溪尤大，英文名 Evan You。

本科就读于美国科尔盖特大学，艺术与艺术史专业，帕森设计学院艺术硕士，毕业后在Google Creative Lab担任UI相关工作后，后来转为全职JavaScript开发工程师。现为独立开发者，靠每个月十几万以上的捐款生活还有其他赞助。--非科班学前端也能很厉害。

Github主页,个人域名

  • 主要作品

Vue、Vue Router、Vuex、@vue/cli

  • Vue热度比较

全球范围来看，Vue用户量是React用户量的一半。

  • 问题

用Vue的大部分是中国人?

个人认为:是的。感觉中国人的比例可能超过80%

原因:Vue的中文文档写得真是好

Vue和React学哪个好?

结果:都要学，小孩子才做选择

知识:Vue和 React越来越相似了，尤其是Vue 3

能力:如果你学会了其中一个，不可能不会另一个

顺序:先Vue再React或者先 React再Vue都行

  • 学习途径

Vue：英文文档，中文文档

以后想要更厉害，英语要好。

  • Vue自学路线图

项目搭建

响应式

目标一:搞出一个使用Vue的项目

安装vue-cli先：

我喜欢命令到达要特定目录下再全局安装

yarn global add @vue/cli
或者
npm install -g @vue/cli

安装完后可以用 vue --version看版本号看安装是否成功

然后就可以使用vue create 目录名创建

具体步骤

一些废话：

  • 方法一:使用@vue/cli

搜索@vue/cli，进入官网

打开文档，打开「创建一个项目」章节，然后 CRM !按着文档走

    • 如何系统学习Vue

用CRM把所有文档都过一遍!

使用vue-cli

    • 本次vue学习选项

注意：

  1. 选错了请Ctrl+C中断然后重来

  2. 没有截图的都使用默认选项

  3. 这次的选项只适合本次学习，如果是真实项目，请自行斟酌选项

--运行vue create 目录名步骤开始

请选择一个配置，自学的话推荐选默认的，我这里选择手动选择特性。

上下键移动，空格选中CSS预处理，单元测试。完成回车

其他没截图的选择默认。dart-sass，eslint

提交的时候再运行lint，告诉代码错哪了

使用单元测试方案

其他没截图的选择默认。默认文件分开放还是放在package.json。

Save this as a preset for future projects? (y/N)是否把刚才的选项作为未来项目的默认值，选择y意味着不用再改了，但是以后有改的可能不知道在哪改，建议n

这就成功了

命令行start .(mac:open .)打开当前目录，把项目拖进VS

打开终端运行yarn start打开链接运行成功。

  • 方法二：还可以使用codesandbox.io直接在线创建一个vue的项目。

如何使用Vue 实例

vue.js和vue.runtime.js的使用

方法一:从 HTML得到视图

可以从bootCDN通过script引用vue.js或 vue.min.js即可做到

也就是文档里说的完整版Vue。mvc视图没有写在js里面，直接写在了页面里面，引入后会得到一个全局变量。

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

不同版本解释详情看文档这一节

方法二:用JS构建视图

还是看文档链接，使用vue.runtime.js(运行时版)

只要从html变成页面中的东西，完整版就支持，运行时版就不支持

以我这种小白来说肯定是完整版好用，但实际上是运行时版好，更独立

（画图说明)

完整版会占用更多的代码体积，文档上也说了因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。

运行时版没有compiler，所以没有办法把html变成节点，但是可以用webpack进行翻译，使用vue-loader

方法三:使用vue-loader

可以把.vue文件翻译成h(createElement)构建方法，单文件组件

一个单文件组件示例：

  1. src目录下新建一个Demo.vue文件

写入html，script，css

<template>
  <div class="red">
    {{ n }}
    <button @click="add">+1</button>
  </div>
</template>


<script>
export default {
  //除了视图外其他的选项
  data() {
    //注意：如果用vue-loader写的，data必须是一个函数
    return {
      n: 0,
    };
  },
  methods:{
      add(){
          this.n +=1
      }
  }
};
</script>

//写css
<style scoped>
.red{
    color: red;
}
</style>
  1. 再在main.js里引入
import Demo from './Demo.vue'
new Vue({
  el: '#app',
  render(h){
    return h(Demo)
  }
});

但这样做HTML就只有一个div#app，内容空的，最后会被替换成.vue里的内容。SEO 不友好，curl之后是一堆js渲染进去的代码。无法得到主要内容和相关内容，怎么办呢？

  • SEO友好

SEO，搜索引擎优化

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

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

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

  • 那怎么办？

很简单，给curl 一点内容

把title、description、keyword、h1、a 写好即可，可以看淘宝网页源代码怎么做的。

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

怎么让网页到第一名?浏览的人足够多即可，或者花钱

Google其实能获取JS创建的内容，但不要依赖它。

深入理解两种区别

完整版功能强，体积大。

运行时版功能弱，体积小，但是通过webpack可以让写的时候像是用完整版，但用户下载只下载运行时版。

用一个表再来看看两个版本的具体区别吧

Vue完整版Vue运行时版评价
特点有compiler没有compilercompiler占30%体积
视图写在HTML里
或者写在template选项		写在render函数里,用h来创建标签h是尤大写好传给render的
cdn引入vue.jsvue.runtime.js文件名不同，生成环境后缀都为.min.js
webpack引入需要配置alias默认使用此版尤大配置的
@vue/cli引入需要额外配置默认使用此版尤大和蒋豪群配置的
  • 表解

完整版

对应文件名：从CDN引入vue.js ; vue.min.js 。可以从HTML或template直接得到视图,有compiler编译器可以将含有占位符{{}}或者条件语句变成真实的DOM节点，后面再修改会直接修改DOM节点无需再编译一遍，但compiler比较复杂会占用一定体积

runtime运行时版

对应文件名：vue.runtime.js ； vue.runtime.min.js。没有compiler,不能将HTML变成节点。webpack通过vue-loader(在yarn build里已设置)会调用compiler将html变成h('div',this.n)

最佳实践

总是使用运行时版，然后配合vue-loader和vue文件

  • 思路:

  1. 保证用户体验，用户下载的JS文件体积更小，但只支持h函数

  2. 保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数

  3. 脏活让loader做，vue-loader把 vue文件里的HTML转为h函数

  • 引用错了会怎样，可以自己尝试看看

-vue.js 错用成了vue.runtime.js

无法将HTML编译成视图

-vue.runtime.js 错用成vue.js

代码体积变大，因为vue.js有编译HTML的功能

avatar
文章
阅读
粉丝