vue官网
本文主要目的是为了让大家对vue有一个初步的了解，简单介绍创建一个vue应用的正常流程以及vue应用 对应的目录结构，顺便介绍了下vue组件的概念。
就定位而言，Vue和React很像，都是组件化，核心库只关注视图层，所以如果想构建一个复杂的单页应用，需要依赖其它的框架，比如：vue-router、vuex。如果你接触过AngularJS，学习Vue的时候会感觉很熟悉，使用上确实有一些相似之处，比如指令、管道。但AngualrJS是作为一个功能十分全面的框架，而Vue仅仅是作为一个视图层，所以定位不同，没什么可比性。
vue-cli使用
使用vue很简单，最方便的方式就是直接在 html文件中引入以下内容
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
在工程化项目中，可以使用npm来安装vue，然和配合各种模块打包器(webpack)来管理应用。
npm install vue
官方为也为我们提供了一个命令行工具来快速搭建大型的vue应用：vue-cli。使用如下：
# 全局安装 vue-cli
npm install vue-cli -g
# 创建一个基于 webpack 模板的新项目
vue init webpack vue-monitor
# 安装依赖
cd vue-monitor
npm run dev
如果对webpack有稍微的了解，我倒是觉得可以直接使用 vue-cli。webpack 太复杂了，在开发的过程中慢慢学习，毕竟这种工具也是为了方便开发，提高效率。在开发的过程中慢慢学习，用的多了，也就回了。
创建应用
官方文档其实写的还是很详细的，但是感觉太零碎了，没有个整体思路，这是我觉得不好的地方。
这里直接使用 vue-cli 创建一个应用。
vue init webpack vue-monitor
image.png
时间可能有点久，等待创建完成之后，进入根目录，然启动应用
cd vue-monitor
npm run dev
启动之后，界面是这样的，至此，已经成功创建了一个vue应用
image.png
项目结构
这里使用vs code 最为开发工具，打开刚刚创建的 vue-monitor ，它的目录结构如下：
image.png
这些文件都是自动生成的。build文件夹中的内容是用来构建应用的；config目录下是一些配置信息，比如正式环境和开发环境。src 目录中存的是源文件，代码就是放到这个目录下；staic目录中存的是编译后的文件，比如应用编译好之后，可以单独部署到服务器；test目录里面是一些测试相关的内容，暂时不太理解，先不使用。
对于开发来说，src目录才是关注的重点。一个正常的vue应用，src目录下应该包含以下文件夹
- components 里面用于存放一个个的组件。
- router 路由，在一个单页应用中，这是必不可少的一部分。
- service 定义一些接口，便于与后台交互，与后台不同api交互的方法，都写到这里面。
- image 存放图片资源
- style 存放css样式，或者说通用样式吧。
- store 一般稍微复杂一点的应用，都会 用上状态管理框架，这时会有一个 store 文件，用于管理状态
使用 vue-cli 创建的应用已经默认添加了 vue-router，但是没有用到vuex，从 package.json文件中可以看出：
image.png
其src目录结构如下：
image.png
主要关注 main.js 文件，因为这涉及到 webpack 的 配置 和 整个应用的启动流程。打开 build 下的 vue-loader.conf.js 文件，可以看到以下内容
image.png
这里涉及到webpack的配置，entry指定整个应用的入口文件，这里指定了 src目录下的 main.js作为入口文件。个人觉得这种东西不一定完全需要自己纯手工配置，vue-cli 就是用来提高效率的，能看懂就可以排查文件。当然在正式环境部署的时候，需要了解的更多一些。
组件结构
在 src 目录下，除了一个 main.js文件，还有一个 App.vue 文件，这里就涉及到另外一个概念：vue组件。
每个.vue文件，对应一个vue组件，也称单文件组件。App.vue 组件的内容如下：
image.png
- template 标签里面的内容其实就是一些 html标签，简单来说就是用来展示内容。
- script 里面就是正常的 js脚本，比如这里是导出 一个 名为 App的模块
- style 里面就是样式，和常见的html文件类似
以上三部分内容就定义了一个基本的 vue组件。需要注意的是，如果你使用vs code作为你的开发工具，需要安装一个插件才能支持 vue 语法高亮：Vetur
组件使用方式
每个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 的内容。当然，这里只是简单介绍组件的概念，具体的用法可以参考官方文档。
网友评论