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. Java中集合关键字的区别

    1. ArrayList.Vector和Stack有什么区别? 1.ArrayList的方法和实现基本上和Vector一样,底层都是数组的实现(简:API基本一样) ​   2.Stack继承了Vec ...

  2. 软件设计分为结构化设计（SD）

    软件设计分为结构化设计(SD)与面向对象设计(OOD). 其中结构化设计SD是一种面向数据流的方法,它以SRS(软件需求规格说明书)和SA(结构化分析)阶段所产生的和数据字典等文档为基础,是一个自顶向 ...

  3. （5.1.5）引擎管理——多服务器管理之中央管理服务器（CMS）

    关键词:中央管理服务器,CMS,多服务器管理 中央管理服务器 -[1]打开 视图->已注册的服务器 [2]注册中央管理服务器 右击中央管理器->注册中央管理服务器 这里输入IP.主机名都可 ...

  4. node项目自动化部署--基于Jenkins,Docker,Github(2)配置节点

    上一篇文章中准备工作已经完成的差不多了 这一篇主要讲解 Jenkins 上面的相关配置 为了让代码部署到所有的子节点上 所以我们首先需要在 Jenkins 中添加我们希望代码部署到的节点 配置节点 首 ...

  5. 【6.18校内test】T1多项式输出

    日常题前废话: 首先so amazing 的一件事,因为在洛谷上立下了的flag,然后这次考试前两道题都是刚刚做过不久的题emmm(相当于白送200吗qwq,但是这阻挡不了我第三题不会的脚步qwq) ...

  6. 虚机Linux最小系统下安装图形界面，与yum配置

    出于未知原因,想装一下. 因为有光盘,所以就从光盘安装就可以了. 首先是配置yum下的下载地址: 找到yum的地址,然后打开文件. 然后建立该文件的/media/cdrom路径.将光盘挂载到该路径下. ...

  7. django 实现 Mock Server

    大佬 flask 实现mock server地址:https://github.com/yinquanwang/MockServer 参考使用django实现了一下,并已部署到EasyTest测试平台 ...

  8. how to create a flask server

    1. use database 2. use redis 3. inport/export excel2007 version+ from flask import send_from_directo ...

  9. 在html中展示pdf

    pc端 插件: https://pdfobject.com/ 使用: <!doctype html> <html lang="en"> <head&g ...

  10. 教你搭建基于typescript的vue项目

    自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合. ...