【在vue中添加pug模板】在webpack.config.js中引入pugloader，就可以在vue中使用pug模板了。模块：{loaders:[{test:/\.vue$/,loader:'vue-loader'},{test:/\.pug$/,loader:'pug'}]},vue:{loaders:{html:'pug',css:'style!css!stylus',},}我的list.vue中的模板代码如下：div.content_wrapdiv.content_lefth3产品列表div。item(v-for='listinmess',@click='add_to_cart',data-id='{{list.f_id}}')div.img_wrapimg(:src='list.f_avatar')span{{list.f_name}}div#content_right.content_right(@click="delete_item")h3购物车div.item(v-for='listincart_mess',data-id='{{list.f_id}}')div.img_wrapimg(:src='list.f_avatar')span{{list.f_name}}div.delete_layerp.delete删除项目介绍这个是用vue写前端，用node接收前端的请求，然后进行相应的数据操作，比如数据的访问和删除等。这是个人实践项目，和目前的功能比较简单。主要展示商品列表，将商品加入购物车，从购物车中删除商品。由于使用vue搭建本地环境，需要使用babel将es6语法转为es5语法。1.配置.babelrc文件{"presets":["es2015","stage-2"],"plugins":["transform-runtime"]}2.配置package.json文件3.配置webpack.config.js文件。因为babel之后的代码是遵循commonjs规范的代码，不能直接在浏览器上运行，所以需要用webpack打包成可以直接运行的代码。之前写过babel相关的笔记，可以点这里查看。配置完成后，运行npmrunbuild和webpack命令。运行后会生成lib和dist文件夹。文件目录-dist-index-lib-index.js-my_server.js-src-component-list.vue-public-view-index.pug-index.js-my_server.js-.babelrc-package.json-webpack。config.js数据库使用mysql，只有两张表。一张表存储产品ID、产品名称和产品地图。另一个表存储用户ID和项目ID。my_server.js使用节点的expres、mysql、path和pug模块。为了解析http请求数据，还需要引入body-parser。lib文件夹下的文件是babel生成的，src文件夹下的文件是webpack打包的。今天优化了购物车实例。购物车首屏加载使用pug模板，将数据直接导出到页面，提高加载速度。1.连接数据库varconn=mysql.createConnection({host:'localhost',user:'root',password:'root',database:'test',port:3306});conn.connect();2.初始化查询商品列表和购物车。商品列表和购物车数据直接导出，减少页面http请求。index.pug主页模板doctypehtmlhtml(lang="en")headtitle='index'bodydiv(id='app')app脚本。list_data=!{init_list_data};cart_data=!{init_cart_data};script(src='/index.js')my_server.js//初始化查询商品列表和购物车app.get('/',function(req,res){//如果有索引则进入索引默认页面，我更改了索引的名称进入这个页面letlist_query_sql='selectf_id,f_name,f_avatarfromt_listlimit10',list_search_result,cart_search_result;returnnewPromise(function(resolve){conn.query(list_query_sql,function(err2,rows){if(err2)console.log(err2);list_search_result=JSON.stringify(rows);resolve(list_search_result);})}).then(function(list_search_result){letcart_query_sql='SELECTt_list.f_id,t_list.f_name,t_list.f_avatarFROMt_listINNERJOINt_item_useront_list.f_id=t_item_user.f_item_idWHEREt_item_user.f_uid=2333';conn.query(cart_query_sql,function(err2,rows){if(err2)con唯一的日志（错误2）；cart_search_result=JSON.stringify(行);res.render('index',{//pug(jade)表示默认模板init_list_data:list_search_result,init_cart_data:cart_search_result,});});});});2。添加到购物车列表的请求list.vue页面add_to_cart:function(e){letitem_id=parseInt(e.currentTarget.getAttribute('data-id'));//vue获取当前dom对象letdata={id:2333,item_id:item_id};//传入的用户id和itemidthis.$http.post('/add_to_cart',{id:2333,item_id:item_id}).then(response=>{if(response.data.errcode===1){console.log('加入购物车成功');letdiv=document.createElement('div');div.setAttribute('class','item');div.setAttribute('data-id',item_id);letimg_src;if(e.target.nodeName==='IMG'){img_src=e.target.getAttribute('src');}elseif(e.target.nodeName==='SPAN'){img_src=e.target.previousSbiling.getAttribute('src');}letstr=''+''+'
