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

时间: 2017-10-19阅读: 855标签: 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的时候,偶然发现多次刷新或者网络加载缓慢的时候,会一瞬间出现设置的模板的情况。实在很影响美观,可以使用vue现成的指令来解决这个问题:v-cloak

vue之nextTick全面解析

vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick

vue中数据更新变化,而页面视图未渲染的解决方案

在使用vue的时候,我们都知道它是双向数据绑定的,但是在使用不熟的情况下,经常会遇到:data中的数据变化了,但是并没有触发页面渲染。下面就整理一些出现这种情况的场景以及解决办法。

Vue组件中prop属性使用说明

props 把数据传给子组件!prop是组件数据的一个字段,期望从父作用域传下来。子组件需要显式地用 props 选项。props的大小写、静态的和动态的 Prop、传入一个数字、传入一个布尔值、Vue的组件中的props属性单向数据流

Vue常用经典开源项目汇总参考-海量

本文主要是收集与整理Vue相关的开源资料,以供需要的朋友参考。主要包含以下几方面的内容:UI组件、开发框架、实用库、服务端、辅助工具、应用实例、Demo示例

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来进行跨页面之间的数据传输通信