【亚洲必赢官网】vue轮播组件及去掉路由,vuejs编写一个excel转json的工具

不久前供销合作社要自个儿去落到实处vue知识的系统讲解,总括壹番,差不多需求七节课,明日天津大学学致说一下大家运用vue供给学会的基本本事。vue是一个渐进性视图渲染框架,使用vue主旨是数据出发,数据貌似是大家前台从后台获取数据,对应显示到大家的页面上就足以。

亚洲必赢官网 1

不久前付出二个h五的游玩,须求三个excel转json的工具,英特网找了找,未有发觉适合的工具。想到本人在此之前用nodejs、express和vuejs做过四个网址,也用过ejsExcel插件,于是自个儿出手做了一个。这里大约的记录一下支付进度,

壹.(webpack)vue-cli营造的体系怎么样设置各个页面包车型地铁title

在路由里各个都助长二个meta

[{
    path:'/login',
    meta: {
      title: '登录页面'
    },
    component:'login'
}]

钩子函数:

在main.js中增加如下代码

router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title;
  next()
})

行使vue基本工具必备,node,
FQ的工具蓝灯(假如未有的校友能够找小编,给您安装包),vue-cli,那是最基本的使用工具,如果您是后台开垦人士,那么作者引入使用webstrom和vscode,他们都得以配备node,使用npm命令去运维,唯一不佳的正是对此代码火速修改有点慢,假诺Computer配置格外好能够行使;尽管您的微型Computer比较卡顿,那么提议你选拔sublime就能够了,通过设置插件就足以了。

Vue

给协和留个回想。

 2.vue项目中行使axios上传图片等公事

先是安装axios:
1.利用npm安装npm install axios –save
2.利用bower安装bower install axios –save
3.一贯利用cdn引进

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

诚如景况上传照片有二种方法:

  • 1.本地图片转变来base6四,然后经过平日的post请求发送到服务端。操作简单,适合小图,以及1旦想包容低版本的ie不能够用此办法
  • 二.经过form表单提交。form表单提交图片会刷新页面,也足以时form绑定到多少个潜藏的iframe上,可以兑现无刷新提交数据。

这里只讲授一下次之种艺术:
html代码:

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

js代码:

import axios from 'axios'
// 添加请求头
update (e) {   // 上传照片
      var self = this
      let file = e.target.files[0]
      /* eslint-disable no-undef */
      let param = new FormData()  // 创建form对象
      param.append('file', file)  // 通过append向form对象添加数据
      param.append('chunk', '0') // 添加form表单中其他数据
      console.log(param.get('file')) // FormData私有类对象,访问不到,可以通过get判断值是否传进去
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
     // 添加请求头
    axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)
        .then(response => {
          if (response.data.code === 0) {
            self.ImgUrl = response.data.data
          }
          console.log(response.data)
        })
    }

上边进入大家的读书阶段,首先大概说一下vue的支出进度,也是大都数项目的应用惯例。写项目时,大家供给统一一下那个公用的点子,比方:请求错误页面,登陆,注册,还有大家常用的弹窗页面,那一个是我们个人的秘诀,那么些急需定一些对象去接纳。

(一)安装node.js

率先要求设置node意况,能够直接到普通话官方网站http://nodejs.cn/下载安装包。

只是如此设置的 node 是定点版本的,假如急需多版本的 node,能够使用 nvm
安装http://blog.csdn.net/s8460049/article/details/52396399

设置到位后,可以命令行工具中输入 node -v 和 npm
-v,若是能显示出版本号,就印证安装成功。

亚洲必赢官网 2

查看node版本

那是本体系的第一篇博客,从新建项目开头吧。

 3.qs.stringify() 和JSON.stringify()的界别以及在vux中运用post提交表单数据须求qs库系列化

qs库的npm地址:

职能纵然都以系列化。如果小编要交给的数据如下

var a = {name:'hehe',age:10};

qs.stringify类别化结果如下
name=hehe&age=10

而JSON.stringify体系化结果如下:
"{"a":"hehe","age":10}"

vux中央银行使post提交表单数据:

this.$http.post(this.$sign.config.url.loginUrl,this.$qs.stringify({
    "phone":this.phoneNumber,
    "vCode":this.loginCode,
    "smsCode":this.phoneCode    
    })
)
.then(response=>{
    console.log(response.data);
    if(response.data.httpCode == 200){

    }else{

    }
}) 

在firebug中能够观望传递的参数:
phone=15210275239&vCode=8vsd&smsCode=1534

在vue中使用axios:

this.$axios.post(loginUrl, {
    "email": this.email,
    "password": this.password
}, {
    transformRequest: (data) => {
        return this.$qs.stringify(data)
    },
}).then(res => {
    if(res.data.resultCode == RESULT_CODE_SUCCESS){
        console.log('登录成功');
        this.$router.push({name:"home"})
    }else{
        console.log('登录失败');
    }
}).catch(err => {
    console.log('登登录出现错误');
})

大家二个种类规划的成效模块,从支付以来,常见的有轮播图,tab栏切换,找寻组件,地址,导航菜单(折叠导航菜单),footer(版权消息),还有友情链接,个人主旨,头像修改,重新设置密码,登入(第三方登陆),注册,列表页循环,分页效能,下拉刷新等

