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. pandas的.columns和.index

    可以通过.columns和.index着两个属性返回数据集的列索引和行索引 设data是pandas的一个DataFram类型的数据集. 则data.index返回一个index类型的行索引列表,da ...

  2. CentOS7之SVN服务配置

    操作系统:CentOS Linux release 7.2.1511 (Core)    Subversion软件版本:subversion-1.7.14-10.el7.x86_64 1.首先检查sv ...

  3. Quatrz + Spring

    实例工程结构: 配置: pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...

  4. php文件上传php.ini配置参数

    php文件上传服务器端配置参数 file_uploads = On,支持HTTP上传uoload_tmp_dir = ,临时文件保存目录upload_max_filesize = 2M,允许上传文件的 ...

  5. JavaSE--面向对象

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

  6. 25、Python之禅

    要求: 爬取网页你好,蜘蛛侠!中的Python之禅中英文版本,并且打印.   目的: 练习使用selenium爬取动态网页的信息. 练习selenium与BeautifulSoup的搭配使用.     ...

  7. 基于Spring Cloud 几行配置完成单点登录开发

    单点登录概念 单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. ...

  8. redis之使用场景

    随着数据量的增长,MySQL 已经满足不了大型互联网类应用的需求.因此,Redis 基于内存存储数据,可以极大的提高查询性能,对产品在架构上很好的补充.在某些场景下,可以充分的利用 Redis 的特性 ...

  9. css的样式问题

    项目里面遇到一个布局: 然后侧边栏菜单的高度要随着内容的高度变化而变化:所以在这里贴一下代码:效果如下 <!DOCTYPE html> <html lang="en&quo ...

  10. js 不常用面试题 数组对象深度取值

    function getPersonInfo(one, two, three) { console.log(one); console.log(two); console.log(three); } ...