Vue 2.0学习笔记:Vue的运行环境

发布于 大漠

最近开始在恶补Web前端的相关技术栈。除了React之外还有Vue。学习的过程都是痛苦的,感觉自己被掏空了。除了基础不扎实之外,很多东西都得学。为了不会那么容易忘记学习的相关知识,通过博客,把自己的学习过程记录一来。好记性不如烂笔头。

首先要说的是,Vue 2.0学习笔记是一个从零开始的一个学习过程,由于自己是这方面的菜鸟,在学习过程中很多概念有可能是一知半解,如果文章有何不对,还请各位大婶拍正。

Vue是什么

Vue的官网是这样描述的:

Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与**单文件组件**和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue运行环境

对于初学者而言,首先要考虑的是让自己的电脑具备运行Vue的环境。那么这篇文章就简单的整理了一下Vue运行环境相关的知识。

其实运行Vue的环境有很多种,有简单的,也有复杂的。有本地的,也有在线的。对于初级的学习者,当然是越简单越好。是吧。那接下来咱们从简单的开始。

创建本地服务器

如果你从事过Web的开发,那么对服务器(Server)并不会陌生。常见的有Apache和Nginx之类。除些之外还有一些界面化的Web服务器之类。不过咱们今天不聊怎么在电脑上配置这些。如果你的电脑没有相关的服务器,咱们采用一种简单的服务器。那就是**Live-server**。

通过npm可以很轻易的安装:

npm i live-server -g

执行完上面的命令之后,可以看到类似下图的结果:

安装完Live-server之后,如果要启动某个项目,可以在这个项目中执行:

live-server

那么浏览器就会启动一个本地服务器:http://127.0.0.1:8080/

当然除了Live-server之外,还有其他的类似这样启动本地服务器的东东。咱们这里就不说这个了。进入今天的主题:Vue的运行环境

直接引入Vue.js

这是最简单,也是最易的一种运行Vue项目的方法。这也是初学者最不头痛的一种方法。就是在一个.html中通过<script>标签引入Vue.js。这个Vue.js文件可以引入下载好的文件,也可以引入在线的 CDN地址。对于CDN地址,官网推荐https://unpkg.com/vue,会保持和npm发布的最新的版本一致。可以在https://unpkg.com/vue浏览npm包资源。也可以从jsDelivrcdnjs获取,不过这两个服务版本更新可能略滞后。

我采用的是:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

为了能更好的帮助我们在本地写Vue的练习例子,个人建议最好创建一个项目,比如我就创建了一个名为vueDemo的文件夹,同时还在这里创建了几个目录。最后的目录结构如下:

为了后续可以和npm一些功能相结合,可以在项目的根目录下添加一个package.json。简单的npm配置,可以直接执行:

npm init -y

这些创建之后,启动live-server就可以在浏览器浏览了。环境好了之后,咱们来看一个简单的Vue示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue | Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
    <div id="app">{{ message }}</div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

那么后续的示例,都可以按类似的方案,在example下添加所需要的Vue示例文件。

命令行工具 (CLI)

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

Vue-cli这个创建Vue运行环境对于初学者而言相对难一点。个人建议初学者不需要过多的考虑其中的一些配置是什么意思?知道按步就班,能让Vue项目运行起来就OK了。如果你是这方面的高手,你还可以自己配置相关的执行环境。我是这方面的菜鸟,也就不在此误人子弟了。

在线写Vue的Demo

对于初学者,如果要练习写Vue的Demo还有一个好去处。那就是Codepen这样的在线平台。我自己常常在这个上面写Demo。其实在这个上面写Demo有点类似于第一种方案一样。引入Vue.js以及编译ES6代码的Babel。然后在上面写代码即可。不过使用Codepen这样的在线平台,建议你先注册一个账号,便于你以后能更好的维护自己的Demo。

假设你已经具备了Codepen的账号,打开Codepen,点击页面右上角的“Create”,选择“New Pen”可以创建单个Vue的Demo,选择“New Project”可以创建一个Vue项目。

咱们选择在这里创建一个Vue的Demo。创建好新的Demo之后,选择Vue.js,并且设置JavaScript的编译工具为Babel:

这样就可以在平台上写Vue的Demo了:

今后的相关Demo一般都会在这里写。当然除了Codepen这样的在线平台之外,还有类似的相关平台,比如JSBin。使用方法类似,自己感兴趣的话,不仿体验一下。

总结

这篇文章简单的介绍了Vue的执行环境的几种方法。每一种方法面对的开发群体也略有不同。如果你和我一样都是Vue的初学者的话,个人建议先不要太纠结Vue的执行环境,选择最简单的,最易的。比如这篇文章中说的第一种和最后一种。当你具备一定的知识之后,你可以考虑官方的Vue-cli或者自己配置的环境。

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.fedev.cn/vue/running-environment.htmlTravis Scott x Jordan 1 Backwards Swoosh Mocha