(二)安装vue-cli

安装好了 node,大家能够直接全局安装 vue-cli:

npm install -g vue-cli

可是那种设置格局非常的慢,推荐使用国内镜像来安装,所以大家先安装 cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

一经设置退步,能够动用 npm cache clean
清理缓存,然后再重新安装。后边的安装进程中,如有安装失败的动静,也急需先清理缓存

同样能够选用 cnpm -v 查看是或不是安装成功

亚洲必赢官网 3

查看cnpm版本

接下来利用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

风行的 vue 项目模板中,都饱含 webpack 插件,所以这里能够不安装 webpack

设置到位后,可以行使 vue -V (注意 V 大写)查看是还是不是安装成功。

亚洲必赢官网 4

vue版本查看

假使提示“不可能辨识 ‘vue’ ” ,有不小希望是 npm 版本过低,能够运用 npm install
-g npm 来更新版本

一.亟需依据nodejs和vuejs

 4.vue中得以完毕全局的set库克ie,getCookie以及delCookie方法笔记

import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import App from '../component/App.vue'
import Login from '../component/Login.vue'
import UserInfo from '../component/UserInfo.vue'
//状态管理
Vue.use(Vuex)
  //路由
Vue.use(VueRouter)

//路由配置
//如果需要加菜单,就在这里添加路由,并在UserMenu.vue添加入口router-link
const router = new VueRouter({
  routes: [{
    path: '/login',
    component: Login
  }, {
    path: '/user_info',
    component: UserInfo
  }]
})

//Vuex配置
const store = new Vuex.Store({
  state: {
    domain:'http://test.example.com', //保存后台请求的地址,修改时方便(比方说从测试服改成正式服域名)
    userInfo: { //保存用户信息
      nick: null,
      ulevel: null,
      uid: null,
      portrait: null
    }
  },
  mutations: {
    //更新用户信息
    updateUserInfo(state, newUserInfo) {
      state.userInfo = newUserInfo;
    }
  }
})

//设置cookie,增加到vue实例方便全局调用
Vue.prototype.setCookie = (c_name, value, expiredays) => {
  var exdate = new Date();    
  exdate.setDate(exdate.getDate() + expiredays);    
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}

//获取cookie
Vue.prototype.getCookie = (name) => {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
        return (arr[2]);
    else
        return null;
}

//删除cookie
Vue.prototype.delCookie =(name) => {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = this.getCookie(name);
    if (cval != null)
      document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  }

//vue实例
var app = new Vue({
  data: {},
  el: '#app',
  render: h => h(App),
  router,
  store,
  watch:{
    "$route" : 'checkLogin'
  },
  created() {
    this.checkLogin();
  },
  methods:{
    checkLogin(){

      //检查是否存在session
      if(!this.getCookie('session')){
        this.$router.push('/login');
      }else{
        this.$router.push('/user_info');
      }
    }
  }
})

从地点的浅谈中,大家能够开掘大家在品种中需求一个公家组件,header组件,footer组件,nav组件,swiper组件,tab组件,fail组件等此外零件,后天大家享受一下swiper组件封装到vue中去。

(三)生成项目

第三须要在命令行中进入到项目目录,然后输入:

vue init webpack Vue-Project

其间 webpack 是模板名称,能够到 vue.js 的 GitHub
上查看更加多的模版https://github.com/vuejs-templates

Vue-Project
是自定义的项目名称,命令实践之后,会在此时此刻目录生成一个以该名称命名的品种文件夹

亚洲必赢官网 5

模板进程

安插完结后,能够观望目录下多出了贰个项目文件夹,里面便是 vue-cli
创制的2个依照 webpack 的 vue.js 项目

接下来进入项目目录(cd Vue-Project),使用 cnpm 安装信赖

cnpm install

接下来运转项目

npm run dev

比如浏览器展开之后,未有加载出页面,有十分大可能率是本地的 8080
端口被私吞,要求修改一下配置文件 config>index.js

亚洲必赢官网 6

转移配置

建议将端口号改为不常用的端口。别的作者还将 build 的路线前缀修改为 ‘ ./
‘(原本为 ‘ / ‘),是因为包装之后,外部引进 js 和 css 文件时,如若路线以
‘ / ‘
开端,在该地是心有余而力不足找到相应文件的(服务器上没难题)。所以1旦要求在地方张开包装后的公文,就得修改文件路线。

设置的主意这里不提了,网络找一找,教程许多。

 伍.webpack中alias配置中的“@”是怎么看头?

如题所示,build文件夹下的webpack.base.conf.js

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  }

里头的@的情致是:
只是一个外号而已。这里安装小名是为了让持续引用的地点压缩路线的复杂度。

//例如
src
- components
  - a.vue
- router
  - home
    - index.vue


index.vue 里,正常引用 A 组件:

import A from '../../components/a.vue'

如果设置了 alias 后。
alias: {
 'vue$': 'vue/dist/vue.esm.js',
 '@': resolve('src')
}

引用的地方路径就可以这样了

import A from '@/components/a.vue'

