Vue.js从零开始——入门（1）
前面已经把基础的前端开发三件套（
HTML，
CSS，
JavaScript）都看过了，不过在实际开发的过程当中，完全原生的语言会产生很多开发上的不便，譬如是一个很常用的功能，在多个项目中都需要实现， 每做一个项目就从头写一次代码，对于开发人员是个很大的重复劳动的工作量，所以经常实现的功能我们就会打包做成模块方便经常调用，而这个打包的模块随着功能不断的通用化，解决了很多人的痛点之后，就逐渐流行起来，慢慢的成为了开发库，再加上不断地整合，就渐渐的形成了可以同时处理三件套的框架。
这样的话，对于后来进入行业的开发人员来说，就可以非常方便的直接使用别人已经构建好的框架（我们很喜欢叫这个东西——轮子，哈哈），从而更快捷的进行开发，大幅度的提高工作效率。同时优秀的框架，也是我们在开发过程当中的非常好的参考榜样。
目前最流行的前端框架，主力是
jQuery（或许有人要反驳说它不是框架而是代码库了，我只能说个人理解，如果没有
jQuery UI 以及各种各样基于
jQuery 的插件，那它的确仅仅是
JavaScript 的代码库，但是有了这些形形X的插件，它就是个完整的框架X，而且它的使用规模非常大，太多应用在使用它了，所以不举例了）、
Backbone.js（并不是特别流行，但是依旧有很多著名的互联网应用，譬如
Groupon,
Airbnb,
Digg,
Foursquare,
Hulu,
Soundcloud,
Trello等）、
Angular.js（业界最负盛名的三大框架之一，
Gооgle 负责维护的著名框架，目前主要内容都是由
TypeScript 编写的）、
React.js（三大框架之一，由
Facebооk 负责维护）、
Vue.js（三大框架中最年轻的，但因为简单易上手且效果不错，时下非常的流行）。
因为
Vue.js 非常流行而且容易上手，所以从今天开始我们一起看看它，正好我也在重新学习，就把自己学习的路径分享出来——因为
Vue 3 还没有正式发布，所以这里看的是
2.x。
<hr/>
1 简介
引用一段官方的介绍：
Vue (读音 /vjuː/，类似于
view) 是一套用于构建用户界面的
渐进式框架。与其它大型框架不同的是，
Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，
Vue 也完全能够为复杂的单页应用提供驱动。
简单来说，其实
Vue 就是用尽量简单的
API 来实现响应的数据绑定和组合的视图组件，所以我们在实际看
Vue 的实例，就会发现它的逻辑实现方法不是传统的先有
HTML 元素，再通过
JavaScript 来操作
DOM；它恰好是反过来的，是先有
Vue 的逻辑，然后通过关键字绑定对应的
HTML 元素，并不操作实际的
DOM，而是虚拟
DOM。
多说无益，先来看个最基础的演示：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=&#34;utf-8&#34;>
- <title>hello</title>
- <script src=&#34;https://unpkg.com/vue/dist/vue.js&#34;></script>
- </head>
- <body>
- <div id=&#34;APP&#34;>
- <p>{{ message }}</p>
- </div>
- <script>
- let app = new Vue({
- el: &#39;#app&#39;,
- data: {
- message: &#39;Hello Vue.js!&#39;
- }
- });
- </script>
- </body>
- </html>
复制代码
首先看看上面的代码，重点看和
JavaScript 相关的部分，我们比较熟悉的是：
- 通过第一个 <script> 引用 Vue
- 通过第二个 <script> 调用 Vue 新建了一个 app 变量，绑定了 #app 元素，并声明了其数据是 message: &#39;Hello Vue.js!&#39;
不太熟悉的部分是
HTML 当中
{{ message }} 这个写法，而通过这个方式，我们可以看得出来和
Vue 的关系，就是
message 这个关键字。
也就是说，只要我们修改
app 这个变量当中
message 的值，就可以改变
<p> 当中的信息，可以看看下面的例子：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=&#34;utf-8&#34;>
- <title>hello</title>
- <script src=&#34;https://unpkg.com/vue/dist/vue.js&#34;></script>
- </head>
- <body>
- <div id=&#34;app&#34;>
- <p>{{ message }}</p>
- <button v-on:click=&#34;modifyMessage&#34;>修改信息</button>
- </div>
- <script>
- let app = new Vue({
- el: &#39;#app&#39;,
- data: {
- message: &#39;Hello Vue.js!&#39;
- },
- methods: {
- modifyMessage: functiоn () {
- this.message = &#39;Hello JavaScript & World!&#39;;
- }
- }
- });
- </script>
- </body>
- </html>
复制代码
原始页面
点击按钮后
上面的代码里面增加了一个按钮，绑定了一个点击事件
modifyMessage，而在下面的
app 变量当中，声明了一个方法（
methods），包括一个函数就叫做
modifyMessage，在里面把
message 这个数据修改为
Hello JavaScript & World!。
通过这样的操作，页面加载后只要点击按钮，信息就修改好了。
所以通过上面的两个简单例子，我们可以看得出来，
Vue 就是通过将
HTML 属性和
JavaScript 代码结合起来，从而产生效果的，并且不需要直接操作真实的
DOM。
看起来很容易的样子，那么在自己的项目当中，我们应该怎么安装
Vue 呢？
2 安装
在自己的项目里安装
Vue 其实有很多方式，最常用的就是：
2.1 下载独立版本并引入
生产环境下，可以直接从
Vue.js 官网下载
vue.min.js 到本地，并通过
<script> 引入：
开发环境下，则可以下载带有错误警告和提示的版本
vue.js 到本地，并通过
<script> 引入：
2.2 CDN直接引用
用于原型开发或者学习，建议用最新版本，可以直接在
HTML 使用如下代码：
- <script src=&#34;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&#34;></script>
复制代码 如果是生产环境，或者确定版本的开发环境，就可以带上版本号，比如：
- <script src=&#34;https://cdn.jsdelivr.net/npm/vue@2.6.11&#34;></script>
复制代码 如果喜欢使用
ES 6 模块，则可以使用如下代码：
- <script type=&#34;module&#34;>
- import Vue from &#39;https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js&#39;
- </script>
复制代码 同样还有很多别的
CDN 提供
Vue，譬如：
- unpkg：https://unpkg.com/vue/dist/vue.js（可以和官方版本保持一致）
- cdnjs：https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js（版本会略微滞后）
2.3 NPM安装
NPM 是
Node.js 提供的一个包管理工具，很流行也很常用，如果需要构建大型应用的时候，使用
NPM 把对应的代码库、包安装到本地，再进行开发是个非常好的方式。
而且按照官方的说法，它可以和诸如
webpack 或
Browserify 模块打包器配合使用。同时
Vue 也提供配套工具来开发单文件组件。
安装方式很简单，在确保本地有安装
NPM 且版本大于3.0的情况下，运行如下命令：
- # 全局安装
- npm install vue -g
复制代码
当然我这里用了简写的方法
npm i vue，并且更换了参数的顺序，不过不影响实际执行的效果，通过上述代码可以得到最新版本的
Vue 安装。
另外，如果通过
NPM 直接安装速度太慢的话，也可以考虑安装
cnpm 这个中国内地的替代管理工具，然后使用
cnpm 来进行安装，命令如下：
- # 安装 cnpm
- npm install cnpm -g
- # 通过 cnpm 来安装 Vue
- cnpm install vue -g
复制代码
2.4 Vue Cli
Vue 提供了一个官方的命令行工具，为单页面应用（
SPA）快速搭建繁杂的脚手架。它为现代前端工作流提供了
batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时
lint 校验，以及生产环境可用的构建版本。
需要留意的是，该工具其实是假定用户对
Node.js 以及相关的构建工具已经有了一些了解，如果这方面还没有任何经验，就不建议继续看下去了，先用上面已经提及的方式，尤其是下载引用或者
CDN 这两种直接的方法进行学习就足够了。
这里稍稍写一点如何进行基本应用的内容，不过更多详情可查阅
&#34;https://cli.vuejs.org/&#34;>Vue CLI 的文档。
（1）前提要求
Vue CLI 需要
Node.js 8.9 或更高版本，官方推荐 8.11.0+。
（2）通过包管理工具安装
可以使用 NPM 或者 Yarn 进行安装，命令如下：
- # npm
- npm install @vue/cli -g
- # yarn
- yarn global add @vue/cli
复制代码
（3）验证 Vue Cli 安装
安装之后，就可以在命令行中访问
vue 命令。我们可以通过简单运行
vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功：
还可以运行如下命令确认当前
Vue Cli 的版本：
- vue –version
复制代码
我是今天刚刚又重新安装的新版本
（4）创建项目
通过命令
vue create 来创建一个项目，命令行工具就会按照我们给出的配置，生成一个新的项目：
- # 创建项目，留意项目名不支持大写字母
- vue create mytest
复制代码 这里要留意，项目名不支持大写字母，所以传统的驼峰式命名不能使用：
运行了命令后就会进入配置步骤，首先会判断当前网络环境，并询问你是否需要更换 NPM 的源：
这里因为我不习惯使用淘宝的源，所以选择了
N（
No），接下来就是选择预设值：
因为是入门，而且我们主要是在看
Vue 2.x 的特性，所以这里选择第一项，直接使用
Vue 2 的默认配置；之后就进入项目创建的过程了：
当创建过程完毕后，将会出现类似提示：
此时我们来看看已经创建好的项目目录：
通过命令行工具，已经帮我们按照开发规范创建了对应的关键文件以及目录，此时我们可以看到几个初始开发文件已经生成在
src 目录下，包括主文件
main.js 和
app.vue，以及
Vue 示范组件
HelloWorld.vue，这些都将是我们未来开发的基础。
（5）图形界面
肯定有人会觉得用纯命令行不方便，所以
Vue Cli 其实还提供了图形界面，只要运行以下命令，就会打开浏览器页面进行配置和项目生成：
- vue ui
复制代码
图形界面对于初学者来说还是很友好的，毕竟方便又直观，咱也不摆什么资深开发人员的谱，用就是了，哈哈。
再次强调，初学者先不要用这个方式来构建项目，因为相对还是不够直观，而且我们接下来的章节，都主要是基于应用，所以下载一份或者直接使用
CDN 还是学习阶段的首选。
（6）试运行
因为通过
Vue Cli 创建的项目已经是一个可以运行的应用版本（虽然还没有什么功能），所以可以通过
npm run serve 命令直接运行一个测试服务器，并查看应用页面：
- npm run serve
复制代码 运行命令后，看到如下信息就可以确定测试服务器已经启动了：
确定测试服务器启动后，可以直接访问 https://localhost:8080 来查看应用页面：
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126944.html
starterknow