demo结构

　　

　　webpack.config.js

var path = require('path');

// const { VueLoaderPlugin } = require('vue-loader');

// 通过node的模块操作，向外暴露一个配置对象

module.exports = {

    entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用webpack打包哪个文件

    output: {   // 出口

        path: path.join(__dirname, './dist'),

        filename: 'bundle.js'

    },

    module: {  //用于配置所有第三方模块加载器

        rules: [  //所有第三方模块的匹配规则

            // 首先安装loader: npm i style-loader css-loader -D, 然后配置

            { test:/\.css$/, use: ['style-loader','css-loader'] },

            // 首先安装loader: npm i url-loader file-loader -D, 然后配置

            {

                test:/\.(jpg|png|gif|bmp|jpeg)$/,

                use: ['url-loader']

                // limit单位byte，如果图片大于等于limit给定值，则不会被转为base64格式字符串

                // name=[name].[ext]:打包的图片原名相同

                // use: ['url-loader?limit=1000&name=[name].[ext]']

            },

            // 首先安装loader: npm i vue-loader vue-template-compiler -D, 然后配置

            { test: /\.vue$/, use: 'vue-loader' }

        ]

    },

    plugins: [

                // new VueLoaderPlugin()

             ],

};

　　

　　package.json

{

  "name": "webpack-demo",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "vue": "^2.5.2",

    "vue-router": "^3.0.1"

  },

  "devDependencies": {

    "css-loader": "^0.28.0",

    "file-loader": "^1.1.4",

    "style-loader": "^0.21.0",

    "url-loader": "^1.0.1",

    "vue-loader": "^13.3.0",

    "vue-template-compiler": "^2.5.2",

    "webpack": "^3.6.0"

  }

}

　　main.js

// 这是项目的入口js文件

// import $ from 'jquery';

import './css/common.css';

// 注意：在webpack中，使用下面这句导入vue，功能不完整，只提供runtime-only的方式，并没没有提供向网页中那样的使用方式

// import Vue from 'vue';

// 导入完整的vue

import Vue from '../node_modules/vue/dist/vue.js';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 导入App组件

import App from './App.vue';

// 默认webpack无法处理.vue文件，第一步安装第三方loader： npm i vue-loader vue-template-compiler -D

// 第二步：webpack.config.js配置 { test: /\.vue$/, use: 'vue-loader' }

import account from './components/account.vue';

import goodslist from './components/goodslist.vue';

var router = new VueRouter({

    routes: [

        {path: '/account', component: account},

        {path: '/goodslist', component: goodslist}

    ]

});

var vm = new Vue({

    el: '#app',

    data: {

        msg: 'hello vue'

    },

    // render：将App组件渲染到el指定的div#app中（div#app中其他内容被覆盖）

    render: c => c(App),

    router

});

　　index.html

<!DOCTYPE html>

<html>

<head>

    <title>标题</title>

    <meta charset="utf-8">

</head>

<body>

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

    <script type="text/javascript" src="../dist/bundle.js"></script>

</body>

</html>

　　App.vue

<template>

<div>

    <h1>App组件</h1>

    <router-link to="/account">Account</router-link>

    <router-link to="/goodslist">GoodsList</router-link>

    <router-view></router-view>

</div>

</template>

<script></script>

<style></style>

结合webpack使用vue-router的更多相关文章

  1. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  2. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  3. webpack构建vue项目（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  4. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  5. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  6. 使用Webpack加速Vue.js应用的4种方式

    Webpack是开发Vue.js单页应用程序的重要工具. 通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能. 其中介绍下面四种方式: 单个文件组件 优化Vue构建 浏览器 ...

  7. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  8. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  9. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  10. python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. 【FFMPEG】网络流媒体协议

    目录(?)[-] RTP RTCP SRTP SRTCP RTSP RTSP 和RTP的关系 SDP RTMPRTMPS mms HLS RTP           参考文档 RFC3550/RFC3 ...

  2. jquery validate 自定义校验方法

    1.引入JS jquery.min.js jquery.validate.min.js messages_zh.min.js 2.添加验证方法,第一个参数为验证方法的名称,第二个参数为验证方法. $. ...

  3. GITFLOW流程

    GITFLOW流程规范 GIT的使用非常的灵活,但是灵活就导致在使用的过程中有各种各样的情况,根据现有项目组的情况,使用GITFLOW流程规范作为项目开发流程规范. 该规范参考地址: 深入理解学习Gi ...

  4. P1216数字三角形

    这是USACO的一道记忆化搜索题,还记得原来学搜索就是被此所困. 给定n深的数,第i层有i个节点,存储有一个数字,询问从第一层走到最后一层所经过节点上数字和的最大值.我们很容易想到枚举所有路径来计算最 ...

  5. 关于setter 和 getter方法的一些总结(初级)

    1.最基础的set 和 get 准备工作 Person.h @interface Person : NSObject { NSString *_hobby; // ObjC建议成员变量带"_ ...

  6. 网页嵌入pdf、在线预览pdf工具及插件（转）

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  7. JS判断当前页面是在 QQ客户端/微信客户端/iOS浏览器/Android浏览器/PC客户端

    browser.js var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appV ...

  8. layer.prompt绑定确认键

    case 'eventkc': top.layer.prompt({ formType: , title: '修改<span style="color:red">' + ...

  9. [转载]如何通过ssh进行上传/下载

    [转载]如何通过ssh进行上传/下载 学校给配了服务器的用户账号,但是怎么向服务器中上传以及下载文件呢?Windows下可以使用Xftp和Xshell,但是Linux下能不能用命令行解决呢? 什么是S ...

  10. c#HtmlAgilityPack解析html

    通过HtmlAgilityPack实现对html页面解析HtmlDocument doc = new HtmlDocument(); doc.Load(yourStream); var itemLis ...