Vue系列一之：如何构建一个简单的Vue项目

网络上已经有很多关于学习vue的资源和内容，官方文档更是给出了大量的知识点和使用方法给我们提供学习，可是学习归学习，如果这些内容没有应用到实际的开发当中，那也是没有什么用途的，因为工具之所以为工具，是因为在你不断的使用中，有自己的思考，有自己的判断，有自己去探索的空间。

好了，废话不多说了，下面我们来看一下官方给予的一个定义：

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

有兴趣的同学可以详读官方文档，我们这里只是从入门讲解vue的一些基本操作和功能。

一、安装

安装有几种方式，官方推荐学习的过程中不要用脚手架去搭建项目。

1.我们可以通过最简单的<script> 进行引入

2.命令行工具 (CLI)

这两种方式都非常简单，不再详细讲解，npm的源最好是换成国内的镜像，要不然下载的速度简直感人肺腑。至于安装node.js有问题的同学，可以给我留言，因为本人在安装的过程中也遇到很多问题，比如node和npm的版本不一致造成了很多error，卸载卸载不干净， 安装又又冲突等等问题。但是同学们千万不要在这里就被拦住了，只是一开始安装环境有些困难，后面就真的没有什么问题了。
搭建好手脚架以后，可以根据以下命令：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建项目， 项目名字叫做my-project
$ vue init webpack my-project
# 进入项目，然后安装依赖
$ cd my-project
$ npm install
# 运行项目，请不要关闭当前窗口
$ npm run dev

在init的过程中会出现下面内容让你选择填写：

? Project name test 
? Project description 我的第一个项目
? Author caijunyu <vshiron@163.com>
? Vue build standalone
? Install vue-router? Yes （路由）
? Use ESLint to lint your code? No （语法检查）
? Setup unit tests with Karma + Mocha? Yes （单元测试）
? Setup e2e tests with Nightwatch? (Y/n) y 

以上要注意是的Use ESLint to lint your code这个选中就选择no就行了，其他的确认确认确认即可。eslint算是一个代码语法规范检查的工具，不同意就不会把检查语法规范的功能加进webpack编译的流程里
注意：使用npm下载模块出错的话，最好还是安装一下国内镜像，使用cnpm来下载吧。据说用cnpm下载的内容会有所缺失，但是如果用npm下载了半个小时都搞不定的话你还是放弃它吧。我使用的过程中暂时是没有什么功能缺失的。
安装完成后欢迎使用 **npm run dev **启动项目 ；）
见到如下界面便是安装完成：

welcome.png

二.初步了解你的项目结构

基础目录结构

我们先来看看最原始的目录结构吧！

image.png

主目录下面有着几个大目录，我们初学阶段主要关注的是

• src目录，因为大部分的内容都是围绕这个目录进行的
• build是webpack配置文件
• config是配置目录，包括端口号等
• node_modules是项目依赖模块
• static是静态资源文件
• package.json是整个项目配置文件
• index.html算是一个页面的入口文件，可以在这里配置html的基本信息
  随着项目的不断扩展，我们会修改目录的结构以适应开发需求

src下的目录结构

下面，我们可以再看看src目录下面有什么内容：

• assets为一些资源文件的目录
• components是基础的组件或者视图
• router可以设置路由，即完成单页面切换的效果
• app.vue 是一个主体的入口，一切从这里开始
• main.js 属性其他语言开发的同学会知道，每个程序都有一个主入口，main可以配置一些核心文件和信息

app.vue文件内容的组成

下面再讲解一下app.vue这个文件

<template>
  <div id="app">
    ![](./assets/logo.png)
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我们可以看到，其实这里主要由三大模块组成，第一个模块是：<template>，第二个是：<script>，第三个是：<style>。<style>很简答，其实就是相对于html中是css图层样式，如果不是很理解的同学可以回去看看这部分的内容，主要是修改一些样式。

template翻译上就是模板的意思，我们可以把它也理解成一个印章，即使一个印章，实际上是可以反复使用盖出很多个图形。
而我们的script中则定义了，我们这个印章要盖的内容，比如印章上需要有标题，我们就可以在data里面返回印章的标题是什么，让印章自动渲染上数据。上面显示的是export default {name: 'app'}，这是是给这个模板命名为app,接下来我们要处理的数据则是在data里面进行绑定。后面我们会再详细讲解这部分的内容。

main.js中的内容组成

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

引用官方文档中的一句话来描述就是：每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
这个文件里面其实就是构造了一个最基础，作为整个应用程序根基的vue对象。相对于iOS来说，我个人理解这个就是一个window对象，可以挂载显示其他内容。

三，尝试修改界面内容

现在我们已经看到了有一个主界面，地址栏是：localhost:8080/#/

image.png

实际上它对应的就是一个hello.vue的页面。刚刚不是提及了app.vue的文件结构吗？其实这个界面的目录结构也是相似的，只不过内容可能会比较偏多而已。
单纯的学习没有看到效果是非常无聊的，那么我们下面来尝试改变一下代码，看看会有什么效果吧。我相信大部分学了html+css的同学都能自己手动的把界面构建出来，那么我们来看看，这代码里面有什么特别之处呢。

image.png
在写着msg的地方并没有显示{{msg}}这样的内容，而是被替换成了script里面的一段内容：msg: 'Welcome to Your Vue.js App'这里就实现了模板（template）中的内容和script中data的msg进行了绑定。我们把没有必要的内容先删除以便观察： image.png image.png

（logo是配置中app.vue中）
在我们删除了主题下面的内容后，我们的界面已经立刻刷新了。实际上我们在这里可以修改data中msg的内容，也可以立刻在界面上刷新。

export default {
  name: 'hello',
  data () {
    return {
      msg: 'hello vue!'
    }
  }
}

这是一个vue的最简答架构，export default我的理解有一种”导出“的味道（输出该部分内容），在其他界面如果需要用到你的这个部分的时候，在直接import该组件的时候，大括号里面的内容会被‘’引入''，后面再理解，我们这里手写就体会一下，怎么样输出data中的数据，这个data是需要用return来返回每一项属性的内容的。

目前为止，我们的项目已经跑起来了，本节的主要内容就是学会怎么样构建项目，理解基础目录结构，了解xxx.vue的大概样式。
好了，大家先去把最基础的原型构建出来吧。