欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-20 15:50:52
1、mian.js: 2、router.js 3、.babelrc: 4、package.json: 5、webpack.config.js: ......

1、mian.js:

// 入口文件
import vue from "vue";
// 1.1导入路由
import vuerouter from "vue-router";
// 1.2安装路由
vue.use(vuerouter);

//注册vuex
import vuex from "vuex";
vue.use(vuex);
//每次刚进入网站,肯定会调用main.js 在刚调用的时候,先从本地存储中,把购物车中的数据读出来,放到store中
// var car = json.parse(localstorage.getitem("car") || "[]");
// var store = new vuex.store({
//   state: {
//     //this.$store.state.***
//     car: car //将购物车中商品的数据存到数组中,在car存储一些商品的对象(id,数量,单价,是否被选中)
//   },
//   mutations: {
//     addtocar(state, goodsinfo) {
//       //点击加入购物车,把商品信息保存到store中的car中
//       //1.购物车中,之前就已经有这个对应的商品了,就只需要更新数量
//       //2.如果没有,则把商品数据,push到car中
//       //先假设在购物车中没有找到对应的商品
//       var flag = flase;
//       state.car.some(item => {
//         if (item.id == goodsinfo.id) {
//           item.count += parseint(goodsinfo.count);
//           flage = true;
//           return true;
//         }
//       });
//       //如果最终,循环完毕,得到的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)
//       return true
//     }
//   })
//当修改完商品的数量,把最新的购物车的数据,保存到本地存储中
// 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)
//       return true;
//     }
//   })
//   //将删除完后的,最新的数据进行同步
//   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) {
//       var c = 0;
//       state.car.foreach(item => {
//         c += item.count;
//       });
//       return c;
//     },
// getgoodscount(state){
//   var 0 = {}
//   state.car.foreach(item => {
//     o[item.id] = item.count
//   })
//   return o;
// }
//   }
// getgoodsselected(state){
//   var 0 = {}
//   state.car.foreach(item => {
//     o[item.id] = item.seleted
//   })
//   return o;
// },
// getgoodscountandamount(state){
//   var o = {
//     count: 0,//勾选的数量
//     amount: 0,//勾选的总价
//   }
//   state.car.foreach(item => {
//     if (item.selected) {
//       o.count += item.count
//       o.amount += item.price * item.count
//     }
//   })
//   return o;
// }
// }

// });

// // 导入格式化的时间插件 npm i moment -s
// import moment from "moment";

// // 定义全局的过滤器(时间的)
// vue.filter("dateformat", function(datastr, pattern = "yyyy-mm-dd hh:mm:ss") {
//   return moment(datastr).format(pattern);
// });


//引入axios
import axios from 'axios'
//给vue原型挂载一个属性
vue.prototype.$axios = axios

// 2.1导入 vue-resource
// import vueresource from "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);

// 全局安装(按需加载无法实现懒加载,所以上面的都进行了注释)
import mintui from "mint-ui";
import "mint-ui/lib/style.css";
vue.use(mintui);

//安装图片预览插件
import vuepreview from "vue-preview";
vue.use(vuepreview);

// 1.3导入自己的router.js路由模块
import router from "./router.js";

//导入mui的样式
import "./mui/css/mui.min.css";
//导入购物车的css样式还得包括字体的样式fonts中!
import "./mui/css/icons-extra.css";
//导入 app 根组件
import app from "./app.vue";

var vm = new vue({
  el: "#app",
  render: c => c(app),
  router //1.4挂载路由对象到vm实例上
  // store //挂载 vuex状态管理对象
});

2、router.js

import vuerouter from "vue-router";

// 导入对应的路由组件
import homecontainer from "./components/tabbar/homecontainer.vue";
import searchcontainer from "./components/tabbar/searchcontainer.vue";
import shopcarcontainer from "./components/tabbar/shopcarcontainer.vue";
import membercontainer from "./components/tabbar/membercontainer.vue";
import newslist from "./components/news/newslist.vue";
import newsinfo from "./components/news/newsinfo.vue";
import photolist from "./components/photos/photolist.vue";
import photoinfo from "./components/photos/photoinfo.vue";
import goodslist from "./components/goods/goodslist.vue";
import goodsinfo from "./components/goods/goodsinfo.vue";
import goodsdesc from "./components/goods/goodsdesc.vue";
import goodscomment from "./components/goods/goodscomment.vue";

//创建路由对象
var router = new vuerouter({
  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)为高亮的类
});
//把路由对象暴露出去
export default router;

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: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8081 --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "isc"
}

5、webpack.config.js:

const path = require("path");

// 导入在内存中生成html页面的插件
//只要是插件,都一定要放到 plugins节点中去
//这个插件的两个作用:
//1.自动在内存中根据指定页面生成一个内存的页面;
//2.自动,把打包好的 bundle.js 追加到页面中去
const htmlwebpackplugin = require("html-webpack-plugin");
//加载vue的时候需要的插件
const vueloaderplugin = 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: [
    //配置插件的节点
    new htmlwebpackplugin({
      //创建一个在内存中生成html 页面的插件
      template: path.join(__dirname, "./src/index.html"), //指定模板页面,将会根据指定的页面路径,
      //去生成内存中的页面
      filename: "index.html" // 指定生成的页面的名称
    }),
    // 加载vue的时候需要的插件
    new vueloaderplugin()
  ],

  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]"
      }, //处理图片文件 npm i url-loader file-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 拿到配置对象后,就拿到了配置对象中,指定的入口和出口,然后进行打包构建。