vue是目前来比较火的一个前端框架，与react和angular成三国鼎立。Vue是什么？是一套构建用户界面的渐进式框架（官网解释）

Vue两大核心思想：组件化和数据驱动，组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用，数据驱动是前端的未来发展方向，释放了对dom的操作，让DOM随着数据的变化自然而然的变化（尤神原话）

vue-cli 的脚手架项目模板有browserify 和 webpack , 现在自己在用的是webpack , 官网给出了两个模板： webpack-simple 和 webpack 两种。两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能，普通项目基本用webpack-simple 就足够了  

安装和启动

步骤1：安装node.js

步骤2：npm安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org

步骤3：cnpm install --g vue-cli

步骤4：创建项目vue init webpack my-project

步骤5：进入项目文件cd my-project，安装依赖 cnpm install

步骤6：启动项目 npm run dev

步骤7：打包文件 npm run build 

路由(vue-router)

vue 生态系统中的路由（vue-router）是我们在做vue.js单页面应用体系必用到的机制

import VueRouter from 'vue-router'//路由
import routerConfig from './lib/routers'//路由配置

Vue.use(VueRouter)
const router = new VueRouter({routes: routerConfig})

new Vue({
  router,
  el: '#main',
  components: { App },
})

按需引入：需要实现根据不同页面加载不同js 

父子嵌套：尤其是组件存在父子关系的时候，我需要在路由里面也配置出相对应的关系结构

export default [
 {path: '/a',component:function(resolve){require(['../pages/a'],resolve);}, 
  	children: [
  		{path: '/a/b',component:function(resolve){require(['../pages/ab'],resolve);},}
  	]
    },
]

数据源（vuex）

vuex是vue生态系统中管理数据源的库!它提供了状态树（state）,这里定义了全局的数据结构，数据分为2种：动态数据和静态数据，在vuex只放动态数据，把静态数据放入到vue.js的data里面。

UI组件库

在vue生态体系里面有很多专业的UI组件库，比如Element（后端）、Mint-ui（移动前端）等一些，虽然很多组件的交互大体相似，

AjAX数据获取（axios）

基本使用axios来做获取数据操作，放弃使用vue-resource，在POST请求的时候需要配合“qs”插件来做，遇到跨域场景需要服务器同时支持，axios源码里面是基于XMLHttpRequest对象来实现。

样式支持

对应css预编译Less、Sass都支持，主要需要安装对应的依赖

cnpm install less less-loader --save
cnpm install node-sass sass-loader  --save

国际化（i18n）

Vue-i18n是以插件的形式配合Vue进行工作的。通过全局的mixin的方式将插件提供的方法挂载到Vue的实例上。

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) 
    
const i18n = new VueI18n({
        locale: CONFIG.lang,    // 语言标识
        messages: {
            'zh-CN': require('./common/lang/zh'),   // 中文语言包
            'en-US': require('./common/lang/en')    // 英文语言包
        }
})
const app = new Vue({
     i18n,
     ...App
}).$mout('#root')

链接: https://fly63.com/article/detial/4