构建Vue-cli通用项目目录

写在前面的我的体会，大神们能够跳过

这段时间接手一个后台管理项目，从最开始写一点我本身的体会吧。
首先Vue，Angular和React是当今主流前端三大框架。Vue是一个用来构建网页的JS库，相比较Angular和React框架来讲，Vue的出现虽然晚一些，可是他吸收了Angular和React的教训，变得更为灵活，不是非要根据框架的规定非要如此如此，更容易发展成为公司本身的组件库，转换为本身的体系。
Angular有许多工具，复杂的语法，Vue.js 比起 Angular 要简单的多，甚至于要更好，代码更加简单明了。 他们拥有一些相似的功能特性，如:
1)使用了一个虚拟 DOM
2) 提供了响应式的，而且可组合式的视图组件。
3) 保持对核心库的专一, 而像路由和全局状态管理这样的关注点则交给附带的库来处理。
Vue和React都应用了双向数据绑定，Vue.js 中的双向数据绑定在你使用了 v-model 时就会至关的简单。而在 React 中, 过程就比较漫长了。Vue.js 更容易上手操做，并且能够快速造成生产力。它还提供了一条途径，使用新的工具和模式来简化大型代码库的管理工做。
Vue中指令和组件分得更清晰。指令只封装 DOM 操做，而组件表明一个自给自足的独立单元 —— 有本身的视图和数据逻辑。
在数据渲染方面.Angular依赖对数据作脏检查，因此Watcher越多越慢。Vue.js使用基于依赖追踪的观察而且使用异步队列更新。全部的数据都是独立触发的。根据这次项目为后台管理系统，拥有相对多的数据流来讲，这个优化差别仍是比较明显的。React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果作脏检查，而
Vue.js在模板中提供了指令，过滤器等，能够很是方便，快捷地操做DOM，渲染速度也是很是迅速。
ElementUI组件是饿了么公司基于Vue开发的一套UI组件库，应用普遍，维护的人数较多，，是现今比较主流的UI框架之一，bootstrap风格，考虑到稳定性，遇到问题相对容易解决，UI框架选用ElementUI组件。

首先是环境的问题

我用的是Vue-cli和ElemenUI组件库

那最基本的Node环境就不用我说了吧~
传送门在这里本身看着配吧：http://www.runoob.com/nodejs/...
好了，开始项目搭建了

首先固然是安装一个vue了

# 最新稳定版
$ npm install vue

而后全局安装vue-cli官方命令行工具

$ npm install --global vue-cli
# 用webpack构建一个你本身的项目啦
$ vue init webpack 项目名字

而后作一些配置啦，例如什么name,version,description都是项目的一些相关文件

而后进入对应项目目录，安装依赖

$ cd 项目目录
$ npm install

固然也能够替换成国内镜像，用cnpm安装依赖

# 启动项目
$ npm run dev

let us go，开始搞目录

1.node_modules为项目依赖组件库，能够再此引入第三方组件。
2.build为项目编译为线上项目的配置组件。
3.config为项目webpack配置文件。
4.dis为项目线上文件，经过build编译而成。
5.screenshots为UI图，不加入build范围，方便本地校对。
6.src为项目主要组件，assets是一些背景图片目录，common为通用组件目录，page是给一个功能组件目录。
7.router是vue路由跳转配置文件目录。
8.static为项目静态资源目录。为build项目预留。

其实我的感受通用项目目录能够很随意的搭配，好比说install 以后清空src目录

api封装通用组件，像是jsonp啊，滑动经常使用组件。
common是通用css样式库啦，封装reset.css之类的样式，或者js啦

根据我的喜爱，分配不一样的项目，这也是vue项目灵活的一种体现~

好了差很少了，吃饭去了，撒有哪啦