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

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

巴特西

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

最新文章

热门文章