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

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. python gdal 读取栅格数据

    1.gdal包简介 gdal是空间数据处理的开源包,其支持超过100种栅格数据类型,涵盖所有主流GIS与RS数据格式,包括Arc/Info ASCII Grid(asc),GeoTiff (tiff) ...

  2. [hdu3364]xor方程组消元

    题意:n个灯,m个开关,给定每个开关控制的灯,全部的灯初始时全部熄灭,开关按一下其所控制的灯的状态全部反转,开关最多只能按一下.问达到目标状态的方案数. 思路:xor方程组的模型. 1 2 3 4 5 ...

  3. 配置类为什么要添加@Configuration注解呢？

    配置类为什么要添加@Configuration注解呢? 本系列文章: 读源码,我们可以从第一行读起 你知道Spring是怎么解析配置类的吗? 推荐阅读: Spring官网阅读 | 总结篇 Spring ...

  4. （Python基础教程之十三）Python中使用httplib2 – HTTP GET和POST示例

    Python基础教程 在SublimeEditor中配置Python环境 Python代码中添加注释 Python中的变量的使用 Python中的数据类型 Python中的关键字 Python字符串操 ...

  5. PAT1027 Colors in Mars (20分) 10进制转13进制

    题目 People in Mars represent the colors in their computers in a similar way as the Earth people. That ...

  6. centos6 升级gcc 无法识别的命令行选项“-std=gnu++1y”的解决办法

    npm install 提示: 1.下载源文件,并安装: wget http://people.centos.org/tru/devtools-2/devtools-2.repo mv devtool ...

  7. python 调用ldap同步密码

    windows + python2.7 安装 python-ldap https://www.lfd.uci.edu/~gohlke/pythonlibs/#python-ldap 2.python ...

  8. ql的python学习之路-day13

    前言:本节主要学习模块 一.模块的定义 模块:本质是.py结尾的python文件(文件名:test.py,对应的模块是:test),用来从逻辑上组织python代码(变量.函数.类.逻辑,本质是实现一 ...

  9. Django之AJAX简单使用

    AJAX简介: AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

  10. Java的集合（一）

    转载:https://blog.csdn.net/hacker_zhidian/article/details/80590428 Java集合概况就三个:List.set和map list(Array ...