这里的 @ 就起到了【resolve('src')】路径的作用。

1.安装swiper,修改package.json中的亚洲必赢官网 7,在那个目的中增多“swiper”
: “^三.0.0”
注意这里是您想用的swiper插件版本号,能够去GitHub查看版本号,这些’^’是超乎等于那些版本的意味。

(四)打包上线

友善的类型文件都亟待停放 src 文件夹下

花色支出到位现在,能够输入 npm run build 来进展打包工作

npm run build

装进实现后,会转移 dist
文件夹,假如已经修改了文本路线,能够一贯打开当地文件查看

类型上线时,只需求将 dist 文件夹放到服务器就行了。

【亚洲必赢官网】vue轮播组件及去掉路由,vuejs编写一个excel转json的工具。设置好了足以看一下nodejs、vuejs和express的版本号:

 6.webpack proxyTable 代理跨域

webpack 开荒境况能够使用proxyTable
来代理跨域,生产条件的话能够依靠各自的服务器实行配置代理跨域就行了。在我们的档案的次序config/index.js
文件下得以见到有三个proxyTable的天性,咱们对其简要的改写

proxyTable: {
      '/api': {
        target: 'http://api.douban.com/v2',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

那样当大家访问localhost:8080/api/movie的时候
其实大家走访的是http://api.douban.com/v2/movie诸如此类便高达了一种跨域请求的方案。

本来大家也足以依据具体的接口的后缀来合营代理,如后缀为.shtml,代码如下:

proxyTable: {
    '**/*.shtml': {
        target: 'http://192.168.198.111:8080/abc',
        changeOrigin: true
    }
}

可参考地址:

webpack
前后端分离开拓接口调节和测试消除方案,proxyTable消除方案
http-proxy-middleware

二.假使您在webstorm中期维修改了安排文件,那么会报告你更新npm install
,你更新就好了,假如退步了,那么提议你利用命令窗口去创新,使用cnpm
install
,这么些命令你能够通晓地见到本身的信赖性包是稍微个,好了会有对勾的雪青的。

(伍)项目解析

亚洲必赢官网 8

七.什么样在 vue 项目太守确地引用 jquery 和 jquery-ui的插件

选拔vue-cli创设的vue项目,webpack的配备文件是分散在无数地方的,而笔者辈须求修改的是build/webpack.base.conf.js,修改两处的代码

// 在开头引入webpack,后面的plugins那里需要
var webpack = require('webpack')
// resolve

module.exports = {
   // 其他代码...
   resolve: {
      extensions: ['', '.js', '.vue'],
      fallback: [path.join(__dirname, '../node_modules')],
      alias: {
          'src': path.resolve(__dirname, '../src'),
          'assets': path.resolve(__dirname, '../src/assets'),
          'components': path.resolve(__dirname, '../src/components'),

          // webpack 使用 jQuery,如果是自行下载的
          // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
          // 如果使用NPM安装的jQuery
          'jquery': 'jquery' 
      }
   },

   // 增加一个plugins
   plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

   // 其他代码...
}

如此那般就能够精确的行使jQuery了,比方笔者要引进Bootstrap,我们在vue的入口js文件src/main.js初步参加

// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'

如此Bootstrap就不易的被引述并创设。
在举例动用toastr零件,只必要在急需的地点import进入,只怕全局引进css在急需的地方引用js,然后直接行使

// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'

toastr.success('Hello')

参考:

  • Managing Jquery plugin dependency in
    webpack

  • 怎么样在vue项目太傅确地引用jquery和jquery-ui的插件

三.在src
下新建1个文件夹common,用来存放在大家的集体组件,header组件,footer组件也足以运用在此地,然后新建贰个swiper.vue文件,文件名首字母大写,最好使用英文,假设接纳webstorm咱们能够在“setting”中新建三个vue类型的沙盘文件,这样自动生成好vue文件的模版,格外有利。

1、 index.html——[主页]

index.html如其余html同样,但貌似只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件来填充

亚洲必赢官网 9

index.app

贰.行使vuejs创设3个带webpack的品种

vue-cli webpack全局引进jquery

1.首先在package.json里加入,

dependencies:{
 "jquery" : "^2.2.3"
}

然后 npm install

2.在webpack.base.conf.js里加入

var webpack = require("webpack")

三.在module.exports的最终进入

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
 })
]

肆.然后一定要双重 run dev

5.在main.js 引入就ok了

import $ from 'jquery'

参考:
vue-cli怎么引进jquery

4.编辑大家swiper的着力代码

2、main.js——[入口文件]

main.js主借使引进vue框架,根组件及路由设置,并且定义vue实例,下图中的

1>router就是安装路由器
②>template:”<App/>”便是设置#app的沙盘为<App></App>
叁>components:{App}就是引进的根组件App.vue

末代还是可以引入插件,当然首先得设置插件。

亚洲必赢官网 10

main.js

创设命令: vue init webpack developer_tools

在.vue文件中引进第2方非NPM模块

var Showbo = require("exports?Showbo!./path/to/showbo.js");

