当我们在使用vue构建中大型项目时，通常会遇到某些经常用的方法以及属性，比如说搭建一个员工管理系统，请求的url需要一个共同的前缀，或者在某几个view中需要用到时间，这个时间是通过某方法格式化之后的等等，如果每次用到都写共同的代码，那样如果之后有变动的话维护起来会非常麻烦。
所以我们就得想办法抽出公共代码，因为vue是组件化开发，我们就会很自然的与es6的module模块化联系到一起。其实当我们在搭建项目结构时就应该先提前埋下伏笔，有一个util文件夹，里面放的就是我们要写的公共代码，其实很多vue的例子都是类似于这种结构搭建的。
对于固定的配置参数我们可以放到config.js中，就像下面这样。
const config = {
request_prefix: 'http://localhost:10003',
base_img: 'http://www.baidu.com',
const DingConf = function(data){
export {config, DingConf}
对于常用的工具函数我们可以放到util.js中，结构跟上面一样。
然后为什么我要用export来导出，而不用export default呢？
因为前者更为灵活，因为对于大中型项目来说，我们的工具函数以及配置参数往往较多，如果我们使用export default导出的话，在组件中引入就会全部引入，但我们的需求是只在相应的页面中按需引入即可，所以在vue文件中，我们就可以这样写
import {config} from 'src/util/config'
// 引入模块export default {　　created(){　　　　this.$http({　　　　　　url: config.request_prefix + xxxxxxxxxxxxx
// 使用　　　　})　　}}
这样写的优点是增强了可读性并利于维护。如果有同学不太理解es6中的import，export，建议大家去看下阮一峰大神的es6入门教程，在这里我也简单的说下吧，因为vue是模块化，所以就得导出某些东东，然后每个模块只负责不同的业务，所以嘛我们最后就得export一下，因为const是不变的常量，所以在配置项中尽可能用这个，在工具函数中用let声明变量，然后import后面的{ ... }就是引入某个模块的某些属性或方法，from 'xxxx' 这里面是指引入哪个模块。
阅读(...) 评论()自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点：
1. 如何发布一个包到npmjs仓库上
2.如何引用一个npm包，尤其是本地引用
3.vue组件的两种引用方案
一、发布一个包到npm的步骤
在npmjs.org上注册一个账号
然后进入命令提示窗口输入：
npm adduser: 进入添加用户
Username your name: 设置用户名
Password your password: 设置密码
Email youremail：设置邮箱
登录信息都保存在用户目录下的.npmrc文件中（以token的方式保存）
npm publish：发布包
执行npm publish这前，请切换到需要发包的项目根目录下。
npm unpublish --force：移除一个发布包（也可以移除指定版本的包）
发包前必须要在npmjs上注册一个账号
每次发布的时候都需要重新更新版本
也可以用npm logout登出用户，用npm login登录用户
二、build方式引用vue组件
示例使用的是本地安装一个npm包。因为把包发布到npmjs，然后再npm到项目中太过麻烦（由于我们要做来回调整和测试）。实现vue组件三步骤：
1. 配置组件（被引用的组件），可以省略
配置package.json，主要是增加main节点
"main": "index.js"
主是main的这个节点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径。
导出可供外部访问的组件
import VueTree from './components/Hello'
module.exports = {
主要是导出可以让外部访问的组件，这里没有直接导出main.js，是因为我们所需要的是一些子组件，而根组件（因为他存在直接挂载到dom上的操作）。
编写打包成为一个组件的脚本
var webpack = require('webpack')
var path = require('path')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
var opt = {
'vue-tree-common': './src/comp.js'
path: resolve('dist'),
filename: '[name].js',
library: 'vue-tree-common',
libraryTarget: 'commonjs2' //注意这里，打包的标准
resolve: {
extensions: ['.js', '.vue'],
modules: [
resolve('src'),
resolve('node_modules')
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('node_modules')]
var compiler = webpack(opt)
compiler.run(function(err, state) {
console.log(err)
此种打包方式会将此组件的所有引用打包成一个文件，还是存在不合理的现象。
生成包 通过上述三个步骤的配置，只需要运行打包成组件的脚本就可以生成发布包了。
2、本地如何引用npm包（安装发布好的包）
用命令模式进入开发项目文件夹，用命令安装包。npm install --save 本地路径& 即可。
npm install --save D:\MyProject\vue2-tree
3、根据包名直接定位组件
&template&
&div id="app"&
&img src="./assets/logo.png"&
&hello&&/hello&
&VueTree&&/VueTree&
&/template&
import Hello from './components/Hello'
import {VueTree} from 'vue-tree/dist/vue-tree-common' //重点
export default {
name: 'app',
components: {
font-family: 'Avenir', Helvetica, Arial, sans-
-webkit-font-smoothing:
-moz-osx-font-smoothing:
text-align:
color: #2c3e50;
margin-top: 60
此处我用的是import {VueTree} from 'vue-tree/dist/vue-tree-common这种方式引入的包，因为在原到用的package.json中main节点配置的index.js。
三、更为直接的引用vue组件
我们还需要npm本地安装或者再现安装；
按照如下图所示引用：
vue的版本需要一致，如果不一致需要调整。
vue的几种打包方式：UMD、common、esm。
vue分为部分和完成打包，区别就是template的支持。
vue组件样式存在图片的引用时，请使用单独的样式引入，因为组件的引入是不带图片的。
&build方式引用vue组件&此方式可以把组件打成不同的包，方便不同规范引用。
阅读(...) 评论()vue.js怎么实现同时写多个getjson_百度知道
vue.js怎么实现同时写多个getjson
我有更好的答案
　　用vue了简单分页功能，整体实际上拆分成两部分:&vuetable listdata=&{{datalist}}& clickcallback=&{{callback}}&&&/vuetable&&pages pages=&{{@ pages}}& clickhandle=&{{search}}&&&/pages&其中vuetable组件负责数据展示功能，里面内容暂且不表，pages组件实现分页功能，如下：&div&
&li v-on=&click:leftclick& v-show=&leftbtn&&&a&《&/a&&/li&
&li class=&pageindex& v-repeat=&showlength& v-on=&click:clickhandle(currentIndex+$index,$event)&&&a&{{currentIndex+$index}}&/a&&/li&
&li v-on=&click:rightclick& v-show=&rightbtn&&&a&》&/a&&/li&
&/ul&&/div&
采纳率：88%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。新人专享好礼凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元注：专享券的使用期限在领券的七天内。一键领取购买小册时自动使用专享券前往小册首页本活动仅适用于小册新用户知道了同时支持Vue/mpvue/weex的http请求库，最大可能的实现不同平台间的代码复用。
一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node中都能正常运行。同时可以方便配合 Vue家族的框架，最大可能的实现 Write Once Run Everywhere。
随着 Weex 、mpvue 的发布，他们都是支持Vue.js语法。目前vue已经你能够运行在浏览器、小程序和Native了。尽管各个平台仍有差异，但已经基本能实现 Write Once Run Everywhere 。这使得我们可以在多个端上实现尽可能大限度在代码复用。但是无论是 vue 还是Weex 、mpvue，它们本质上都只是一个View层，也就说最好的情况，也只能实现UI复用。但对于一个应用程序来说，除了UI，最重要的就是数据了，而数据来源一般都是来自网络请求（大多数都是http）。在使用这些框架时，您的网络请求，都需要使用平台特定的API！这很糟糕，意味着您网络请求的代码不能复用，所以尽管UI可以复用，但我们还需要去适配网络请求部分的代码。
要解决这个问题，就需要一个能支持多个平台网络库，用户层提供统一的API，将平台差异在底层屏蔽。而 就是这酱紫的一个网络库，为了方便axios使用者迁移，fly.js API设计风格和axios相似（但不完全相同）！
通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持，但同时对用户层提供统一、标准的Promise API。不仅如此，还支持请求/响应拦截器、自动转化JSON、请求转发等功能，详情请参考：
目前Fly.js支持的平台包括： 、 、 和浏览器，这些平台的 JavaScript 运行时都是不同的。更多的平台正在持续添加中，请保持关注。
下面示例如无特殊说明，则在所有支持的平台下都能执行。
var fly=require("flyio")
fly.get('/user?id=133')
.then(function (response) {
console.log(response);
.catch(function (error) {
console.log(error);
fly.get('/user', {
.then(function (response) {
console.log(response);
.catch(function (error) {
console.log(error);
fly.post('/user', {
name: 'Doris',
.then(function (response) {
console.log(response);
.catch(function (error) {
console.log(error);
function getUserRecords() {
return fly.get('/user/133/records');
function getUserProjects() {
return fly.get('/user/133/projects');
fly.all([getUserRecords(), getUserProjects()])
.then(fly.spread(function (records, projects) {
.catch(function(error){
console.log(error)
Fly支持请求／响应拦截器，可以通过它在请求发起之前和收到响应数据之后做一些预处理。
fly.interceptors.request.use((request)=&{
request.headers["X-Tag"]="flyio";
console.log(request.body)
fly.interceptors.response.use(
(response) =& {
return response.data
(err) =& {
除过以上这些使用， 还有很多其它强大的功能，详情请移步.
如果您有问题欢迎在 在github 提issue . fly.js github:
加入掘金和开发者一起成长。发送简历到 hr@xitu.io，期待你的加入！分享前端 very interesting！
vuex 实现vue中多个组件之间数据同步以及数据共享。
前言　　在一些项目中有很多数据状态之间要实现数据共享状态共享，例如购物车的数据、用户的登录状态等等。vue父元素是可以通过props向子元素传递参数，子元素也可以通用smit向父元素传递参数。但是像购物车这种在项目中多个位置的引用时就会变得很麻烦。例如项目中使用了三个购物车的组件，那么当其中一个组件的值发生改变时，就要通过自身告诉父组件我的值发生改变了，然后父组件在通知其他两个购物车组件值发生改变了，需要进行同步，这样就会变得很麻烦。而vue-v就可以帮助我们解决这个繁琐的问题。npm安装　　npm install vuex 开始使用　　项目需求：实现购物车商品增加和减少，并计算出商品的总价。准备工作　　第一步要引入在main.js中引入 vueximport Vuex from 'vuex'　　第二步注册vuex组件Vue.use(Vuex)　　第三步实例化Store　　state：保存的是原始数据，可以理解为需要共享的数据或状态，　　getters：可以理解为是staore的计算属性，可以实现就store的计算，但是不能更改。例如你想知道两个值相加、相乘。都是非常不错的选择。　　mutations：mutations中的方法可以对state中的数据进行改变。　　action：action中的方法可以调用mutations中的方法，但不可修改state中的原始数据。action中的函数可以使用ajax的技术对服务器进行数据交互。并且可以在回调中使用commit调用mutations中的方法，例如通过context.commit('increment', price)increment是需要调用mutations中的方法名，price是需要传入的参数。 mutations中的方法再去更改state的原始数据。 　　代码示例1234567891011121314151617181920212223let store = new Vuex.Store({
totalPrice: 0
getters: {
getTotal (state) {
return state.totalPrice*2
mutations: {
increment (state, price) {
state.totalPrice += price
decrement (state, price) {
state.totalPrice -= price
actions: {
increase (context, price) {
context.commit('increment', price)
}})　　如何在组件中获得state数据？　　在组件内部使用 this.$store.state.属性名即可。　　实例代码：1234computed: {
totalPrice () {
return this.$store.state.totalPrice
}　　如何在组件中使用getters内的方法？12345computed: {
getTotal () {
return this.$store.getters.getTotal
}}　　如何在组件中使用mutations内的方法？12345678methods: {
addOne () {
this.$store.commit('increment', this.price)
minusOne () {
this.$store.commit('decrement', this.price)
}　　如何在组件中使用actions内的方法？12345methods: {
addOne () {
this.$store.dispatch('increase', this.price)
}转载自：https://www.cnblogs.com/waitforyou/p/6784838.htmlhttp://pan.baidu.com/s/1hrJfpli
demo下载地址
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！