Vue入门

316 阅读2分钟

Vue入门

什么是Vue?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue的2个版本

Vue有2个版本:完整版与运行时版(非完整版)。他们的区别主要在于html页面内容的编写。

当使用完整版时,可以直接在html文件中用html标记语法以及Vue的语法进行编写,也可以在vue实例中的template属性中编写。

而使用运行时版本时,只能通过JS去构建视图,通过render (h) { return h('div', this.hi) }这样的JS语法来进行视图的渲染。

虽然使用完整版进行开发更加简单,但是由于Vue的特殊语法浏览器并不能看懂,所以完整版自带了一个compiler,这就导致了相同内容的完整版的代码体积相比起运行时版的代码体积增加约30%

那么如何即能使得代码体积更小,又能优化开发过程呢?使用vue-loader!正如其他loader能够转译一样,vue-loader能够将完整版所使用的html+vue语法的模板代码转译成运行时版的JS代码。这样我们实际上使用的是运行时版本,但开发中也能够用简单的html标记语言去写页面结构。

Vue的安装

  1. 直接通过CDN引入Vue。

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.runtime.min.js"></script>

  2. 通过Vue提供的命令行工具 @vue-cli

    1. 全局安装 @vue-cli :yarn add globle @vue/cli。 vue --version查看@vue/cli是否已经成功安装
    2. 创建项目目录:vue create [programName] 在[programName]目录下创建项目,或者vue create .即在当前目录下创建项目。
    3. 选择default(默认)或者Manually select features(手动选择)
    4. 手动完成各个选项的配置后,cd [programName]然后yarn serve开启项目预览。
  3. 使用webpack从零配置

    这个方法适合Vue的老手使用。