参考:
exports-loader

 1 <template>
 2   <div class="swiper-container" :id="swiperId">
 3     <div class="swiper-wrapper">
 4       <div  v-bind:key="index" v-for="(item,index) in swiperD" class="swiper-slide swiper-slide-next" @click="slideTo(item.url)">
 5         <img :src="item.imgHref" />
 6       </div>
 7     </div>
 8     <div class="swiper-pagination"></div>
 9   </div>
10 </template>
11 
12 <script>
13 import Swiper from 'swiper'
14 
15 export default {
16   props: [ 'swiperId', 'swiperD' ],
17   data () {
18     return {
19 
20     }
21   },
22   mounted () {
23     this.sw()
24   },
25   methods: {
26     sw () {
27       let that = this
28       // eslint-disable-next-line
29       let lunbo = new Swiper('#' + that.swiperId, {
30         pagination: '.swiper-pagination',
31         paginationClickable: true,
32         longSwiperRatios: 0.3,
33         setWrapperSize: true,
34         autoplay: 3000,
35         autoplayDisableOnInteraction: false,
36         loop: true
37       })
38     },
39     slideTo (url) {
40       console.log(url, window)
41       window.location.href = url
42     }
43   }
44 }
45 </script>
46 
47 <style>
48   @import url(./swiper.min.css);
49   .swiper-container{
50     padding-top:2.45rem;
51     min-height:150px;
52   }
53   .swiper-slide{
54     width:100%
55   }
56   .swiper-slide img{
57     width:100%;
58     display: block;
59   }
60 </style>
3、App.vue——[根组件]

1个vue页面平时由三有的构成:模板(template)、js(script)、样式(style)

亚洲必赢官网 11

App.vue

