详解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实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
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(2)
2006/10/09 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php防止sql注入代码实例
2013/12/18 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
js post提交调用方法
2014/02/12 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
js实现无缝滚动图
2017/02/22 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
使用python实现kNN分类算法
2019/10/16 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
学院领导推荐信
2013/10/30 职场文书
学生偷窃检讨书
2014/09/25 职场文书
党员评议个人总结
2014/10/20 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
企业培训简报范文
2015/07/20 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
Redis入门基础常用操作命令整理
2022/06/01 Redis