1.借助官方提供的脚手架vue-cli构建项目

全局安装vue-cli

npm install -g vue-cli

创建一个基于webpack的项目

vue init webpack vue-monitor

image.png

时间可能有点久，等待创建完成之后，进入根目录，然启动应用

cd vue-monitor
npm run dev

启动之后，界面是这样的，至此，已经成功创建了一个vue应用

image.png

2.项目结构

这里使用vs code 最为开发工具，打开刚刚创建的 vue-monitor ，它的目录结构如下：

image.png

这些文件都是自动生成的。build文件夹中的内容是用来构建应用的；config目录下是一些配置信息，比如正式环境和开发环境。src 目录中存的是源文件，代码就是放到这个目录下；staic目录中存的是编译后的文件，比如应用编译好之后，可以单独部署到服务器；test目录里面是一些测试相关的内容，暂时不太理解，先不使用。

对于开发来说，src目录才是关注的重点。一个正常的vue应用，src目录下应该包含以下文件夹

components：里面用于存放一个个的组件。
router ：路由，在一个单页应用中，这是必不可少的一部分。
service ：定义一些接口，便于与后台交互，与后台不同api交互的方法，都写到这里面。
image ：存放图片资源
style ：存放css样式，或者说通用样式吧。
store ：一般稍微复杂一点的应用，都会用上状态管理框架，这时会有一个 store 文件，用于管理状态

从 package.json文件中可以看出，使用 vue-cli 创建的应用已经默认添加了 vue-router，但是没有用到vuex：

image.png

main.js 文件：entry指定的为整个应用的入口文件，这涉及到 webpack 的配置和整个应用的启动流程。打开 build 下的 webpack.base.conf.js 文件，可以看到以下内容

image.png

3.组件结构

在 src 目录下，除了一个 main.js文件，还有一个 App.vue 文件，这里就涉及到另外一个概念：vue组件。每个.vue文件，对应一个vue组件，也称单文件组件。App.vue 组件的内容如下：

image.png

template：标签里面的内容其实就是一些 html标签，简单来说就是用来展示内容。
script ：里面就是正常的 js脚本，比如这里是导出一个名为 App的模块
style：里面就是样式，和常见的html文件类似

以上三部分内容就定义了一个基本的 vue组件。需要注意的是，如果你使用vs code作为你的开发工具，需要安装一个插件才能支持 vue 语法高亮：Vetur

4.组件使用方式

每个vue应用，都应该通过创建一个 vue根实例开始的，创建一个vue实例很简单：

let vm = new Vue({
 //选项
})

就相当于是 new 一个对象吧，Vue本来就是一个全局对象。组件的使用之前需要注册，所谓的注册就是在 vue 实例或者组件的实例选项 components 中维护该组件，例如 main.js 文件

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

主要看这一段

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

el 就是挂在点，其实就是 template中对应的id，这里能使用 ‘#app'，是因为在文件头已经引入了 App组件，而App组件中的 template中有一个 id='app' 的div；router就是注册路由；components: { App } 就是注册App组件；template: '<App/>' 表示在项目启动后展示的内容就是 App.vue 中 template 的内容。当然，这里只是简单介绍组件的概念，具体的用法可以参考官方文档。