软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

Vue学习之项目部分代码(十八)

  1、mian.js:

  //入口文件

  importVuefromvue;

  //1.1导入路由

  importVueRouterfromvue-router;

  //1.2安装路由

  Vue.use(VueRouter);

  //注册vuex

  importVuexfromvuex;

  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

  //importmomentfrommoment;

  ////定义全局的过滤器(时间的)

  //Vue.filter(dateFormat,function(dataStr,pattern=YYYY-MM-DDHH:mm:ss){

  //returnmoment(dataStr).format(pattern);

  //});

  //引入axios

  importAxiosfromaxios

  //给vue原型挂载一个属性

  Vue.prototype.$axios=Axios

  //2.1导入vue-resource

  //importVueResourcefromvue-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}frommint-ui;

  ////注册下

  //Vue.component(Header.name,Header);

  //Vue.component(Swipe.name,Swipe);

  //Vue.component(SwipeItem.name,SwipeItem);

  //Vue.component(Button.name,Button);

  //Vue.use(Lazyload);

  //全局安装(按需加载无法实现懒加载,所以上面的都进行了注释)

  importMintUIfrommint-ui;

  importmint-ui/lib/style.css;

  Vue.use(MintUI);

  //安装图片预览插件

  importVuePreviewfromvue-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

  importVueRouterfromvue-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=616name=[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拿到配置对象后,就拿到了配置对象中,指定的入口和出口,然后进行打包构建。