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. 【Qt开发】QTextEdit 外观属性设置

    一.给QTextEdit添加背景图片,有下面两种方法: QTextEdit* iEdit  = new QTextEdit(); 1:使用样式表: iEdit->setStyleSheet(&q ...

  2. javascript number与isNan

    number 与 isnan Number:表示整数和浮点数 NaN:即非数值(not a Number)是 一个特殊的数值.是Number类型的一种. 说明:1.任何涉及NaN的操作(例如Nan/1 ...

  3. kafka语句示例

    1.从http://kafka.apache.org/下载kafka安装包:2.tar zxvf kafka_2.8.0.tar.gz,修改配置文件conf/server.properties:bro ...

  4. LayUI 多选框动态加载、启用、禁用、赋值、取值等js实现

    例如多选框如下: <div class="layui-form"> <select xm-select="city"> </sel ...

  5. vue 实践技巧合集

    前言 本文纯属个人平时实践过程中的一些经验总结,算是一点点小技巧吧,不是多么高明的技术,如果对你有帮助,那么不胜荣幸. 本文不涉及罕见API使用方法等,大部分内容都是基于对vue的一些实践而已.由于涉 ...

  6. Two progressions CodeForces - 125D (暴力)

    大意: 给定序列, 求划分为两个非空等差序列. 暴搜, 加个记忆化剪枝. #include <iostream> #include <sstream> #include < ...

  7. 使用filebeat收集日志传输到redis的各种效果展示

    0 环境 Linux主机,cengtos7系统 安装有openresty软件,用来访问生成日志信息 1.15.8版本 安装有filebeat软件,用来收集openresty的日志 7.3版本 安装有r ...

  8. vue-cli3.0本地代理cookie跨域请求Nginx配置

    由于后端需要通过请求取前端中的cookie信息,在本地开发模式中,直接请求接口,后端无法拿到前端cookie数据, 经测试需在 vue-cli 中使用代理,如果使用Nginx做反向代理需同时修改Ngi ...

  9. Jquery复习（五）之append()、appendTo()、prepend()、prependTo()、after()、before()易忘点

    添加元素的方法 append().appendTo().prepend().prependTo().after().before() 通过 append() .appendTo().prepend() ...

  10. node.js 设置静态文件托管

    1.在app.js文件中设置静态文件托管 /*应用程序入口文件*/ /*加载express模块*/ var express = require('express'); /*加载模板处理模块*/ var ...