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

时间: 2017-10-19阅读: 701标签: vue

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


vue引用js文件的多种方式

vue引用js文件的多种方式,这里以为引入jquery为例。js引入文件方式包括: vue-cli webpack全局引入jquery、vue组件引用外部js的方法、单vue页面引用内部js方法

vue router的使用_vue路由的相关知识

Vue中的路由根据用户在网页中的点击,将其引导到对应的页面。安装vue-router,路由使用包括:嵌套路由、动态路由、编程式路由、路由重定向

Vue中的scoped及穿透方法

由于scoped看起来很美好,但是含有很多的坑,所以,不推荐不使用scoped属性,而通过在外层dom上添加唯一的class来区分不同组件。这种方法既实现了类似于scoped的效果,又方便修改各种第三方组件的样式,代码看起来也相对舒适

在Vue项目里面使用d3.js

在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js,将视图从逻辑中分离出来,并且使用Vue钩子,方法和data对象。

vue.js $emit/$on的用法和理解_vue组件之间数据传输通信

每个 Vue 实例都实现了事件接口vm.$emit( event, arg ) 触发当前实例上的事件;vm.$on( event, fn )监听event事件后运行。实例说明:Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信,Vuejs 用$emit与$on来进行跨页面之间的数据传输通信

浅谈Vue v-model实现原理,如何封装,以及封装方法

vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?其实v-model只不过是一个语法糖而已,真正的实现靠的还是:(1) v-bind:绑定响应式数据,(2) 触发 input 事件 并传递数据 (重点)

vue中nextTick的使用_vue.js下nextTick()异步更新队列源码解析

nextTick()并不会重绘当前页面,并且它也不是在页面重绘才执行,而是在此次事件循环结束后一定会执行的。 为什么能在此方法中取到更新后的数据,那是因为dom元素的属性已经在watcher执行flush队列的时候改变了,因此是可以在此时获取的。

vue轮播图_用vue实现一个仿简书的轮播图

Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果。写好css样式,只需改变每张图片的class即可实现轮播效果。可以将轮播图看成两个,如图所示

vue路由history模式_如何去除vue项目中的#

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在#的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history

vue watch监听对象的使用_实现首次不触发、深度监听

vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据。这篇文章介绍:vue如何实现首次不触发watch,vue如何实现数据的深度监听?