vue3.0 搭建項目總結

hzc 發布于2019-08-02 15:06 / 2510人閱讀

摘要：環境配置項目中的不同開發環境有很多依賴配置，所以可以根據環境設置不同的配置，以免在不同環境經常修改文件在根目錄下創建環境文件，可以在不同環境設置一些配置變量，如圖文件配置在文件里面有一個對象，可設置如圖配置在里面需在對象里面設置重點刪除默認

1.環境配置

項目中的不同開發環境有很多依賴配置，所以可以根據環境設置不同的配置，以免在不同環境經常修改文件

1 在根目錄下創建 `.env.[環境]` 文件，可以在不同環境設置一些配置變量，如圖

.env.dev 文件

2.eslint 配置

在package.json 文件里面有一個eslintConfig對象，可設置rules： 如圖

3.配置svg

在vue.config.js 里面需在module.exports對象里面設置

chainWebpack: config => {
    config.module.rules.delete("svg") // 重點:刪除默認配置中處理svg,//const svgRule = config.module.rule("svg") //svgRule.uses.clear()
    config.module
      .rule("svg-sprite-loader")
      .test(/.svg$/)
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
  }

svg component

```

使用svg組件

import SvgIcon from "@/components/SvgIcon.vue"
// 設置全局組件svgIcon
Vue.component("svg-icon", SvgIcon)
const req = require.context("./assets/svg", true, /.svg$/) // 查詢文件加下面的svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req) // 全局導入svg文件

4.通用組件 級聯（多選且可以選擇全部）組件

安裝插件 multi-cascader-base-ele

使用
import multiCascader from "multi-cascader-base-ele"
Vue.use(multiCascader)

-- 支持選擇全部

上傳（支持圖片/視頻/裁剪圖片/拖拽）

安裝插件
vuedraggable axios vue-cropper

代碼

注冊全局事件

創建eventBus.js

使用

import eventBus from "./plugins/eventBus"
Vue.use(eventBus)

處理緩存

借用mounted， activated 事件處理數據
在某一次打開頁面的時候進行數據初始化存儲，放置在vuex中，或者全局變量中，當需要初始化進行一個初始化，采取mixins引入

5.路由配置

我的項目中使用的是element-UI的導航菜單，支持路由，但是不支持前進后退，所以使用如下方式處理

 // 監控hash改變且處理，使瀏覽器支持前進后退
 window.addEventListener("hashchange", function(path) {
     router.replace(path.newURL.split("#")[1])
 })

項目中路由處理邏輯判斷
判斷緩存，是否新打開，添加重定向，獲取所有打開路由，獲取所有展示路由菜單

6.API處理

該項目采用axios調取api接口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53900.html

vue3.0 搭建項目總結

摘要：環境配置項目中的不同開發環境有很多依賴配置，所以可以根據環境設置不同的配置，以免在不同環境經常修改文件在根目錄下創建環境文件，可以在不同環境設置一些配置變量，如圖文件配置在文件里面有一個對象，可設置如圖配置在里面需在對象里面設置重點刪除默認 1.環境配置項目中的不同開發環境有很多依賴配置，所以可以根據環境設置不同的配置，以免在不同環境經常修改文件 1 在根目錄下創建 `.env.[環...

Youngdze 2019-08-26 13:50 評論0 收藏0
vue3.0 搭建項目總結

摘要：環境配置項目中的不同開發環境有很多依賴配置，所以可以根據環境設置不同的配置，以免在不同環境經常修改文件在根目錄下創建環境文件，可以在不同環境設置一些配置變量，如圖文件配置在文件里面有一個對象，可設置如圖配置在里面需在對象里面設置重點刪除默認 1.環境配置項目中的不同開發環境有很多依賴配置，所以可以根據環境設置不同的配置，以免在不同環境經常修改文件 1 在根目錄下創建 `.env.[環...

chavesgu 2019-08-30 10:57 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0