Vue學習之項目部分代碼(十八）

一、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狀態管理對象
});

二、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;

三、.babelrc:

{
  "presets": ["env", "stage-0"],
  "plugins": [
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ],
    "transform-remove-strict-mode"
  ]
} 

四、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"
}

五、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 拿到配置對象後，就拿到了配置對象中，指定的入口和出口，而後進行打包構建。