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

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. 某科学的PID算法学习笔记

    最近,在某社团的要求下,自学了PID算法.学完后,深切地感受到PID算法之强大.PID算法应用广泛,比如加热器.平衡车.无人机等等,是自动控制理论中比较容易理解但十分重要的算法. 下面是博主学习过程中 ...

  2. Openwrt：基于MT7628/MT7688的PWM驱动

    前言 MT7628/MT7688的PWM驱动相关资料较少,官方的datasheet基本也是一堆寄存器,啃了许久,终于嚼出了味道.由于PWM存在IO口复用的问题,所以要提前配置好GPIO的工作方式,不然 ...

  3. JDBC04 PreparedStatement

    PreparedStatement类 存在预编译,用占位符去填参数(参数索引从1开始算),可以防止SQL注入 try { Class.forName("com.mysql.cj.jdbc.D ...

  4. [zoj3593]扩展欧几里得+三分

    题意:给一个数A,有6种操作,+a,-a,+b,-b,+(a+b),-(a+b),每次选择一种,用最少的次数变成B. 思路:由于不同的操作先后顺序对最后的结果没有影响,并且加一个数与减一个相同的数不能 ...

  5. 在微服务框架Demo.MicroServer中添加SkyWalking+SkyApm-dotnet分布式链路追踪系统

    1.APM工具的选取 Apm监测工具很多,这里选用网上比较火的一款Skywalking. Skywalking是一个应用性能监控(APM)系统,Skywalking分为服务端Oap.管理界面UI.以及 ...

  6. C++内存管理学习笔记（2）

    /****************************************************************/ /*            学习是合作和分享式的! /* Auth ...

  7. libevent到底是同步还是异步，是阻塞还是非阻塞

    应该从不同角度看libevent的同步/异步.阻塞/非阻塞: IO数量的角度:select出来之前,会阻塞在一个io上,处理完成后再阻塞在下一个io上:之后就是把所有的io fd拿过来,都不阻塞,一个 ...

  8. Python --函数学习1

    函数 -函数是代码的一种组织形式 -函数应该能完成一项特定的工作,而且一般一个函数完成一项工作 -函数的使用: 函数使用需要先定义 使用函数,俗称调用 pps:1.只是定义的话不会执行 2.def关键 ...

  9. app测试、web测试-怎么测？

    app测试 前言 看过许多大神对APP测试的理解,博主总结了一下我们平时测试APP应该注意的一些测试点并结合大神的理解,总结出这篇文章. 一.测试周期 测试周期一般为两周,根据项目情况以及版本质量可适 ...

  10. js中的小案例（一）

    效果图: html代码: <div id="date"> <p> <span id="prev">上一月</span& ...