【template】
当中模板只可以分包二个父节点,也正是说顶层的div只好有三个(比方下图,父节点为#app的div,其尚未兄弟节点)
<router-view></router-view>是子路由视图,后边的路由页面都显得在此间
打多个比如吧,<router-view>类似于3个插槽,跳转某些路由时,该路由下的页面就插在那一个插槽中渲染突显

【script】
vue日常用es陆来写,用export
default导出,其下部能够分包数据data,生命周期(mounted等),方法(methods)等,具身体语言法请看vue.js文档,在后边笔者也会经过例子来验证。

【style】
体制经过style标签<style></style>包裹,默许是震慑全局的,如需定义作用域只在该器件下起成效,需在标签上加scoped,<style
scoped></style>
如要引进外部css文件,首先需给品种安装css-loader信赖包,展开cmd,进入项目目录,输入npm
install
css-loader,回车。安装到位后,就能够在style标签下import所需的css文件,举例:

<style>

  import './assets/css/public.css'

</style>

那般,我们就足以把style下的体制封装起来,写到css文件夹,再引进到页面使用,整个vue页面也看起来更简单。

新建进度中供给填写小编名称、单元测试和局地安排,按需选取就能够了,那是自家创建好的截图:

vue-cli引进外部文件

webpack.base.conf.js 中添加externals

亚洲必赢官网 12

externals 中 swiper 是键,对应的值一定的是插件 swiper.js 所定义的变量
Swiper :

亚洲必赢官网 13

亚洲必赢官网 14

从此未来再在根目录下的index.html文件里引进文件:<script src="static/lib/swiper.js"></script>
那标准就足以在需求用到swiper.js的文本里到场那行代码:import Swiper from 'swiper',这样就能够健康使用了。
参考:

留神这里的引入swiper.min.css必要引进,去掉这里的scoped,不然引用组件的运用样式不起成效

4、 router——[路由配置]

router文件夹下,有贰个index.js,即为路由布置文件

亚洲必赢官网 15

router

这里定义了门道为’/’的路由,该路由相应的页面是Hello组件,所以当我们在浏览器url访问http://localhost:8080/\#/时就渲染的Hello组件
看似的,大家得以设置七个路由,‘/index’,’/list’之类的,当然首先得引进该零件,再为该零件设置路由。
如上正是本文的全部内容,希望对大家的就学抱有帮助,也意在我们多多支持脚本之家。

亚洲必赢官网 16

 8.vue和mintui-Loadmore结合贯彻下拉刷新,上拉加载 (待优化)

mintui是饿了么共青团和少先队针对vue开采的活动端组件库,方便达成移动端的一些功能,这里只用了Loadmore作用完毕活动端的上拉分页刷新,下拉加载数据.
mintui官网:

<template>  
  <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">  
    <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">  
      <ul class="list" v-for="(val, key) in pageList">  
        <li>  
          <div>我是小11</div>  
          <div>我是小11</div>  
        </li>  
      </ul>  
    </v-loadmore>  
  </div>  
</template>  
<script>  
  import {Loadmore} from 'mint-ui';  
  export default {  
    data:function() {  
      return {  
        searchCondition:{  //分页属性  
          pageNo:"1",  
          pageSize:"10"  
        },  
        pageList:[],  
        allLoaded: false, //是否可以上拉属性,false可以上拉,true为禁止上拉,就是不让往上划加载数据了  
        scrollMode:"auto" //移动端弹性滚动效果,touch为弹性滚动,auto是非弹性滚动  
      }  
    },  
    components: {  
      'v-loadmore':Loadmore  // 为组件起别名,vue转换template标签时不会区分大小写,例如:loadMore这种标签转换完就会变成loadmore,容易出现一些匹配问题  
                              // 推荐应用组件时用a-b形式起名  
    },  
    mounted(){  
      this.loadPageList();  //初次访问查询列表  
    },  
    methods: {  
      loadTop:function() { //组件提供的下拉触发方法  
        //下拉加载  
        this.loadPageList();  
        this.$refs.loadmore.onTopLoaded();// 固定方法,查询完要调用一次,用于重新定位  
      },  
      loadBottom:function() {  
        // 上拉加载  
        this.more();// 上拉触发的分页查询  
        this.$refs.loadmore.onBottomLoaded();// 固定方法,查询完要调用一次,用于重新定位  
      },  
      loadPageList:function (){  
          // 查询数据  
        this.api.PageList(this.searchCondition).then(data =>{  
          // 是否还有下一页,加个方法判断,没有下一页要禁止上拉  
          this.isHaveMore(data.result.haveMore);  
          this.pageList = data.result.pageList;  
          this.$nextTick(function () {  
            // 原意是DOM更新循环结束时调用延迟回调函数,大意就是DOM元素在因为某些原因要进行修改就在这里写,要在修改某些数据后才能写,  
            // 这里之所以加是因为有个坑,iphone在使用-webkit-overflow-scrolling属性,就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果,  
            // 花了好久才解决这个问题,就是用这个函数,意思就是先设置属性为auto,正常滑动,加载完数据后改成弹性滑动,安卓没有这个问题,移动端弹性滑动体验会更好  
            this.scrollMode = "touch";  
          });  
        });  
      },  
      more:function (){  
          // 分页查询  
        this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;  
        this.api.loadPageList(this.searchCondition).then(data=>{  
          this.pageList = this.pageList.concat(data.result.pageList);  
          this.isHaveMore(data.result.haveMore);  
        });  
      },  
      isHaveMore:function(isHaveMore){  
        // 是否还有下一页,如果没有就禁止上拉刷新  
        this.allLoaded = true; //true是禁止上拉加载  
        if(isHaveMore){  
          this.allLoaded = false;  
        }  
      }  
    }  
  }  
</script>  

PS:有个坑一定要小心正是注释里说的HTC里loadmore和-webkit-overflow-scrolling属性争持无法上拉难题

可参考别的一个插件,未有选拔过,《简单利落且庞大的Vue下拉刷新组件:vue-pull-to》

伍.施用组件

5、别的零件

举例现成组件footer.vue,初稿地址

<template>
    <div class="footer fixed">
        <ul>
            <li><router-link to='/'>首页</router-link></li>
            <li><router-link to='/manage'>人员管理</router-link></li>
        </ul>
    </div>
</template>

<style scoped>
    li a{display: inline-block; width: 100%; height:100%;}
    .footer{width:100%; height:50px; bottom:0;}
    ul{display: flex; height:100%; line-height:50px;}
    ul li{flex: 1; background-color:#f1f1f1;}
    .isIndex li:first-child{background-color:#d3d3d3;}
    .isIndex li:first-child a{color:#41b883;}
    .isManage li:last-child{background-color:#d3d3d3;}
    .isManage li:last-child a{color:#41b883;}
</style>

即使在其它页面中有选择到该器件能够如下:

<template>
    <div>
        欢迎来到人员管理系统
        <footer-nav v-bind:class="{'isIndex':isNowPage}"></footer-nav>
    </div>
</template>

<script>
    import FooterNav from '../../components/footer.vue'
    export default{
        components: {
            FooterNav
        },
        data(){
            return{
                isNowPage: true
            }
        }
    }
</script>

(壹)引进组件 import FooterNav from ‘../../components/footer.vue’

(二)局地注册 注意写在export
default内部,components:{FooterNav},该写法为es陆写法阮一峰es6教程,将视图中的使用的零件和有关数据对外开放,在里头vue-loader会举行有关操作的拍卖

(三)使用组件 <footer-nav></footer-nav>
注意命名,驼峰法定义的零部件FooterNav需在选拔时用短横线连接<footer-nav>

在意:相对路线中./为当下目录../为上级目录

 

九.在vue+webpack实际支出中出现多少个或七个菜单公用三个零部件的缓和方案

在vue的实际上支出中往往会遇到公用2个组件的标题,举例有三个美食指南中的多个开关,点击每种开关调用的是同3个零件,其内容是依照路由的参数的分裂来呼吁例外的剧情。

第2步,首先新建三个vue+webpack+vuecli的demo,如下操作:

大局安装vue-cli,vue-cil是vue的脚手架工具,安装命令:

npm install -g vue-cli

第三步,进入到工程目录中,创设叁个vuedemo的公文夹工程,如下两步操作:

cd vue_test_project //进入vue_test_project目录下
vue init webpack vuedemo //在vue_test_project目录下创建一个vuedemo工程

输入这几个命令之后,会晤世一些提醒,是什么不用管,一直按回车就能够。

其三步,如下操作:

cd vuedemo
npm install

推行npm
install必要一些日子,因为会从服务器上下载代码啦之类的。并且在实行过程中会有一些警告新闻。不用管,等着便是了。要是长日子未有响应,就ctrl+c悬停掉,然后再进行一次就能够。

末段一步,操作如下:

npm run dev

在运作了npm run
dev之后,会自动张开五个浏览器窗口,就足以看来实际的效应了。那么些demo就创办好了。未来就在这些demo中增多一些剧情,修改成如下:

 亚洲必赢官网 17

修改HelloWorld.vue的内容为如下:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <div class="btn">
         <router-link :to="{name:'content',params:{differId:'con1'}}">内容按钮1</router-link>
         <router-link :to="{name:'content',params:{differId:'con2'}}">内容按钮2</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

路由router下的index.html的修改为如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import content from '@/components/conDetail'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children:[
          {name:'content',path:'content/:differId',component:content}
      ]
    }
  ]
})

现行反革命创立3个conDetail.vue了,如下:

<template>
    <div class="same">
        这个是相同的内容
        <div class="conlist">
            <template v-for="item in items">
                <p>{{item.con}}</p>
            </template>
        </div>
    </div>
</template>

<script>
export default {
  name: 'conDetail',
  data () {
    return {
      msg: '',
      differIdType:'',
      conlist:[
          {'con':'这是第一个内容按钮的内容1'},
          {'con':'这是第一个内容按钮的内容2'}
      ],
      items:[], 

    }
  },
  mounted(){
          this.differIdType = this.$route.params.differId == 'con1' ? '0' : '1';
          if(this.differIdType == 0){
              this.items = this.conlist;
          }else{
              this.items = [];
          }
  },
  watch:{
      $route:function(to,from){
          this.differIdType = to.params.differId == 'con1' ? '0' : '1'; 
          if(this.differIdType == 0){
              this.items = this.conlist;
          }else{
              this.items = [];
          }    
      }
  }

}
</script>

<style>
</style>

结果就是,当点击内容按键一,出现了目的的内容,点击内容按钮2,出现相应的剧情。当然作者那儿写的是点击按键二的时候,其items的原委为空数组。那儿也使用了$route的监听。

复用组件时,想对路由参数的变型作出响应的话,你能够差不多地
watch(监测变化) $route 对象:

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

只怕应用 2.二 中引进的 beforeRouteUpdate
守卫:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

详尽驾驭路由相关的源委,查看官方网站:

导入组件

叁.进去项目路径,使用 npm install 安装项目依赖,很珍视

十.vue2.x父亲和儿子组件以及非老爹和儿子组件之间的通信

import Swipers from '../common/Swiper'

模板中引入

<Swipers swiperId="lunbo" :swiperD="swipers"></Swipers>
主要使用swiperId必须要传入, swiperD是我们的数据源。
6.篇后福利,去掉路由中的#
在router的index.js中使用

mode: 'history',
7.es语法中未使用的变量去掉语法检测:

// eslint-disable-next-line
8.GitHub链接地址:喜欢的记得star哈。
9.7天vue入门资料,不定期更新,喜欢的请加微信预定(xingguangbi,6块钱一份,需要的来)

作者习于旧贯使用简写命令npm i 来设置重视

壹.父零部件传递数据给子组件

父组件数据怎么样传递给子组件呢?能够透过props属性来促成

父组件:

<parent>
    <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>

data(){
    return {
        msg: [1,2,3]
    };
}

子组件通过props来接收数据:

方式1:

props: ['childMsg']

方式2 :

props: {
    childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告
}

方式3:

props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}

这样吧,就贯彻了父组件向子组件传递数据.

命令:npm i

二.子组件与父组件通信

子组件:

<template>
    <div @click="up"></div>
</template>

methods: {
    up() {
        this.$emit('fun','这是一段内容'); //主动触发fun方法,'这是一段内容'为向父组件传递的数据
    }
}

父组件:

<div>
    <child @fun="change" :msg="msg"></child> //监听子组件触发的fun事件,然后调用change方法
</div>
methods: {
    change(msg) {
        this.msg = msg; 
    }
}

安装进度要求等几分钟。安装好了的截图如下:

三.非父亲和儿子组件通讯

若果一个零件不是父亲和儿子组件那么怎么着通信呢?这时能够经过eventHub来实现通讯.
所谓eventHub正是创办3个事变宗旨,也等于中间转播站,能够用它来传递事件和收受事件.

let Hub = new Vue(); //创建事件中心

组件1触发:

<div @click="eve"></div>
methods: {
    eve() {
        Hub.$emit('change','hehe'); //Hub触发事件
    }
}

组件2接收:

<div></div>
created() {
    Hub.$on('change', () => { //Hub接收事件
        this.msg = 'hehe';
    });
}

 可参考:vue非老爹和儿子组件怎么开始展览通讯

亚洲必赢官网 18

1壹.vue档案的次序中在选拔vue-router切换页面包车型地铁时候滚动条怎么着自动滚动到顶部?

偶然大家供给页面滚动条滚动到某一定位的职位,一般接纳Window scrollTo() 方法。

语法正是:scrollTo(xpos,ypos)

xpos:必需。要在窗口文档显示区左上角展现的文书档案的
x 坐标。

ypos:必需。要在窗口文档呈现区左上角展现的文档的
y 坐标。

例如滚动内容的坐标地点100,500:

window.scrollTo(100,500);

好了,那么些scrollTop那儿只是简介一下,下边大家介绍下veu-router中的滚动行为。

接纳前端路由,当切换到新路由时,想要页面滚到顶部,也许是保险原来的滚动地方,就如重新加载页面那样。
vue-router 能做到,而且越来越好,它令你能够自定义路由切换时页面怎么滚动。

只顾: 这一个功用只在 HTML5 history
情势下可用。

当创立2个 Router 实例,你能够提供二个
scrollBehavior 方法:

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 方法接收 tofrom 路由对象。第二个参数
savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退
按键触发) 时才可用。

