Quasar2.0与vue3.0项目中问题

一、boot文件

启动文件 (app initialization code)，相当于vue2.0中的main.js文件的作用，quasar利用boot来实现对Vue app的实例创建后需要自定义的一些初始化的自定义代码。

使用方式：

1.创建文件，在终端使用quasar new boot 文件名

2.在quasar.config.js中声明  boot:['文件名']

3.代码

import fetchData from "../axios/FetchData";
import { boot } from 'quasar/wrappers';
import Prism from 'prismjs';
//路由、vuex的引用
// import router from "../router";
import store from "../store/index";
//echarts的引用
import  echarts from 'vue-echarts';
import { use } from "echarts/core";
// 手动引入 ECharts 各模块来减小打包体积
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart,PieChart,LineChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
} from 'echarts/components'
use([LineChart,PieChart,
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
]);
export default boot(({ app }) => {
//vue-echarts的挂载
  app.component('v-chart', echarts)
//在全局中使用jsonviewr
  app.use(JsonViewer)
//全局变量的使用
  app.config.globalProperties.$title = ' | Vue Quasar';
  app.use(VueMarkdownEditor);
})

 4.组件中使用全局变量

  //getCurrentInstance获取当前组件的实例、上下文来操作router和vuex等
import { defineComponent,  reactive, onMounted,getCurrentInstance} from "vue";

export default {
  name: 'myMenu',
  components: { SkeletonDemo, BaseContent },
  setup(){
    //const { ctx }  = getCurrentInstance();  方式一，这种方式只能在开发环境下使用，生产环境 
   下的ctx将访问不到  const { proxy }  = getCurrentInstance();   方式二，此方法在开发环境以及生产环境下都能放到组件 上下文对象（推荐）
      const { proxy } = getCurrentInstance();
      const data=reactive({
      content: '',
      isLoadingVisible: false
    });
    onMounted(() => {
      getMsg();
    });
     const getMsg = () => {
         data.isLoadingVisible = !data.isLoadingVisible
      const query = {
        url: proxy.$PUBLIC_PATH + 'data/menuData.md',
        method: 'get',
        responseType: 'text'
      }
      proxy.$fetchData(query).then(res => {
       
        data.content = res.data
      }).catch(error => {
        console.log(error)
      })
     };
     return{
       data,getMsg
     }
  }
  
}
</script>

二、router文件的配置

1.index.ts文件配置

import {
  createRouter,
  createWebHashHistory,
} from 'vue-router';

//要使用的路由文件
import routes from './routes';
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})
// Reset route when user logs out
export function resetRouter() {
  const newRouter = router;
  (router as any).matcher = (newRouter as any).matcher // reset router
}
export default router

2.其他组件的使用

import { useRouter } from "vue-router";
export default defineComponent({
  name: "tagView",
  setup(props, context) {
    const $router = useRouter();
    onMounted(() => {
      data.tagView = store.getters["userModule/getTagView"];
      console.log("查看的tagview", $router);
    });
  },
});

三、vuex的配置

1.index.ts文件

//要使用的store
import userModule from './modules'
import { App } from 'vue'
import { createStore } from 'vuex'
export const store = createStore({
  modules: {
    userModule
  }
})
export function setupStore (app: App<Element>) {
  app.use(store)}
export default store

四、Quasar的引用

import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { defineComponent, reactive,onMounted,getCurrentInstance } from 'vue'
export default defineComponent({
  name: 'ToolbarItemRight',
   setup () {
     const { proxy } = getCurrentInstance();
      const $q = useQuasar()
       const $router = useRouter()
         const store = useStore()
    let state= reactive({
      search: '',
     PUBLIC_PATH:proxy.$PUBLIC_PATH
    });
    const fullScreen = ()=> {
      if ($q.fullscreen.isActive) {
        // 退出全屏模式：
        $q.fullscreen.exit()
          .then(() => { // v1.5.0+
            // success!
          })
          // eslint-disable-next-line handle-callback-err
          .catch(err => { // v1.5.0+
            // oh, no!!!
          })
      } else {
        // 请求全屏模式：
        $q.fullscreen.request()
          .then(() => { // v1.5.0+
            // success!
          })
          // eslint-disable-next-line handle-callback-err
          .catch(err => { // v1.5.0+
            // oh, no!!!
          })
      }
    };
       onMounted(()=>{ 
         console.log("PUBLIC_PATH", state.PUBLIC_PATH)
       });
  const  minimize =()=> {
      if (process.env.MODE === 'electron') {
        $q.electron.remote.BrowserWindow.getFocusedWindow().minimize()
      }
    };
    const   maximize =()=> {
      if (process.env.MODE === 'electron') {
        const win = $q.electron.remote.BrowserWindow.getFocusedWindow()
        if (win.isMaximized()) {
          win.unmaximize()
          state.isMaximize = !state.isMaximize
        } else {
          win.maximize()
          state.isMaximize = !state.isMaximize
        }
      }
    };
   const  closeApp=()=> {
      if (process.env.MODE === 'electron') {
        $q.electron.remote.BrowserWindow.getFocusedWindow().close()
      }
    }
    return {
      state,
      fullScreen,
   minimize , maximize,
     closeApp
    }
  }
})
</script>