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

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. Coursera课程笔记----Write Professional Emails in English----Week 2

    Let's Start Writing (Week 2) Write Effective Subject Lines be BRIEF 50 characters or less = 5-7 word ...

  2. 01背包问题，dp和贪心解法（c++11）

    dp解法: 令dp[i]表示容量为i的背包所能得到的最大价值,考虑在当前物品集合中加入1个新考虑的物品i,则有如下状态转移方程:dp[j] = max(dp[j], dp[j - weight[i]] ...

  3. 实验三 UML建模工具的安装与使用

    一. 实验目的 1) 学习使用 EA(Enterprise Architect) 开发环境创建模型的一般方法: 2) 理解 EA 界面布局和元素操作的一般技巧: 3) 熟悉 UML 中的各种图的建立和 ...

  4. WriteUp_easy_sql_堆叠注入_强网杯2019

    题目描述 随便注 解题过程 查看源码,发现应该不适合sqlmap自动化注入,该题应该是让你手工注入: <!-- sqlmap是没有灵魂的 --> <form method=" ...

  5. spring mvc json返回防止乱码

    乱码问题 乱码一直是编程的常见问题,spring mvc 返回json数据时可能导致乱码,需要在controller中添加如下代码: @RequestMapping("/test" ...

  6. Hadoop CDH版本安装和启动（CentOS7）

    1.创建hadoop组和用户,useradd hadoop passwd hadoop groupadd hadoops usermod -G hadoops hadoop(将hadoop添加到had ...

  7. 开始写博客的第一天，如何用c实现“hello wolrd”

    “hello world” 应该是大多数人学习的第一个代码 那也就作为我第一篇博客的开端吧 实现的代码如下 #include <stdio.h> int main() { printf(& ...

  8. pyppteer下

    目录 启动pyppteer 切图 获取响应头,响应头状态,cookies 获取当前页面标题 获取页面html 第一种:获取整个页面html 第二种:只获取文本 注入JS,控制上下滚动 选择器 获取元素 ...

  9. php-fpm搜索php.ini很奇怪的一个现象

    php-fpm 找不到 php.ini phpinfo 或者 php -i 上来看,搜索的目录都是/usr/local/php/etc下,但是事实上并没用去找这个目录 bin/php --ini 来看 ...

  10. jQuery中prevAll得到的DOM元素顺序问题

    学习笔记,记录下学习中遇到的问题. 使用jQuery中的prevAll可以查找当前元素之前所有的同辈元素,但是却存在一个问题:得到的同辈元素的为正常顺序的反方向. 举个例子: <!doctype ...