其壹措施重临滚动地点的靶子音信,长这么:

  • { x: number, y: number }
  • { selector: string, offset? : { x: number, y: number }} (offset
    只在 2.6.0+ 支持)

假定回去二个 falsy (译者注:falsy 不是
false,参考这里)的值,或然是1个空对象,那么不会时有发生滚动。

举例:

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

对于全部路由导航,轻松地让页面滚动到顶部。

返回 savedPosition,在按下 后退/前进
按键时,就能像浏览器的原生表现那样:

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如若您要效仿『滚动到锚点』的作为:

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

大家还足以应用路由元消息越来越细颗粒度地调控滚动。

 routes: [
    { path: '/', component: Home, meta: { scrollToTop: true }},
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
  ]

完全的事例:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = {
  template: `
    <div>
      bar
      <div style="height:500px"></div>
      <p id="anchor">Anchor</p>
    </div>
  `
}

// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    // savedPosition is only available for popstate navigations.
    return savedPosition
  } else {
    const position = {}
    // new navigation.
    // scroll to anchor by returning the selector
    if (to.hash) {
      position.selector = to.hash
    }
    // check if any matched route config has meta that requires scrolling to top
    if (to.matched.some(m => m.meta.scrollToTop)) {
      // cords will be used if no selector is provided,
      // or if the selector didn't match any element.
      position.x = 0
      position.y = 0
    }
    // if the returned position is falsy or an empty object,
    // will retain current scroll position.
    return position
  }
}

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  scrollBehavior,
  routes: [
    { path: '/', component: Home, meta: { scrollToTop: true }},
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Scroll Behavior</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/foo">/foo</router-link></li>
        <li><router-link to="/bar">/bar</router-link></li>
        <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

在网络查了弹指间,网上好友说还是能尝试在main.js入口文件合作vue-router写那么些

router.afterEach((to,from,next) => {
    window.scrollTo(0,0);
});

 

1二.vue自定义全局组件并经过全局方法 Vue.use() 使用该器件

4.选取npm run build 命令编译项目

简介

Vue.use( plugin ):安装 Vue.js
插件。假使插件是一个目标,必须提供 install
方法。即使插件是三个函数,它会被视作 install 方法。install 方法将被当做
Vue 的参数调用。

当 install 方法被同贰个插件多次调用,插件将只会被安装2回。

Vue.js 的插件应当有贰个当众方法 install 。那个法子的第四个参数是 Vue
构造器,第二个参数是四个可选的取舍对象:

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

透过全局方法 Vue.use() 使用插件:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

也得以流传三个精选对象:

Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止多次登记同样插件,届时只会登记2遍该插件。

Vue.js 官方提供的一些插件 (比方 vue-router) 在检验到 Vue
是可访问的全局变量时会自动调用 Vue.use()。不过在诸如 CommonJS
的模块意况中,你应有平昔显式地调用 Vue.use()

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

编写翻译结果如下:

实例:落成二个children组件

在main.js中运用该零件的方法:

import  childModule from './components/children'
Vue.use(childModule)

组件文件夹的目录结构如下:

|-components
  |-children
    |-index.js 导出组件,并且install
    |-children.vue (定义自个儿的机件模板)

children.vue代码如下:

import childrencomponent from './children.vue'
const childrenMo = {
    install:function(Vue){
        Vue.component('childModule',childrencomponent)
    }
}
export default childrenMo

 那样就落到实处了七个通过vue.use调用多个大局组件。

亚洲必赢官网 19

一三.IE九报vuex requires a Promise polyfill in this browser难点消除

因为运用了 ES六 中用来传递异步音讯的的Promise,而IE低版本的浏览器不扶助。

如图所示:

亚洲必赢官网 20

解决措施
首先步: 安装 babel-polyfill 。
babel-polyfill能够萧规曹随ES陆使用的情状,能够动用ES陆的装有新办法

npm install –save babel-polyfill

第二步: 在 Webpack/Browserify/Node中使用

在webpack.config.js文件中

module.exports = {
    entry: {
        app: './src/main.js'
    }
}

替换为:

module.exports = {
    entry: {
        app: ["babel-polyfill", "./src/main.js"]
    }
};

 

1肆.经过webpack+vue+vueRouter+vuecli的布局文件package.json创立2个新的项目

1旦是大约通过package.json来成立2个项目,只须求施行npm install

首先,我们和好得手动创制2个webpack+vue+vueRouter+vuecli工程,实施下边:
如:
新建二个vue项目,创立二个依照”webpack”的品种,项目名字为vuedemo:

$ vue init webpack vuedemo

设置到位后跻身工程名称再根据原来项目标配备文件开始化

$ cd vuedemo
$ npm install

亚洲必赢官网,而是出于在新建的时候对eslint的采用中甄选了Yes,所以前边遵照安插package.json的时候,开掘并未有eslint-friendly-formatter模块,由于原先的工程应该未有安插这几个,所以那时候须要设置下,如下代码:

npm i -D eslint eslint-friendly-formatter

模块地址:

设置后实行:npm run dev意识运转起来的页面未有运行起来,原因是依然以此eslint引起的。

出错消息为:

These relative modules were not found:
*/build/dev-client in multi ./build/dev-client ./src/main.js,
*./src/main.js in multi ./build/dev-client ./src/main.js

原因如下:
webpack.base.conf.js里面,脚手架本来就有 js的编写翻译模块:

 {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      }

大家必要注释掉那段代码:

//    {
//      test: /\.(js|vue)$/,
//      loader: 'eslint-loader',
//      enforce: 'pre',
//      include: [resolve('src'), resolve('test')],
//      options: {
//        formatter: require('eslint-friendly-formatter')
//      }
//    },

原因就是引致重复编写翻译,所以应该就有三个main.js文件。所以不用重现相称规则就能够。
下一场运营npm run dev可以了。
貌似难题:vue-cli安装到位以往,命令行npm run
dev没不平日,但webstorm报错

五.采取npm run start 命令运转品种

1五.在main.js中监听微信再次来到按键的操作,让其回来不了

if(from.name == 'staffInfo' && to.name == 'Login'){
    next({path:'/staffInfo',query:{redirect:from.fullPath}});
}else if(from.name == 'acountFill' && to.name == 'Login'){
    next({path:'/acount/acountFill',query:{redirect:from.fullPath}});
}

 最新更新于2018/02/二陆

运作命令截图:

亚洲必赢官网 21

此刻会活动打开运转网页,网页内容如下:

亚洲必赢官网 22

 

 

7.使用express generator生成器生成后端服务框架

(1)使用命令:express server 引进express 

推行后的截图:

亚洲必赢官网 23

(二)进入生成的server目录,使用npm i 命令安装express的依赖

亚洲必赢官网 24

 

(三)运营express,然后访问本机的2000端口,就足以见到express页面了:

运行express:

亚洲必赢官网 25

用浏览器访问 
,就足以看看express运营页面了:

亚洲必赢官网 26

 

 

8.安装ejsExcel模块

前边用过ejsExcel插件,作用很强大。那是它的hithub地址:

安装到支付目录里面,安装命令: npm i ejsexcel

亚洲必赢官网 27

 

 玖.使用pm二插件运维项目

(1)开垦格局下,修改文件后,使用npm run dev
就能够重新启航项目。不过每一次修改后都要输入一回命令,很麻烦,所以大家应用node过程管理器pm二来运营项目,那样每一遍修改后,不用手动运转项目,pm二会自动试行运行命令。

pm2的介绍和动用方法得以参照那个页面:

pm二的安装命令如下:npm i pm2 -g

设置好将来能够查阅一下pm二版本:

亚洲必赢官网 28

(2)运转项目时用到的下令npm run start 和 npm run dev
在类型的配备文件package.json中有定义:

亚洲必赢官网 29

 

能够看来,使用dev 和start 运维项目,实践的是呼应的js文件。

(叁)分局方的描述,使用pm二来运行项目:

命令:pm2 start build/dev-server.js –watch

启航后pm2会彰显档期的顺序的新闻(这里一度用 pm二 start server/bin/www –watch
命令运营了express,所以见到了 www的新闻):

亚洲必赢官网 30

 

(四)测试一下更改文件后,pm二时候会自行重启项目:

新建一个名字为“Pm二Test  ”的vue 组件:

亚洲必赢官网 31

 

(5)将以此组件出席到router中:

亚洲必赢官网 32

 

(6)直接访问新添长的页面pm二:

亚洲必赢官网 33

能够观望,pm二组件能够访问到,表明修改文件后,pm贰会自动帮大家重启项目。

 10.利用webstorm调节和测试项目

编制程序进程中会平时debug,单靠打印船到江心补漏迟,所以须求打断点调节和测试。这里大家布署下webstorm,以便调节和测试。

(1)按图中所示的各样,配置调节和测试音讯,然后点击OK

亚洲必赢官网 34

(2)配置完调节和测试新闻后,就能够打断点调试了:

留神,运营调节和测试在此以前须要关闭pm2,不然会产生文件访问争持,关闭pm2的吩咐如下:

pm2 stop server/bin/www –watch

 

亚洲必赢官网 35

 

(三)这里调节和测试的是express,调节和测试配置的js文件是 server/bin/www.js
文件,配置图如下:

亚洲必赢官网 36

 

搭建好开垦条件后,就足以喜出望外地编写项目了

 

网站地图xml地图