目录创建好之后，命令行输入

npm run dev

因为在配置文件config/index.js里：

dev: {

    env: require('./dev.env'),

    port: 8080,

    autoOpenBrowser: true,

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {},

    // CSS Sourcemaps off by default because relative paths are "buggy"

    // with this option, according to the CSS-Loader README

    // (https://github.com/webpack/css-loader#sourcemaps)

    // In our experience, they generally work as expected,

    // just be aware of this issue when enabling this option.

    cssSourceMap: false

  }

webpack会默认创建本地服务器监听8080端口，autoOpenBrowser为true，浏览器会自动打开，我一般会关掉，因为以后调试会运行很多次 npm run dev；

然后打开

下面看下几个主要的文件：

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>hello</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

index里面只有一个id为app的div，因为webpack会自动将js，css添加进去；

main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  template: '<App/>',

  components: { App }

})

这个文件，首先将vue，App（引入的component），router（配置路由）；

创建Vue实例然后将App组件以<App><App/>的方式放入index里id为app的元素里；

然后是App.vue

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <router-view></router-view>

  </div>

</template>

<script>

export default {

  name: 'app'

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

对vue组件不熟的可以去看官方文档，真的很详细；

在template中引入了 <router-view></router-view> 这代表路由，我们可以看下路由的配置；

router.js

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Hello',

      component: Hello

    }

  ]

})

这个官方文档讲得也很清楚，path写的是路径，这个文件的意思是当路径是"/"(即当前页面)时，引入组件Hello.vue;

对应App.vue就是打开首页的同时要引入Hello.vue；

当然在真正的项目中会有多个路由，只要在routes中多加介个配置就行了；

下面是我在项目中的router.js文件，注：引入组件文件的时候，一定要注册组件

import Vue from 'vue'

import Router from 'vue-router'

import goods from '../components/goods/goods'

import seller from '../components/seller/seller'

import ratings from '../components/ratings/ratings'

Vue.use(Router)

export default new Router({

  linkActiveClass:'active',

  routes: [

    {

      path: '/goods',

      component: goods

    },

     {

      path: '/seller',

      component: seller

    },

     {

      path: '/ratings',

      component: ratings

    },

    {

      path: '/',

      component: goods

    },

  ]

})

linkActiveClasss:当路由切换到当页时会自动给顶层元素分配一个class属性，可以去自定义它,如下：

另外webpack最大的优点之一就是他的热加载：当你修改文件后（除配置文件），webpack会自动编译，并刷新页面

如果出现错误会在上面显示，如果正常会显示如下：

webpack+vue2.0项目 （二）热加载，vue-router的更多相关文章

  1. webpack react基础配置二 热加载

    用到 webpack-dev-server  先安装,注意 装到全局 还是本项目我也没注意  因为之前一直报错,有很小可能是安装到本地解决了,或者是我网络问题: 装到全局:$ npm install ...

  2. webpack+vue2.0项目 （一） vue-cli脚手架

    很早以前就开始看vue2.0和webpack,但总是留不下深刻的印象,一直缺少一个可以贯通的项目,而且工作也没有时间,最近辞职在家,从网上找了个项目,写了大概八天,踩了无数的坑啊!! 下载的项目包括, ...

  3. 路由懒加载---Vue Router

    一.什么是懒加载? 懒加载也就是延迟加载或者按需加载,即在需要的时候进行加载. 二.为什么在Vue路由中使用懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常 ...

  4. webpack4.41.0配置二（加载器_url-loader/babel-loader/sass-loader）

    loader是webpack用来预处理源文件的,比如typesrcipt形式的文件最终都得转成浏览器可以执行的js文件 (注:以下的配置代码不一定与下方一摸一样,具体与官网上https://webpa ...

  5. webpack vue2.0项目配置文件详解

    const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('h ...

  6. webpack vue2.0项目脚手架生成的webpack文件

    var path = require('path') var utils = require('./utils') var config = require('../config') var vueL ...

  7. java的热部署和热加载

    ps:热部署和热加载其实是两个类似但不同的概念,之前理解不深,so,这篇文章重构了下. 一.热部署与热加载 在应用运行的时升级软件,无需重新启动的方式有两种,热部署和热加载. 对于Java应用程序来说 ...

  8. 原来热加载如此简单，手动写一个 Java 热加载吧

    1. 什么是热加载 热加载是指可以在不重启服务的情况下让更改的代码生效,热加载可以显著的提升开发以及调试的效率,它是基于 Java 的类加载器实现的,但是由于热加载的不安全性,一般不会用于正式的生产环 ...

  9. Node.js实现热加载

    不管是node.js原生开发,还是借助express,kora等框架开发node.js的情况下,在对代码做出更新后,都是需要重启已生效我们的文件的. 本文记录一次在原生node.js开发的时候,为项目 ...

随机推荐

  1. 一分钟html页面倒计时可精确到秒

    <!doctype html> <html> <head> <meta charset="utf-8"> </head> ...

  2. Java for 嵌套循环

    嵌套循环 可以是for循环 while循环也可以是do-while循环  这三着进行组合嵌套 循环思路:先执行外层循环,内层循环作为外层循环的循环体,直到内层循环执行完毕,再次计算外层循环,根据条件决 ...

  3. 玩好百家乐需要掌握些什么技巧和打法？来自ag老玩家的实战经验心得总结

    最近很多网友给我留言,说为什么学了很多技巧和打法这个游戏还是玩不好,坦白说,其实bjl想要玩得好,不是说你懂得多少技巧和掌握了多少种打法就可以的了,而是你要懂得如何把这些正确结合去运用,这些我之前都强 ...

  4. Kafka 的一些知识点整理【1】

    First: Kafka 是什么? Kafka 是一个发布订阅系统 最初是是LinkedIn 开发 最后交给Apache 开源组织 github地址:https://github.com/apache ...

  5. PROTEUS串口仿真遇到的BUG(转载)

    转载自:http://blog.csdn.net/viperchaos/article/details/6246419 串口通信设置的顺序非常重要,最好严格按照步骤来,在开启数据接受的使能之前最好一定 ...

  6. 生产者消费者问题中的同步机制JAVA设计和实现

    目录 问题描述 问题分析 利用记录型信号量解决 运行环境 实现思路 代码实现 运行截图 过程中出现的问题和注意点 利用AND信号集解决 运行环境 实现思路 代码实现 运行截图 问题描述 若干进程通过有 ...

  7. [hdu5316]线段树

    题意:给一个array,有两种操作,(1)修改某一个位置的值,(2)询问区间[L,R]内的最大子段和,其中子段需满足相邻两个数的位置的奇偶性不同 思路:假设对于询问操作没有奇偶性的限制,那么记录区间的 ...

  8. AVPlayer的使用+简单的播放器Demo

    学习内容 AVPlayer学习 几个播放器相关的类 AVPlayer.AVURLAsset.AVPlayerItem.AVPlayerLayer //控制播放器的播放.暂停.播放速度 @propert ...

  9. 【雕爷学编程】Arduino动手做（45）---红外避障传感器

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  10. bash leetcode

    拓展:grep 193.  ref: https://blog.csdn.net/yanglingwell/article/details/82343407 Given a text file fil ...