起手式

2020-10-16
2 min read

Vue中文文档工具@vue/cli文档

Vue的历史

vue、Angular.js、React.js前端三大主流框架。
MVC中的V是Vue的重点,M和V则被简化。
Vue和vue.js没有区别,vue就是vue.js的简称。
Vue你可以认为是框架也可以说是库,Vue中文英文文档都是尤雨溪写的。

15年的1.0版本Vue自称是MVVM框架,不是MVC是MVVM,不过这已经成历史了。现在Vue是MV * 框架,意思就是你说MVC、MVVM都行。但是Vue升级到2.0后,它虽然看起来是MVVM框架,但实际不是MVVM框架了。Vue3直接抄袭React。

Vue作者尤雨溪,主要作品: Vue、Vue Router、Vuex、@vue/cli(主要维护者是蒋豪群) Vue2版本vue.runtime.min.js Vue3版本vue.runtime.global.prod.js

目标一: 项目搭建

方法一:使用@Vue/cli
使用@vue/cli搭建Vue项目
@Vue/cli 是Vue的创建初始化工具,webpack的升级版,帮你把所有的webpack loader、webpack plugin配好了。利用@Vue/cli,不用学webpack也能用Vue。

步骤 🔍@vue/cli文档

1.打开终端

cd ~/Desktop/
yarn global add @vue/cli@4.1.0-beta.0
vue --version
vue create vue-demo //创建目录vue-demo

2.设置配置(该配置只适合学习,如果是真实项目请自行斟酌选项)

选错用control+c中断重来

没有截图的使用默认选项。

多选:用空格键选中或取消 注意: 不要勾选Choose Vue version!

在这里插入图片描述

3.运行

cd vue-demo
yarn serve
中断control+c,然后把生成的目录vue-demo拖进来
open .
yarn serve //打开本地预览服务器

在这里插入图片描述

现在就可以使用Vue了,还可以用codesandbox.io。

第1种方式:用命令行创建目录,它会自动帮你安装依赖。

第2种方式:用codesandbox.io

不要登录,点击“create sandbox”,选择创建vue沙盒。

下载至本地:点击File-> Export to ZIP 并解压缩

方法二:自己从零搭建Vue项目

目标二.vue.js和vue.runtime.js的使用

做一个简单的"+1"项目

如何使用Vue实例?

App.vue
<template>
  <div id="app">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){ //data是函数
    return {
      n:0
    }
  },
  methods:{//methods是对象
    add(){
      this.n +=1
    }
  }
}
</script>

<style lang="scss">
</style>

分析

index.html<div id="app"> {{n}} </div>不支持{{n}}

main.js new Vue封装了对实例的所有操作

new Vue({//初始化#app
  el : '#app' //我要对这个div进行MVC的封装
})

Vue不支持{{n}},接下来介绍Vue的2个版本,就知道为什么Vue有的支持有的不支持了。 在这里插入图片描述

方法一:从html得到视图「完整版Vue」

1.文档: 使用BootCDN安装

对不同构建版本的解释 在这里插入图片描述

CDN后缀为vue.min.js是vue.js的简洁版,推荐用vue.min.js

⚠️注意CDN引入的Vue版本要与本地Vue版本一致,都是2。

查看版本号:打开package.json:"vue": "^2.6.11";

CDN引入的版本:vue/2.6.14

CDN选择后缀为vue.min.js,选择复制<script>标签,插到index.html。

index.html
<div id="app"> {{n}}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

引入版本后就会得到一个全局变量

main.js
console.log(window.Vue)

终端:yarn serve //打开本地预览服务器

在这里插入图片描述

2.使用

main.js
new Vue({
  el: '#app',
  data: {
    n: 0
  }
})

html中的{{n}}加载出来了,页面显示0

关注点: MVC视图没有写在js里,直接写在页面index.html里。

这就是完整版的功能,可以直接在页面里把n变成0

方法二:用JS构建试图「非完整版vue」

CDN选择后缀为vue.runtime.min.js,选择复制<script>标签,插到index.html

页面并未显示0

原因:非完整版vue不支持从html里面获取视图。 只要是从html里产生视图就都不支持,所以在js里用template也没用。

解决方法:修改render

文档

index.html
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.runtime.min.js">
</script>

main.js
console.log(window.Vue)
new Vue({
  el: '#app',
  render(createElement) {
    const h = createElement
    return h('div', [this.n, h('button', { on: { click: this.add } }, '+1')])
  },
  data: {
    n: 0
  },
  methods: {
    add() {
      this.n += 1
    }
  }
})

在这里插入图片描述

不完整版vue必须要用createElement方式把所有元素构造出来。

