Vue: 起手式

Tech
Vue全解

Vue目前不是一个MVVM框架(Vue 1是MVVM框架)，Vue现在是MV* 框架

中文文档 — Vue.js

Vue自学线路图

项目搭建

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

方法一: 使用@vue/cli

安装 | Vue CLI

创建一个项目 | Vue CLI

  • 安装**@vue/cli**
yarn global add @vue/cli

可以通过vue --version查看是否安装成功

  • 创建一个项目
vue create vue-demo

路径可以使用.，在当前目录下创建一个项目

  • 本文中的Vue选项

这次的选项只适合本篇文章，如果是真实项目，请自行斟酌选项

使用空格选中或取消

  • 开启webpack-dev-server
cd vue-demo
yarn serve

扩展阅读: Vue CLI

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

  • 使用webpack或者rollup从零开始

不适合新手，适合用Vue半年以上的老手

方法三: 使用codesandbox.io

CodeSandbox: Online IDE for Rapid Web Development

登录后只能创建50个项目，不登录可以无限创建，真香。

如何使用Vue实例

方法一: 从HTML得到的视图

也就是文档里说的完整版Vue

  • 从CDN引用vue.js或vue.min.js即可做到
  • 也可以通过import引用vue.js或者vue.min.js

详情看文档这一节，把alias去掉即可

方法二: 用JS构建视图

这种方法很不方便，但实际上是对的

方法三: 使用vue-loader

  • 可以把.vue文件翻译成h构建方法
  • 但这样做HTML就只有一个div#app，SEO不友好

Vue单文件组件

Demo.vue

<!—视图-->
<template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>

<!—视图之外的其他选项—>
<script>
    export default {
        data() {
            return {
                n: 0
            }
        },
        methods: {
            add() {
                this.n += 1
            }
        }
    }
</script>

<!—css—>
<style scoped>
    .red {
        color: red;
    }
</style>

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

然后我们就可以使用它了:

main.js

import Demo from "./Demo"

new Vue({
    el: "#app",
    render(h) {
        return h(Demo)
    }
})

SEO基本原理

SEO

Search Engine Optimization | MDN

  • 搜索引擎优化

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

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

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

那怎么办

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

理解这两种vue的区别

完整版和运行时版到底区别在哪？

深入理解两种区别

最佳实践

  • 总是使用非完整版，然后配合vue-loader和vue文件

思路

  • 保证用户体验，用户下载的JS文件体积更小，但只支持h函数
  • 保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
  • 脏活让loader做，vue-loader把vue文件里的HTML转为h函数

引用错了会怎样

请自己尝试看看

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

无法将HTML编译成视图

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

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

comments powered by Disqus