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. TensorFlow学习笔记0-安装TensorFlow环境

    TensorFlow学习笔记0-安装TensorFlow环境 作者: YunYuan 转载请注明来源,谢谢! 写在前面 系统: Windows Enterprise 10 x64 CPU:Intel( ...

  2. 【安卓开发】一个简单快递查询APP实例的实现摘要

    前言 做毕业设计涉及到安卓开发,决定好好学习安卓开发.在正式做毕业设计之前,有必要先设计和完成一个与毕业设计最终成果相关的demo或者说样例APP.最终毕业设计需要实现的功能包括通过调用PHP端API ...

  3. Jmeter 04 Jmeter变量的使用

    在使用jmeter进行接口测试时,我们难免会遇到需要从上下文中获取测试数据的情况,这个时候就需要引入变量了. 定义变量 添加->配置元件->用户自定义的变量 添加->配置元件-> ...

  4. ElasticSearch 7.3.0 查询、修改、删除 文档操作

    PUT chuyuan/_doc/ { "name":"xiaolin", , "sex":"F", "lov ...

  5. 爬取网易云音乐评论！python 爬虫入门实战（六）selenium 入门！

    说到爬虫,第一时间可能就会想到网易云音乐的评论.网易云音乐评论里藏了许多宝藏,那么让我们一起学习如何用 python 挖宝藏吧! 既然是宝藏,肯定是用要用钥匙加密的.打开 Chrome 分析 Head ...

  6. 在 IntelliJ IDEA 中使用 Git，太方便了！

    git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也 因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可以提交代码,切 ...

  7. hugo搭建个人博客

    本地先安装git 1. 下载hugo,并配置好环境变量 我这里win7 64位,选择该版本下载 将解压后的hugo.exe,配置到环境变量中,如下图所示表明配置成功 hugo version 2. 生 ...

  8. JavaSE--面向对象

    面向对象(Object Oriented) 面向对象是一种思想,是基于面向过程而言的,就是说面向对象是将功能等通过对象来实现,将功能封装进对象之中,让对象去实现具体的细节:这种思想是将数据作为第一位, ...

  9. springmvc中的全注解模式

    1.贴在类上: @Controller表明其是一个控制器 2.贴在方法上: @requestMapping("/xxx"): 标明请求要访问的方法的资源路径,,需以/打头.其中省略 ...

  10. Vue常用修饰符

    Vue提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的结果: 点击外层div的结果: 修改代 ...