快速入门 - Vue2 Tutorials (一)

摘要：在这个组件里面有一些链接列表，和，这些列表直接使用编写按照传统的写法，如果我们需要往里面添加链接的时候，每次我们都得添加和标签。所以修改如下这样我们就把数据和视图分开了，模板里面的代码也简洁了很多，不再需要写很多重复的代码。

Vue 的官方文档 对 Vue 介绍非常详细，但官方文档使用在 HTML 中引入 vue 的方式进行讲解，而实际项目中一般使用脚手架如 vue-cli 初始化项目。以至于刚看完文档时，却依旧不能立即立即 vue-cli 创建的项目代码。所以本文 vue-cli 构建的项目为基础，详细解释其代码及对应的概念，并进行简单的实践。

本文的代码在 https://github.com/nodejh/vue2-tutorials/tree/master/01.QuickStart

命令行工具 安装 vue-cli 并初始化项目

首先要全局安装 vue-cl：

$ npm install --global vue-cli

然后使用 vue-cli 初始化一个基于 webpack 模板的新项目，除了 Install vue-router? 选 N (No)，其余都可以直接回车选 Y (Yes)，因为我们暂时不会讲到 vue-router：

$ vue init webpack demo
? Project name demo
? Project description A Vue.js project

? Author nodejh 
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

安装依赖

$ cd demo
$ npm install
$ npm run dev

然后打开浏览器，输入 http://localhost:8080 就能看到界面。

接下来分析一下代码。

代码分析

项目目录结构如下：

├── README.md
├── build    # 编译项目的配置文件目录
├── config    # 配置文件目录
├── src    # 项目主要代码目录
├── static    # 静态资源
├── test    # 测试文件目录

开发阶段的主要代码都在 src 目录中编写，vue-cli 默认生成了一些代码：

src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── Hello.vue
└── main.js

可以发现，代码的后缀名有两种：

.js JS 文件

.vue Vue 组件，里面定义了 Vue 实例、模板、样式等。需要由 webpack 等工具来转换为 js 代码

接下来会逐一解释这些文件及代码。

main.js

main.js 是项目的入口文件，也是 webpack 打包的入口文件。里面最代码很少，主要就是通过 new Vue() 创建 Vue 实例：

new Vue({
  el: "#app",
  template: "",
  components: { App },
});

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的。

在实例化 Vue 时，传入一个了一个对象，对象包含以下几个选项。

el

el 的值是 Vue 实例的挂载目标，这里是 #app，也就是 demo/index.html 中 id="app" 这个元素：

el 必须是一个已存在的元素。

api/#el

components

在说 template 之前，先来看看 components 属性。

components: { App } 等价于 components: { App: App }，是一个包含了对 Vue 实例可见的组件的哈希表。只有在 components 里面列出来的组件，才可以在 template 里面使用。

如果我们把 components: { App } 改为 components: { App } 改为 components: { MyApp: App }，那么在 template 里面就需要这样使用：template: ""。

由于 HTML 标签不区分大小写，所以 components 里面的驼峰命名会自动转换为短横线。详见 camelCase vs. kebab-case

template

template 就是挂载到页面的模板。

这里的值是 组件就是 components 属性中的 App，也就是通过 import 引入的 App 这个模板。

new Vue({
  el: "#app",
  // 这里的  就是 components 属性的值 App
  template: "",
  components: { App },
});

所以这段代码的含义就是，将 这个模板挂载到元素 #app 上。

src/App.vue

src/App.vue 是一个典型的单文件组件。实际在项目中，我们写的基本都是组件，再根据需要用组件组成页面，这其实就是组件化。组件与组件之间相互独立，项目结构更加清晰，也更有利于维护。

一个组件里面封装了 HTML、CSS 和 JS，有自己独立的样式和逻辑。