采用vue-cli搭建一个Vue.js项目工程

时间: 2017-10-19阅读: 1332标签: cli

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')