皮皮网

如何使用mintui和webpack开发

       éœ€æ±‚来看下我们的需求:使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用路由，访问/a时候显示a.html，/b显示b.html打包成多个html，给其中引用到资源加md5戳主要目录结构├——src│└——views#每一个文件夹对应一个页面│└——a│└——index.js│└——b│└——index.js├——output#打包输出的目录|└——└——template.html#将根据这个模版，生成各个页面的html└——webpack.config.js└——dev-server.js#webpack-dev-server+express只列出了主要的目录，这里我们根据一个template.html来生成多个页面的html，他们之间只有引用的资源路径不同。当然，你也可以每个页面单独使用一个html模版。Webpack配置这里主要解决两个小问题。1.打包多个页面的js文件读取src/views下的目录，约定每一个目录当成一个页面，打包成一个jschunk。2.打包多个html循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的jschunk。//webpack.config.jsvarglob=require('glob');varwebpackConfig={ /*一些webpack基础配置*/};//获取指定路径下的入口文件functiongetEntries(globPath){ varfiles=glob.sync(globPath),entries={ };files.forEach(function(filepath){ //取倒数第二层(view下面的文件夹)做包名varsplit=filepath.split('/');varname=split[split.length-2];entries[name]='./'+filepath;});returnentries;}varentries=getEntries('src/view/**/index.js');Object.keys(entries).forEach(function(name){ //每个页面生成一个entry，如果需要HotUpdate，在这里修改entrywebpackConfig.entry[name]=entries[name];//每个页面生成一个htmlvarplugin=newHtmlWebpackPlugin({ //生成出来的html文件名filename:name+'.html',//每个html的模版，这里多个页面使用同一个模版template:'./template.html',//自动将引用插入htmlinject:true,//每个html引用的js模块，也可以在这里加上vendor等公用模块chunks:[name]});webpackConfig.plugins.push(plugin);})路由配置在多页应用下，我们希望访问的是localhost:/a，而不是localhost:/a.html。由于webpack-dev-server只是将文件打包在内存里，所以你没法在express里直接sendfile('output/views/a.html')，因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream，用来输出其内存里的文件，我们可以利用它来做路由。注意，为了自定义路由，你可能需要引进express或koa之类的库，然后将webpack-dev-server作为中间件处理。//dev-server.jsvarexpress=require('express')varwebpack=require('webpack')varwebpackConfig=require('./webpack.config')varapp=express();//webpack编译器varcompiler=webpack(webpackConfig);//webpack-dev-server中间件vardevMiddleware=require('webpack-dev-middleware')(compiler,{ publicPath:webpackConfig.output.publicPath,stats:{ colors:true,chunks:false}});app.use(devMiddleware)//路由app.get('/:viewname?',function(req,res,next){ varviewname=req.params.viewname?req.params.viewname+'.html':'index.html';varfilepath=path.join(compiler.outputPath,viewname);//使用webpack提供的outputFileSystemcompiler.outputFileSystem.readFile(filepath,function(err,result){ if(err){ //somethingerrorreturnnext(err);}res.set('content-type','text/html');res.send(result);res.end();});});module.exports=app.listen(,function(err){ if(err){ //dosomethingreturn;}console.log('Listeningathttp://localhost:'+port+'\n')})最后，在package.json里定义下启动命令：//package.json{ scripts:{ "dev":"node./dev-server.js"}}运行npmrundev，然后在浏览器访问localhost:/各个页面，你应该可以看到想要的结果。

关于Vue.use()详解

       ç›¸ä¿¡å¾ˆå¤šäººåœ¨ç”¨Vue使用别人的组件时，会用到 Vue.use() 。例如： Vue.use(VueRouter) 、 Vue.use(MintUI) 。但是用 axios 时，就不需要用 Vue.use(axios) ，就能直接使用。那这是为什么呐？

        因为 axios 没有 install 。

        什么意思呢？接下来我们自定义一个需要 Vue.use() 的组件，也就是有 install 的组件，看完之后就明白了。

        这是当前项目目录：

        1.创建如下图中的文件夹和文件

        2.在 Loading.vue 中定义一个组件

        3.在 index.js 中 引入 Loading.vue ，并导出

        4.在 main.js 中引入 loading 文件下的 index

        5.在App.vue里面写入定义好的组件标签 <Loading></Loading>

        6.看到这儿大家应该就明白了吧，用 axios 时，之所以不需要用 Vue.use(axios) ，就能直接使用，是因为开发者在封装 axios 时，没有写 install 这一步。至于为啥没写，那就不得而知了。

        下一篇 axios如何全局注册