利用vue, webpack创建多页面应用

最新推荐文章于 2022-12-07 11:41:16 发布

goose leaves a mark

最新推荐文章于 2022-12-07 11:41:16 发布

阅读量866

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/lck8989/article/details/86299684

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

官网上的vue的示例都是单页应用的示例，如果想创建多页面的应用该怎么做呢，我单独的学习了下webpack创建多页应用的方法，然后再结合vue进行vue多页面应用的开发，

首先当然是下载webpack,进入官网查看安装教程：webpack官网

一：基本项目配置

安装webpack之前我们先创建一个文件夹存放webpack的项目 webpack-test

webpack-test

----

然后执行npm init命令不了解npm的小伙伴可以看看node的安装和使用教程然后就会出现了package.json文件

webpack-test

--- package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "a test of webapck",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.dev.config.js"
  },
  "keywords": [
    "webpacktest"
  ],
  "author": "lck",
  "license": "ISC",
  "devDependencies": {
    "path": "^0.12.7",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1"
  }
}

这里只是初始化npm的项目接下来我们添加一个.gitignore的文件，提交github仓库的话小伙伴需要注意了

.gitignore

/node_modules

这时候文件目录结构为：

webpack-test

---package.json

---.gitignore

请注意这样一段话：

最新的webpack版本是：

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli

对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules 目录中查找安装的 webpack：

"scripts": {
    "start": "webpack --config webpack.config.js"
}

当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

全局安装

以下的 NPM 安装方式，将使 webpack 在全局环境下可用：

npm install --global webpack

不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

二：项目构建前的准备

接下来创建webpack的配置文件 webpack.dev.config.js是调试版的配置文件，上线版的配置文件后期加上

const  path = require('path');
let file = function(res){
    return 'js/[name]/index.js'
}
let htmlPlugin = require('html-webpack-plugin');
let vueloaderPlugin = require('vue-loader/lib/plugin');
//css打包插件
// let ExtractPlugin = require('extract-text-webpack-plugin');
module.exports = {
    mode : 'development',
    //可以是字符串，数组和对象
    // entry : ['./src/js/index.js','./src/js/main.js'],
    //创建多页应用时候的配置选项
    entry:{
        index : './src/js/index.js',
        main  : './src/js/main.js',
        cart  : './src/js/cart.js'
    },
    output : {
        //打包后文件进入的路径
        path     : path.resolve(__dirname,'dist/'),
        filename : file,
        //配置线上绝对路径
        // publicPath : 'http://www.listore.top'
    },
    //模块配置
    module:{
        rules : [
            //加载编译.jsx文件
            {
                test    : /\.js?$/,
                include : [
                    path.resolve(__dirname,'src/js/')
                ],
                //node_modules不进行语法转换提高编译时间
                exclude : /node_modules/,
                loader  : 'babel-loader',
            },
            //编译加载css文件
            {
                test : /\.css?$/,
                //加载顺序是从右向左向将css加载
                use  : ['style-loader',{
                    loader : 'css-loader',
                    options : {
                        importLoaders : 1
                    }
                },{
                    loader  : 'postcss-loader',
                    options : {
                        ident : 'postcss',
                        plugins : [
                            require('postcss-import')(),
                            require('autoprefixer')()
                        ],
                        config : {
                            path : ''
                        }
                    } 
                }]
            },
            {
                test : /\.less?$/,
                loader : [
                    'style-loader',{
                        loader : 'css-loader',
                        options : {
                            importLoaders : 1
                        }
                    },{
                        loader  : 'postcss-loader',
                        options : {
                        ident : 'postcss',
                        plugins : [
                            require('postcss-import')(),
                            require('autoprefixer')()
                        ],
                        config : {
                            path : ''
                            }
                        } 
                    },{
                        loader : 'less-loader'
                    }
                ]
            },
            {
                test : /\.hbs?$/,
                loader : 'handlebars'
            },
            {
                test : /\.(png|jpeg|jpg|svg|gif)$/,
                loaders : [
                    'url-loader?name=[name]-[hash:5].[ext]?limit=3000',
                    'image-webpack-loader?mozjpeg=true'
                ]
            },
            //加载vue文件
            {
                test : /\.vue$/,
                use  : ['vue-loader'],
                exclude : /node_modules/
            }
        ]
    },
    plugins : [
        new vueloaderPlugin(),
        //生成多页面应用需要创建多个htmlPlugin实例
        new htmlPlugin({
            //生成的html的title
            title    : '首页',
            //输出文件的目录指定
            filename : 'html/index.html',
            //打包html文件的模板文件
            template : './src/view/index/index.html',
            //脚本注入到head标签还是body标签
            inject   : true,
            //公共的页面和属于该页面的html放到这里,会将index.js和main.js文件注入到该页面中去
            chunks   : ['index'],
            //除了cart.js的chunk被排除之外其余的都会被注入到该页面
            excludeChunks : ['cart','main']
        }),
        new htmlPlugin({
            //生成的html的title
            title    : '主页',
            //输出文件的目录指定
            filename : 'html/main.html',
            //打包html文件的模板文件
            template : './src/view/main/main.html',
            //脚本注入到head标签还是"body"标签
            inject   : true,
            chunks   : ['main']
        }),
        new htmlPlugin({
            //生成的html的title
            title    : '购物车',
            //输出文件的目录指定
            filename : 'html/cart.html',
            //打包html文件的模板文件
            template : './src/view/cart/cart.html',
            //脚本注入到head标签还是"body"标签
            inject   : true,
            chunks   : ['cart']
        }),
        // new ExtractPlugin("css/[name].css")
    ]

}

