详解vue+vueRouter+webpack的简单实例


Posted in Javascript onJune 17, 2017

最近vue更新的2.0版本,唉,我是在2.0版本前学习的,现在更新了又要看一遍了,关键是我之前看了3个星期2.0就更新了,vux还没同步更新,导致我用vux时要将vue的版本降回1.x,vue-router也要降回1.0才能使用~~~所以今天就写一个单页的下方tabbar的实例来记录一下吧,也希望各位在用vue全家桶时少点坑吧,当然不是用vux= =…只是仿造而已

这里的demo我会使用vue2.0的simple-template作为脚手架,vue-router版本也是2.0的,如果想使用vux作为组件库的话,大家就降版本吧~哦对了,如果大家正式写项目的话,记得要用vuex,不是开玩笑,我之前写了个简单的单页应用就没用vuex也没用组件库都是手写,然后组件之间的通信各种烦,你能想象一直向上广播事件$boardCast之后,再一直向下分发 $emit的无语吗……到最后自己都乱了,所以不是自己写demo而是开始项目的话还是推荐使用vuex了,用过react的同学的话就知道了,vuex跟redux是一样的~只是一个用于vue,一个用于react而已.

好了,开始构建吧~

Prerequisites: Node.js (>=4.x, 6.x preferred) and Git.

前提当然是装了node且版本已经升级为6.x,在尤大大的vue-cli的使用教程中有说明的,对这里我们是采用自动化构建的方式创建配置模板

首先从零开始,打开打算创建的项目根目录,再打开git的命令行吧~

1、全局安装vue-cli脚手架

npm install -g vue-cli

2、初始化webpack+vue的脚手架模板,这里我是用的简化版模板,不带单元测试的~因为多出来的很多我看不懂……….简化版的我大概能看懂,也是我菜的原因= =…

vue init webpack-simple <project-name> 这里我定个名字就叫test吧

vue init webpack-simple test

3、按照步骤来就好

cd test

npm install 这里会安装babel、vue的加载器等各类依赖,这里要等一会,有点慢

npm run dev 这里跑一下本地文件,看看是否搭建完成,如果出现vue的页面就完毕了

4、安装vue-router与需要的组件库,这里我装一个饿了么的组件库ElementUI吧,地址http://element.eleme.io/,因为已经兼容了vue2.0的版本,所以暂时拿来用用吧~官方文档齐全,需要什么自己去看吧,我这里就简单用一点

npm install vue-router 
npm i element-ui -D

5、记得安装css的加载器,如果你是用less或者sass的话,自己对应装了添加到加载器就好
npm install style-loader css-loader 如果没错的话,你的加载器现在应该是这样的,最后在package.json里面依赖文件要加上element-ui

//package.json
"dependencies": {
 "element-ui": "^1.0.4",
 "vue": "^2.1.0"
 }
//webpack.config.js
module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
   // vue-loader options go here
  }
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
  },
  {
  test: /\.css$/,
  loader: 'style-loader!css-loader'
  },
  {//添上这条规则,这是elementUI要用到的
  test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  loader: 'file-loader'
  },
  {
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'file-loader',
  options: {
   name: '[name].[ext]?[hash]'
  }
  }
 ]
 }

6、分模块,写组件
下面先展示我的文件目录

test

dist 
build.js
node_modules 
…
src 
App.vue
discovery.vue
index.vue
info.vue
main.js
setting.vue
.babelrc
.gitignore
index.html
package.json
README.md
webpack.config.js
//App.vue(这里仿制vux的下方tabbar写了一个组件,所以有点多,代码有点烂,请原谅)
<template>
 <div id="app">
 <router-view></router-view>
 <div class="tabbar" @click="select">
  <router-link :class="{'selected':indexPage === 'index'}" to="/index">
  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_button.png" alt="">
  <label>主页</label>
  </router-link>
  <router-link :class="{'selected':indexPage === 'info'}" to="/info">
  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_msg.png" alt="">
  <label>信息</label>
  </router-link>
  <router-link :class="{'selected':indexPage === 'discovery'}" to="/discovery">
  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_article.png" alt="">
  <label>发现</label>
  </router-link>
  <router-link :class="{'selected':indexPage === 'setting'}" to="/setting">
  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_cell.png" alt="">
  <label>设置</label>
  </router-link>
 </div>
 </div>
</template>


<script>
 export default {
 name: 'app',
 data () {
  return {
  radio:'1',
  indexPage:'index'
  }
 },
 methods:{
  select(event){
  function findA(target){
   if(target.nodeName != 'A'){
   return findA(target.parentNode)
   }
   return target;
  }

  var modules = findA(event.target).lastElementChild.innerHTML;

  if(modules == '主页'){
   this.indexPage='index';
  }
  else if(modules == '信息'){
   this.indexPage='info';
  }
  else if(modules == '发现'){
   this.indexPage='discovery';
  }
  else if(modules == '设置'){
   this.indexPage='setting';
  }
  }
 }
 }
</script>

