前端开发之走进Vue.js_教你写一个组件化、多页面应用

前端开发之走进vue.js|前端开发 vue.js |vuejs2前端开发|web前端开发

多页面的知乎日报就是按页面来写,这次是用组件形式写的,也就是先写组件再写页面,那么就需要解决一个问题,vue-cli默认是只有一个index.html的主页的。我们需要自己改配置文件,让其自动根据我们有一个页面编译后输出几个页面。

1.修改配置,支持多页面开发

1.首先找到config里面的webpack.base.conf.js文件。在里面加入下面的代码。

javascript 代码

var glob = require(“glob”);
var entries = getEntry(“./src/module/**/*.js”); // 获得入口js文件
function getEntry(globPath) {
varentries={},
basename,
tmp,
pathname;
glob.sync(globPath).forEach(function(entry){
basename=path.basename(entry,path.extname(entry));
tmp=entry.split(“/”).splice(-3);
pathname=tmp.splice(0,1) +”/”+basename;// 正确输出jshtml的路径
entries[pathname] =entry;
});
console.log(“base-entrys:”);
console.log(entries);
returnentries;
}

2.找到webpack.dev.conf.js,同样在里面加入下面的代码。javascript 代码

var path = require(“path”);
var glob = require(“glob”);
var pages = getEntry(“./src/module/**/*.html”);
console.log(“dev pages———————-“);
for (var pathname in pages) {
// 配置生成的html文件,定义路径等
varconf={
filename: pathname + “.html”,
template: pages[pathname], // 模板路径
minify: {
//传递 html-minifier 选项给 minify 输出
removeComments: true
},
inject: “body”, // js插入位置
chunks: [pathname, “vendor”, “manifest”] // 每个html引用的js模块,也可以在这里加上vendor等公用模块
};
// 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(newHtmlWebpackPlugin(conf));
}
function getEntry(globPath) {
varentries={},
basename,
tmp,
pathname;
glob.sync(globPath).forEach(function(entry){
basename=path.basename(entry,path.extname(entry));
tmp=entry.split(“/”).splice(-3);
pathname=tmp.splice(0,1) +”/”+basename;// 正确输出js和html的路径
entries[pathname] =entry;
});
console.log(“dev-entrys:”);
console.log(entries);
returnentries;
}

注意要去掉之前这个文件里面默认的输出
javascript 代码

new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘index.html’,
inject: true
}),

3.找到webpack.prod.conf.js,执行第二步相同的操作。

三部操作之后你就能按页面开发了。

2.修改文件夹

接下来就是对文件夹的修改。将src里面的文件层级修改为下面所示的。
我们新建一个module文件夹,然后按照页面来新建文件夹,比如index下面有index.html,app.vue,index.js(html和js的命名必须要一样哦),这样webpack在我们之前配置的代码下就能自己通过每一个文件夹下面的js编译出不同的页面了。

前端开发之走进vue.js|前端开发 vue.js |vuejs2前端开发|web前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《前端开发之走进Vue.js_教你写一个组件化、多页面应用》
» 本文链接地址:https://www.rokub.com/3423.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!