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

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. 解决MySQL 8.0数据库出现乱码的问题

    1.在MySQL 8.0的安装目录下创建一个my.ini文件(保存为utf8格式),然后写入以下内容: [mysql] # 设置mysql客户端默认编码 default-character-set=u ...

  2. java1.8新特性之stream

    什么是Stream? Stream字面意思是流,在java中是指一个来自数据源的元素队列并支持聚合操作,存在于java.util包中,又或者说是能应用在一组元素上一次执行的操作序列.(stream是一 ...

  3. Wpf 正常关闭程序 Gc 来不及回收？

    最近在使用Udp开发客户端,发现很长时间GC都无法回收UdpClient,所以我决定强制标记Gc,非常奇怪的是,毫无作用,在Windows任务管理器中,也看不见程序的身影.简单来说,gc是系统为你独立 ...

  4. Altium Designer PCB封装bug，元件焊盘位置偏移解决方法

    1.问题描述:在拖动几个电阻位置时,意外发现Altium designer20版本软件的一个bug——0805的电阻两焊盘位置发生了偏移,如下图所示. 2.解决办法: ①选中焊盘偏移的封装,右键剪切掉 ...

  5. 弹弹弹 打造万能弹性layout

    demo地址:https://github.com/cmlbeliever/BounceLayout 最近任务比较少,闲来时间就来研究了android事件传播机制.根据总结分析的结果,打造出万能弹性l ...

  6. 常见的DOS命令总结

    常用的内部命令有MD.CD.RD.DIR.PATH.COPY.TYPE.EDIT.REN.DEL.CLS.VER.DATE.TIME.PROMPT. 常用的外部命令有DELTREE.FORMAT.DI ...

  7. mysql 获取当前指定分钟的时间

    SELECT NOW(); MINUTE); 结果:

  8. java读取文件内容常见几种方式

    ①随机读取文件内容 ②以行为单位读取文件,常用于读面向行的格式化文件 ③以字符为单位读取文件,常用于读文本,数字等类型的文件 ④以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件 pa ...

  9. 一、HDFS 原理分析

    HDFS 全称 Hadoop Distribute File System,是 Hadoop 的一个分布式文件系统 一.HDFS 的系统结构 1.1 数据块 -- block 文件在 HDFS 上分块 ...

  10. Oracle SQLPlus导出数据到csv文件

    时不时地我们需要导出一些数据用作备份.查看报表等,如果用Sql Developer导出会非常慢.而用SqlPlus,则速度非常快. 准备SQL执行文件export.sql: set colsep , ...