<style>
 html,body{
 margin:0;
 padding:0;
 }
 #app {
 font-family: 'microsoft yahei', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 }
 .tabbar{
 position: fixed;
 bottom:0;
 display: flex;
 width:100%;
 height:55px;
 flex-direction:row;
 background: rgba(247,247,250,.9);
 font-size:12px;
 }
 .tabbar:before{
 content: " ";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 1px;
 border-top: 1px solid #979797;
 color: #979797;
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: scaleY(.5);
 transform: scaleY(.5);
 background-color: white;
 }
 .tabbar a{
 flex:1;
 color: #888;
 }
 .tabbar a img{
 display: block;
 width:24px;
 height:24px;
 margin:3px auto;
 padding-top:5px;
 }

 .selected{
 color: #09bb07 !important;
 }

 h1, h2 {
 font-weight: normal;
 }

 ul {
 list-style-type: none;
 padding: 0;
 }

 li {
 display: inline-block;
 margin: 0 10px;
 }

 a {
 text-decoration: none;
 }
</style>
//index.vue(主页模块,套了一点elementUI,有点东西好看点= =..)

<template>
 <div>
  <h3>我是主页模块</h3>
  <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">处理中心</el-menu-item>
   <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
   </el-submenu>
   <el-menu-item index="3">订单管理</el-menu-item>
  </el-menu>
 </div>

</template>

<script>
 export default {
  methods:{
   handleSelect:function(key,keyPath){
    console.log(key,keyPath);
   }
  }
 }
</script>
//info.vue(主页模块,套了一点elementUI,有点东西好看点= =..)

<template>
 <h3>{{msg}}</h3>
 <div>
  <el-alert
    title="成功提示的文案"
    type="success">
  </el-alert>
  <el-alert
    title="消息提示的文案"
    type="info">
  </el-alert>
  <el-alert
    title="警告提示的文案"
    type="warning">
  </el-alert>
  <el-alert
    title="错误提示的文案"
    type="error">
  </el-alert>
 </div>
</template>

<script>
 export default {
  data(){
   return {
    msg:'我是信息模块'
   }
  }
 }
</script>
//discovery.vue(发现模块)

<template>
 <div>
  <h2>{{msg}}</h2>
  <el-steps :space="100" :active="active" finish-status="success">
   <el-step title="步骤 1"></el-step>
   <el-step title="步骤 2"></el-step>
   <el-step title="步骤 3"></el-step>
  </el-steps>

  <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
 </div>
</template>

<script>
 export default {
  data(){
   return {
    active:0,
    msg:'我是发现模块'
   }
  },
  methods:{
   next:function(){
    if(this.active++ > 2) this.active = 0
   }
  }
 }
</script>
//setting.vue(设置模块)

<template>
 <div class="block">
  <h3>{{msg}}</h3>
  <el-rate
    v-model="value2"
    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
    :allow-half="true">
  </el-rate>
  <span>{{value2}}</span>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value2: null,
    msg:'我是设置模块'
   }
  }
 }
</script>
//main.js(主文件,声明全局router)

import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
import index from './index.vue'
import info from './info.vue'
import discovery from './discovery.vue'
import setting from './setting.vue'

Vue.use(Router);
Vue.use(ElementUI);

const router = new Router({
 routes:[
 {
  path:'/',
  component:index
 },
 {
  path:'/index',
  component:index
 },
 {
  path:'/info',
  component:info
 },
 {
  path:'/discovery',
  component:discovery
 },
 {
  path:'/setting',
  component:setting
 }
 ]
});

new Vue({
  el: '#app',
  render: h => h(App),
 router:router
});

最后就是webpack的入口文件必然是要改成main.js的,出口文件的文件夹为dist,名字就你自己定了,在index.html里加上就好~具体可以在我的另一篇笔记”初识webpack “中有写过

最后npm run dev 查看效果就ok~如果想改绑定的端口号或者主机号,则在package.json中对应改就好

example:

"scripts": {
 "dev": "cross-env NODE_ENV=development webpack-dev-server --port 8181 --open --inline --hot",
 "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 }

其中端口号是dev中的 --port <port>,主机号则为--host <hostname/ip>就比如我这里则绑定的为8181端口。

最后给大家展示一下效果图吧~没看过vue-router的同学请自行看文档= =…我这里只是最基础的展示了而已

详解vue+vueRouter+webpack的简单实例 

http://localhost:8181/#/index

详解vue+vueRouter+webpack的简单实例 

http://localhost:8181/#/info

详解vue+vueRouter+webpack的简单实例 

http://localhost:8181/#/discovery

详解vue+vueRouter+webpack的简单实例 

http://localhost:8181/#/setting

其实都是一些很简单的代码和组件划分,大家应该看一看就明白的了,最后vux你快更新2.0吧555~不说了我去看vuex了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
js轮播图无缝滚动效果
Jun 17 #Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 #Javascript
vue-router单页面路由
Jun 17 #Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 #Javascript
JavaScript输入框字数实时统计更新
Jun 17 #Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 #Javascript
bootstrap paginator分页前后台用法示例
Jun 17 #Javascript
You might like
国外十大最流行的PHP框架排名
2013/07/04 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
培养自己的php编码规范
2015/09/28 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
react 生命周期实例分析
2020/05/18 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python打印不合法的文件名
2020/07/31 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
大学校庆策划书
2014/01/31 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
公司欠款证明
2015/06/24 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python