有可能有些小伙伴看的一头雾水，听我慢慢道来这个文件的生成过程及每个属性的作用，

首先第一句 const path = require('path');

这个path 在下面配置的作用是将相对路径转换为绝对路径，不了解的可以问下度娘哈哈

1 ： js，css,vue文件打包配置

entry 属性是webpack 的入口文件，是将js文件打包成dist目录文件的起始点，output是将入口文件打包到dist目录的配置

看一下module对象下的rules它是匹配入口文件包含文件的各种类型文件例如.css,.less,.vue,.js...等等文件

test表示匹配规则，exclude属性是防止对哪些文件进行打包，loader对应不同的加载器，不太了解loader的同学可以仔细看看webpack的loader模块。

2：html文件的打包：需要安装html-webpack-plugin,vue文件需要vue-loader 插件，上图的注释已经详细解释了怎么使用webpack的html-wepback-plugin的使用方法

3：增加对postcss-loader的配置文件 .postcss.config.js

module.exports = {
    plugins : {
        'postcss-import':{},
        'postcss-preset-env':{},
        'cssnano':{}
    } 
}

4：增加.babelrc文件支持es6语法必需安装 babel-preset-latest这样在入口文件中使用es6语法就很顺畅了

{
    "presets":["latest"]
}

我这里随便选择一个js文件实验webpack是如何将文件进行打包的：index.js

实验之前可以下载vue.min.js文件放到本地

vue.min.js文件下载地址

index.js

import CommonCss from '../style/common.css';
import Vue from './vue/vue-dev-min.js';
import indexHead from '../components/index-components/index.vue'
let vm = new Vue({
    el : '#index',
    data : {
        message : '首页'
    },
    components : {
        "c-head" : indexHead 
    } 
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title%></title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
    <script src="./src/index.js"></script>
    <div id='index'>
        {{message}}
        <c-head></c-head>
    </div>
</body>
</html>

这里特别注意的是组件的使用：每一个单独的组件都需要安装一下 vue-template-compiler才能正确的被加载出来，

例如：index.vue

<template>
    <div class="index-head">{{index}}</div>
</template>
<script>
import vueCompiler from 'vue-template-compiler'
export default {
    data(){
        return {
            index : '首页头部组件'
        }
    },
    methods : {

    },
    computed: {
        
    },

}
</script>
<style lang="less">
    .index-head{
        background: red;
    }
</style>

这样基本上完成了简单的vue+webpack的多页面应用的简单例子。

goose leaves a mark

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用vue, webpack创建多页面应用

官网上的vue的示例都是单页应用的示例，如果想创建多页面的应用该怎么做呢，我单独的学习了下webpack创建多页应用的方法，然后再结合vue进行vue多页面应用的开发，首先当然是下载webpack,进入官网查看安装教程：webpack官网一：基本项目配置安装webpack之前我们先创建一个文件夹存放webpack的项目 webpack-testwebpack-test ---...
复制链接

扫一扫