1、mian.js:
//入口文件
importVuefrom"vue";
//1.1导入路由
importVueRouterfrom"vue-router";
//1.2安装路由
Vue.use(VueRouter);
//注册vuex
importVuexfrom"vuex";
Vue.use(Vuex);
//每次刚进入网站，肯定会调用main.js在刚调用的时候，先从本地存储中，把购物车中的数据读出来，放到store中
//varcar=JSON.parse(localStorage.getItem("car")||"[]");
//varstore=newVuex.store({
//state:{
////this.$store.state.***
//car:car//将购物车中商品的数据存到数组中，在car存储一些商品的对象（id,数量，单价，是否被选中）
//},
//mutations:{
//addTocar(state,goodsinfo){
////点击加入购物车，把商品信息保存到store中的car中
////1.购物车中，之前就已经有这个对应的商品了，就只需要更新数量
////2.如果没有，则把商品数据，push到car中
////先假设在购物车中没有找到对应的商品
//varflag=flase;
//state.car.some(item=>{
//if(item.id==goodsinfo.id){
//item.count+=parseInt(goodsinfo.count);
//flage=true;
//returntrue;
//}
//});
////如果最终，循环完毕，得到的flag还是flase，则把数据直接push到购物车中
//if(!flag){
//state.car.push(goodsinfo);
//}
////当更新car之后，把car数组，存储到本地的localStorage中
//localStorage.setItem("car",JSON.stringify(state.car));
//},
//updateGoodsInfo(state,goodsinfo){
////修改购物车中商品的数量值
//state.car.some(item=>{
//if(item.id==goodsinfo.id){
//item.count=parseInt(goodsinfo.count)
//returntrue
//}
//})
//当修改完商品的数量，把最新的购物车的数据，保存到本地存储中
//localStorage.setItem("car",JSON.stringify(state.car));
//}
//removeFormCar(state,id){
////根据id从store中的购物车中删除对应的哪条商品
//state.car.some(item=>{
//if(item.id==id){
//state.car.splice(i,1)
//returntrue;
//}
//})
////将删除完后的，最新的数据进行同步
//localStorage.setItem("car",JSON.stringify(state.car));
//},
//updateGoodsSelected(state,info){
//state.car.some(item=>{
//if(item.id==info.id){
//item.selected=info.selected
//}
//})
//}
//},
//getters:{
////相当于计算属性，也相当于filters
//getAllCount(state){
//varc=0;
//state.car.forEach(item=>{
//c+=item.count;
//});
//returnc;
//},
//getGoodsCount(state){
//var0={}
//state.car.forEach(item=>{
//o[item.id]=item.count
//})
//returno;
//}
//}
//getGoodsSelected(state){
//var0={}
//state.car.forEach(item=>{
//o[item.id]=item.seleted
//})
//returno;
//},
//getGoodsCountAndAmount(state){
//varo={
//count:0,//勾选的数量
//amount:0,//勾选的总价
//}
//state.car.forEach(item=>{
//if(item.selected){
//o.count+=item.count
//o.amount+=item.price*item.count
//}
//})
//returno;
//}
//}
//});
////导入格式化的时间插件npmimoment-S
//importmomentfrom"moment";
////定义全局的过滤器(时间的)
//Vue.filter("dateFormat",function(dataStr,pattern="YYYY-MM-DDHH:mm:ss"){
//returnmoment(dataStr).format(pattern);
//});
//引入axios
importAxiosfrom'axios'
//给vue原型挂载一个属性
Vue.prototype.$axios=Axios
//2.1导入vue-resource
//importVueResourcefrom"vue-resource";
//2.2安装
//Vue.use(VueResource);
//设置请求的根路径
//Axios.defaults.baseURL="C:/Users/dong/Desktop/phone/";
//全局设置post时候表单数据格式组织形式application/x-www-form-urlencoded
//Vue.http.option.emulateJSON=true;
////按需导入mint-ui组件
//import{Header,Button,Swipe,SwipeItem,Lazyload}from"mint-ui";
////注册下
//Vue.component(Header.name,Header);
//Vue.component(Swipe.name,Swipe);
//Vue.component(SwipeItem.name,SwipeItem);
//Vue.component(Button.name,Button);
//Vue.use(Lazyload);
//全局安装（按需加载无法实现懒加载，所以上面的都进行了注释）
importMintUIfrom"mint-ui";
import"mint-ui/lib/style.css";
Vue.use(MintUI);
//安装图片预览插件
importVuePreviewfrom"vue-preview";
Vue.use(VuePreview);
//1.3导入自己的router.js路由模块
importrouterfrom"./router.js";
//导入mui的样式
import"./mui/css/mui.min.css";
//导入购物车的css样式还得包括字体的样式fonts中！
import"./mui/css/icons-extra.css";
//导入App根组件
importappfrom"./App.vue";
varvm=newVue({
el:"#app",
render:c=>c(app),
router//1.4挂载路由对象到vm实例上
//store//挂载vuex状态管理对象
});
2、router.js
importVueRouterfrom"vue-router";
//导入对应的路由组件
importHomeContainerfrom"./components/tabbar/HomeContainer.vue";
importSearchContainerfrom"./components/tabbar/SearchContainer.vue";
importShopcarContainerfrom"./components/tabbar/ShopcarContainer.vue";
importMemberContainerfrom"./components/tabbar/MemberContainer.vue";
importNewsListfrom"./components/news/NewsList.vue";
importNewsinfofrom"./components/news/Newsinfo.vue";
importPhotoListfrom"./components/photos/PhotoList.vue";
importPhotoinfofrom"./components/photos/Photoinfo.vue";
importGoodsListfrom"./components/goods/GoodsList.vue";
importGoodsinfofrom"./components/goods/Goodsinfo.vue";
importGoodsDescfrom"./components/goods/GoodsDesc.vue";
importGoodsCommentfrom"./components/goods/GoodsComment.vue";
//创建路由对象
varrouter=newVueRouter({
routes:[
//配置路由规则
{path:"/",redirect:"/home"},
{path:"/home",component:HomeContainer},
{path:"/member",component:MemberContainer},
{path:"/shopcar",component:ShopcarContainer},
{path:"/search",component:SearchContainer},
{path:"/home/newslist",component:NewsList},
{path:"/home/newsinfo/:id",component:Newsinfo},
{path:"/home/photolist",component:PhotoList},
//{path:"/home/Photoinfo/:id",component:Photoinfo},
{path:"/home/Photoinfo",component:Photoinfo},
{path:"/home/GoodsList",component:GoodsList},
//{path:"/home/Goodsinfo/:id",component:Goodsinfo,name="goodsinfo"}
{path:"/home/Goodsinfo",component:Goodsinfo},
{path:"/home/GoodsDesc",component:GoodsDesc},
//{path:"/home/GoodsDesc/:id",component:GoodsDesc,name="GoodsDesc"},
{path:"/home/GoodsComment",component:GoodsComment}
//{path:"/home/GoodsComment/:id",component:GoodsComment,name="GoodsComment"},
],
linkActiveClass:"mui-active"//覆盖默认的路由（router-link-active)为高亮的类
});
//把路由对象暴露出去
exportdefaultrouter;
3、.babelrc:
{
"presets":["env","stage-0"],
"plugins":[
"transform-runtime",
[
"component",
{
"libraryName":"mint-ui",
"style":true
}
],
"transform-remove-strict-mode"
]
}
4、package.json:
{
"name":"phone",
"version":"1.0.0",
"description":"",
"main":"webpack.config.js",
"dependencies":{
"axios":"^0.19.0",
"babel-loader":"^7.1.5",
"bootstrap":"^4.3.1",
"jquery":"^3.4.1",
"mint-ui":"^2.2.13",
"moment":"^2.24.0",
"vue":"^2.6.10",
"vue-preview":"^1.1.3",
"vue-resource":"^1.5.1",
"vue-router":"^3.0.7",
"vuex":"^3.1.1",
"webpack-cli":"^3.3.5"
},
"devDependencies":{
"babel-core":"^6.26.3",
"babel-plugin-component":"^1.1.1",
"babel-plugin-transform-remove-strict-mode":"0.0.2",
"babel-plugin-transform-runtime":"^6.23.0",
"babel-preset-env":"^1.7.0",
"babel-preset-es2015":"^6.24.1",
"babel-preset-stage-0":"^6.24.1",
"css-loader":"^3.0.0",
"file-loader":"^4.0.0",
"html-webpack-plugin":"^3.2.0",
"less":"^3.9.0",
"less-loader":"^5.0.0",
"node-loader":"^0.6.0",
"node-sass":"^4.12.0",
"sass-loader":"^7.1.0",
"scss-loader":"0.0.1",
"style-loader":"^0.23.1",
"url-loader":"^2.0.1",
"vue-loader":"^15.7.0",
"vue-template-compiler":"^2.6.10",
"webpack":"^4.35.2",
"webpack-dev-server":"^3.7.2"
},
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1",
"dev":"webpack-dev-server--open--port8081--hot",
"build":"webpack--modeproduction"
},
"keywords":[],
"author":"",
"license":"ISC"
}
5、webpack.config.js:
constpath=require("path");
//导入在内存中生成HTML页面的插件
//只要是插件，都一定要放到plugins节点中去
//这个插件的两个作用：
//1.自动在内存中根据指定页面生成一个内存的页面；
//2.自动，把打包好的bundle.js追加到页面中去
consthtmlWebpackPlugin=require("html-webpack-plugin");
//加载vue的时候需要的插件
constVueLoaderPlugin=require("vue-loader/lib/plugin");
//这个配置文件其实就是一个JS文件，通过NODE中的操作，向外暴露一个配置对象
module.exports={
entry:path.join(__dirname,"./src/main.js"),//入口，要打包的文件
output:{
//输出相关配置
path:path.join(__dirname,"./dist"),//指定打包好的文件，输出到哪个文件夹目录中去
filename:"bundle.js"//指定输出的文件名称
},
mode:"development",//因为版本不一样，需要添加这个才能完成输出！！！
plugins:[
//配置插件的节点
newhtmlWebpackPlugin({
//创建一个在内存中生成HTML页面的插件
template:path.join(__dirname,"./src/index.html"),//指定模板页面，将会根据指定的页面路径，
//去生成内存中的页面
filename:"index.html"//指定生成的页面的名称
}),
//加载vue的时候需要的插件
newVueLoaderPlugin()
],
module:{
//这个节点，用于配置所有的第三方模块加载器
rules:[
//所有第三方模块的匹配规则
{test:/\.css$/,use:["style-loader","css-loader"]},//配置处理.css文件的第三方loader规则
{test:/\.less$/,use:["style-loader","css-loader","less-loader"]},//处理.less文件
{test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]},//处理.scss文件
{
test:/\.(jpg|png|gif|bmp|jpeg)$/,
use:"url-loader?limit=616&name=[hash:8]-[name].[ext]"
},//处理图片文件npmiurl-loaderfile-loader-D
//limit给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定的值，
//则不会被转为base64格式的字符串，如果小于给定的值，则会转为base64的字符串
//哈希值正常为32位，这里面随便设置几位，为了区分两个同名的图片
{
test:/\.(ttf|eot|svg|woff|woff2)$/,
use:"url-loader"//处理字体文件
},
{test:/\.vue$/,use:"vue-loader"},//处理.vue文件
{test:/\.js$/,use:"babel-loader",exclude:/node_modules/}//转换高级语法的---注意好版本！！！
]
},
resolve:{
alias:{
//修改vue导入的包的路径
vue$:"vue/dist/vue.js"
}
}
};
//在控制台输入webpack对项目进行打包，此时webpack进行以下几步：
//1.首先，webpack发现，我们并没有通过命令的形式，给它指定入口和出口；
//2.webpack就会去项目的根目录中，查找一个叫做'webpack.config.js'的配置文件；
//3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，
//就得到了配置文件中，导出的配置对象；
//4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56632.shtml
