前言

这篇文章对纯新手友好，所以有过任何vue开发经验的人可以出门左转啦！这篇文章献给我的homie苏蕾儿童鞋，让她在学习vue项目的时候少走一点弯路（径直冲向末路哈哈哈）。

本文将会简单的介绍一下vue的生态环境以及其中涉及的思想。如果刚从原始的HTML+JS+CSS中转型，这篇文章可能会比较适合你。

我也是最近刚刚上手vue，之前有过一丢丢react开发经验，所以对于vue的整体思路有些许的了解。粗鄙之见也请各位大佬多多指教。

本文将会涉及如下内容：

• vue
• vue，vuex和vue-router的关系
• 为何需要vuex和vue-router
• vue-cli创建项目以及项目结构讲解
• 以官方提供的todolist作为初始项目讲解vue的基本语法，后面会陆续加入vuex和vue-router的使用

Vue

Vue语言有非常强的灵活性，可以直接在HTML页面中通过引入其js文件使用，也可以作为一个完整的项目使用。通常情况下，我们会将其作为一个完整的项目使用。这里我使用vue-cli新建一个基于webpack的vue项目。vue-cli创建项目的教程网上很多，这里就不详细解释了，可以看到新建完成后项目目录如下图所示：

在这个基础上我会再额外的新建两个文件夹views,api和store，这篇文章暂时用不到api和store，之后引入vuex之后会使用。

现在整体的项目目录如下：

现在着重解释一下其中几个目录和文件分别用来干啥。

先看根目录下的文件。

package.json用来配置node环境，它会记录项目的相关信息以及该项目的依赖，有点像java的maven配置管理工具。通俗的来说，我们一个项目可能会用到很多外部依赖比如jquery。于是我们就需要一种科学有效的方式管理所有依赖及其对应的版本。而所有依赖都位于node_modules文件夹中。后面我们使用npm工具进行依赖管理时还会提到他。

.gitignore文件记录了git提交时不上传的内容，如node_modules中的全部内容。

index.html文件是项目的skeleton，我们来看一下它的内容：

这里除了将网页标题命名为我们的项目标题之外，还有一个id为app的div。所有的页面将以index.html作为大框架，将元素插入到div中。后面还会继续提及。

build,config文件夹涉及了各种配置文件，这里不赘述，因为我也不是很会webpack哈哈哈。

项目的核心代码都位于src文件夹之下，在这个文件夹下，我们看到一个App.vue文件，内容如下：

它构建了一个名为App的模块。其实，这是整个项目的入口模块，所有的渲染都将会经过App模块，然后渲染至<div id="app"></div>。因此可以在App.vue文件中定义整个项目最通用的结构比如Header，Sidebar等等。其它情况下也可以不对其进行任何修改。

components文件夹和views文件夹都用来存储模板，不同的是views文件夹中的内容对应一个完整的页面，而components中的内容对应各个可重用的元素。比如views对应一个用户个人信息界面，而components中可能包好这个界面中的Header，Sidebar，核心用户信息模块等等。

assets中包含静态信息如图片等

router目录之下index.js对应了vue-router的配置，涉及vue-router时会继续提及。

至此我们基本了解了vue项目中各个文件夹的作用。那么如何启动这个项目呢？这就需要我们的npm指令。

npm

npm的指令很多，核心的我们暂时只需要了解一下两种就可以了：

npm install: 安装依赖，比如我们需要安装jquery，就可以使用npm install jquery。在不指定版本号的情况下会下载最新版本npm run dev: 运行开发配置下的项目，我们用这个指令在开发过程中启动项目并debug

进入代码

该todo来自于vue官网上，需要查看源码的可以去官网的github上下载。

首先我们需要使用npm install来安装项目现有的依赖，项目现有的依赖会从package.json文件夹中查看并下载。依赖下载的过程会比较慢，可以使用淘宝开发的cnpm。

我们在使用npm run dev查看一下运行结果：

主要的组件都位于components之下：

分别对应着新建Todo模块，单个Todo展示页面和Todo列表模块。因为这是一个单页面app，所有没有用到views来组装，而是直接在App.vue中进行组装。

这里引入了TodoList和CreateTodo模板，并在<template>中使用。同时还用props传入了一组todo的数组模拟现有的todo内容。具体的vue语法这里将不涉及，可以去官网上学习，官网的教程可以说是非常新手友好了呢。

然后我们来看一看TodoList.vue

现在看Todo.vue文件。

它的<template>中包含了一个Todo块的信息。之后TargetList.vue用它来展示全部的Todo。