采用vue-cli搭建一个Vue.js项目工程
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')
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！