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

来源:https://www.cnblogs.com/21-forever/archive/2019/07/29/11265987.html
-Advertisement-
Play Games

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最全mysql筆記整理
    mysql筆記整理 作者：python技術人 原文鏈接： https://shockerli.net/post/1000 line mysql note/ Windows服務 連接與斷開伺服器 資料庫操作 表的操作 數據操作 字元集編碼 數據類型（列類型） 選擇類型 列屬性（列約束） sql 1. ...
  • mysql報錯com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException
    一、問題 運行java代碼時報如下的錯誤： 二、解決 1.檢查sql是否正確,大多數情況都是因為sql寫錯了,如果覺得sql沒寫錯，那麼很有可能是sql語句中使用了mysql的關鍵字和保留欄位。 我這裡就是因為使用 analyze 作為欄位。mysql的關鍵字和保留欄位：https://www.cn ...
  • Spark Scala當中reduceByKey的用法
    [學習筆記] reduceByKey(function)reduceByKey就是對元素為KV對的RDD中Key相同的元素的Value進行function的reduce操作(如前所述)，因此，Key相同的多個元素的值被reduce為一個值，然後與原RDD中的Key組成一個新的KV對。 文章轉載自原文 ...
  • Oracle資料庫之四大語言
    一、數據定義語言： 1、用於改變資料庫結構，包括創建、更改和刪除資料庫對象； 2、命令： create table ：創建 alter table 修改 drop table 刪除表 truncate table 刪除表數據（不可以回滾） 2、創建表： 3、修改表結構： alter 表名 add/m ...
  • mysql 的優化
    1、使用 show status 瞭解各種 SQL 的執行頻率 mysql> show status like ‘Com_%’; 該命令可以查詢 sql 命令的執行次數。 2、定位執行效率較低的 SQL 語句 定位 SQL 執行效率低的 SQL 一般有兩種方法： 3、通過 explain 分析低效 ...
  • SwiftUI學習（一）
    總覽 如果你想要入門 SwiftUI 的使用，那 Apple 這次給出的 "官方教程" 絕對給力。這個教程提供了非常詳盡的步驟和說明，網頁的交互也是一流，是覺得值得看和動手學習的參考。 不過，SwiftUI 中有一些值得註意的細節在教程里並沒有太詳細提及，也可能造成一些困惑。這篇文章以我的個人觀點對 ...
  • vue3.0 vue.config.js 配置實戰
    今天講述一下vue-config.js配置，我們前面搭建好腳手架會發現,這個對比2.x版本少了很多東西,沒有build的配置,也沒有webpack的配置,那麼問題來了,我們如何去開發我們的項目呢,比如設置代理,打包配置等問題呢? vue cli3.0項目中需要配置其他參數時，需要新建文件'vue.c ...
  • css基礎,css選擇器
    07.29自我總結 css基礎 一.什麼是CSS CSS是級聯樣式表 CSS術語標記語言,沒有邏輯 CSS作用 完成網頁內容的樣式與佈局 二.CSS的三種引入方式 1. 內聯式 書寫位置:在 head標簽內定義一個stype標簽內 CSS語法:css選擇器{樣式1;樣式2} 優缺點:可讀性強，有復用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類