完整版vue VS 不完整版vue

完整版vue思路:

Vue要把’html{{n}}‘变成’html 0’。

直接替换不太好,因为如果有v-if、v-for这些复杂语句你直接用正则替换是做不到的。于是Vue需要写一个compiler(编译器),这个compiler可以把含有占位符或条件循环语句的东西变成真实的DOM节点。这样下次你在写this.n +=1时那么它就知道你要改的是n,于是它就直接改DOM节点,而不是再去编译遍。它根据分析出DOM节点得到了’html 1’。像复杂的语法@click='add'不能直接替换。

compiler(编译器)特点复杂,占用一定代码体积,比「不完整版Vue」大30%的体积,所以需要不完整版Vue。

不完整版vue思路:

不完整版Vue没有compiler,所以没办法把html变成节点,没有这个功能,是利用webpack在写的时候就进行转换。webpack通过vue-loader<div id="app"> {{n}}... </div>转化为h('div',this.n)。我们写还是写html,但是用户下载的是"只支持h函数的「不完整版Vue」",中间通过webpack loader翻译。用户对Vue的依赖可以使用体积少30%的「不完整版vue」,vue为了减少30%体积把核心功能删掉了,在打包的时候自己翻译,翻译完后就不需要html版本了。

我们写代码<div id="app"> {{n}}... </div>,然后通过yarn build得到用户可以用的h('div',this.n),用户可以用的h('div',this.n)+不完整版vue。这里没有html,html早就编译好了,就是把编译器放到build里面,vue-loader会调用compiler,这就是vue作者的逻辑。不完整版意义在于更加的独立,这种方法很不方便,但实际上是对的。

总结:「完整版vue」体积大30%,「不完整版vue」体积小30%但需要用webpack配合。

方法三:使用vue-loader

Vue单文件组件:「不完整版vue」如何用vue-loader翻译?

可以把.vue文件翻译成h构建方法

但这样做html就只有一个div#app,SEO不友好

步骤

1.使用它提供的方法,src目录下新建文件Demo.vue

代码

Demo.vue
//语法
<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>

<style scoped> //CSS
.red{ color: red; }
</style>

vue-loader就可以把这些东西变成一个对象

2.使用

main.js
import Demo from './Demo.vue' //先导入
console.log(Demo)
new Vue({
  el: '#app',
  render(h) {
    return h(Demo)
  },
})

终端:yarn serve //打开本地预览服务器

在这里插入图片描述

render里面就是把html <div class="red"> {{n}}... </div>翻译成render(h) { return h(Demo) },所以Demo.vue不需要自己写render。

总结: 这就是webpack给前端带来的无限可能,你可以任意的方式组织一个对象,只要你最后能够写一个loader把它还原成这个对象就可以了,这就叫做Vue单文件组件

SEO(搜索引擎优化)友好

百度如何知道某个的相关内容呢?

curl https://www.taobao.com/

curl命令(或者右键显示网页源代码)可以得到淘宝输出给百度的curl结果,相关内容比如 标题<title>淘宝网 - 淘!我喜欢</title> 文章<h1>淘宝网</h1>。这时去百度搜索淘宝网就有可能搜到该网站,因为curl后它得到的就是这些关键信息。

反关我们的index.html curl后除了个title外一无所知,因为内容<div id="app"></div>是后来的js渲染进去的,这就叫做SEO不友好或者说用curl命令无法得到相关内容。

SEO友好处理: 补充内容,把主要内容写到页面里。就是把title、description、keyword、h1、a写好即可。

//打开淘宝查看源代码,有例子
<meta name="description" content="淘宝网-亚洲较大的网上交易平台,提供各类服饰..." />
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易..." />

虽然最后会不见,但是curl命令会看见它。

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

思路:

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

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

3.脏活让loader做,vue-loader把vue文件里的HTML转为h函数。 这样你就可以不写h函数也能得到h函数。

深入理解完整版与运行版的区别

在这里插入图片描述

1.非完整版视图: 写在render函数里,用h来创建标签。h可重命名但最好别改。

Demo.vue 代码略...
main.js
import Demo from './Demo.vue'

new Vue({
  el: '#app',
  render(h) {
    return h(Demo)//用h创建标签
  }
})

2.可以用CDN引入这两个版本:vue.js是Vue完整版,vue.runtime.js是Vue非完整版。生产环境(如果要部署给用户)要都改成.min.js,比如vue.runtime.min.js,.min.js是去掉注释压缩后的版本。

3.引用错了会怎样?

非完整版支持render但不支持template,强行用template就会报错警告。

完整版vue.runtime.js错用成vue.js体积会变大,因为vue.js有编译HTML的功能。