Vue框架（二）------quasar简介及初始化

一、项目初始化

• 官网传送门

---

以下均为基于quasar的demo，在官网页面顶部> 优秀开源项目里

• Vue-Quasar-Manage 基于 Vue/Quasar 中后台前端解决方案demo
• 企业级快速开发平台demo
• 企业级中后台前端 / 设计解决方案demo

1.1 初始化命令

• 命令

  # 按装yarn
  npm install -g yarn
  yarn --version
  
  # 设置npm全局默认仓库：修改为淘宝仓库，官方仓库为https://registry.npmjs.org
  yarn config set registry https://registry.npm.taobao.org --global
  # 查看当前仓库
  yarn config get registry
  
  # 全局添加quasar脚手架
  yarn global add @quasar/cli
  # 启动quasar项目创建：注意quasar不是项目名称，别修改
  yarn create quasar
  

1.2 初始化选项

• 选择结果

  # 有四种安装方式，此种功能最多：https://quasar.dev/start/pick-quasar-flavour
  ✔ What would you like to build? › App with Quasar CLI, let's go!
  # 项目文件夹名称
  ✔ Project folder: … quasar-test
  # quasar版本：使用vue3 组合式API
  ✔ Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)
  # 可选择ts或js
  ✔ Pick script type: › Typescript
  # 使用webpack或vite
  ✔ Pick Quasar App CLI variant: › Quasar App CLI with Vite
  # 以下四项选择默认：包名、项目产品名、描述、作者
  ✔ Package name: … quasar-test
  ✔ Project product name: (must start with letter if building mobile apps)
   … Quasar App
  ✔ Project description: … A Quasar Project
  ✔ Author: … duke
  # 组合式API写法：setup写入script中
  ✔ Pick a Vue component style: › Composition API with <script setup>
  # css样式：大括号式
  ✔ Pick your CSS preprocessor: › Sass with SCSS syntax
  # 添加第三方组件：代码格式、vuex替代品、请求模块、国际化语言包
  ✔ Check the features needed for your project: › ESLint, 
  State Management (Pinia), Axios, Vue-i18n
  # 代码格式化工具
  ✔ Pick an ESLint preset: › Prettier
  

1.3 配置

• package.json

  # 在此项下增加三个子项
  "scripts": {
    "dev": "quasar dev",
    "build": "quasar build",
    "build:pwa": "quasar build -m pwa"
  }
  

  启动项目：yarn dev
  打包项目：yarn build

• 启动效果
  

1.4 git 管理

• 初始化仓库

  cd quasar-test
  git init
  git add .
  git commit -m "first commit"
  
  git remote add origin https://gitee.com/.../quasar-test.git
  git push -u origin "master"
  

  git操作：传送门，第五节

二、项目修改示意

2.1 文件组织

• 脚手架通用文件说明详此篇2.5节：传送门
• 特例如下
  

  根目录下：quasar.config.js，存放quasar配置项，boot文件夹里新增第三方组件需要在此文件内的boot项下注册

2.2 启动文件夹boot

2.2.1 第三方模块示例

• 安装：npm install axios --save，quasar初始化可以选择默认安装
• /boot/axios.ts，模块配置，全局加载

  import axios, { AxiosInstance } from 'axios';
  import Router from 'src/router/index';
  
  // 声明模块，‘’中为node_modules文件夹中的文件夹名，大括号为扩充包声明
  // declare就是告诉TS编译器你担保这些变量和模块存在，并声明了相应类型，
  // 编译的时候不需要提示错误！
  declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
      $axios: AxiosInstance;
    }
  }
  
  const api = axios.create({ baseURL: 'http://127.0.0.1:8000/' });
  // 请求拦截
  api.interceptors.request.use(
    (request) => {
      // src/utils/http.ts中会有请求头新增项
      request.headers = {
        jwtToken: localStorage.getItem('jwtToken') as string,
      };
      return request;
    },
    (error) => {
      Promise.reject(error);
    }
  );
  // 响应拦截：做jwtToken验证
  api.interceptors.response.use(
    (response) => {
      // 设置jwtToken
      if (response.data.code == '700') {
        localStorage.setItem('jwtToken', response.data['jwtToken']);
      }
      return response;
    },
    (error) => {
      const errorcode = error.response.data.code;
  
      // token过期、认证失败、非法token 拦截：若失败，清除storage，并路由重定向
      if (errorcode == '701' || errorcode == '702' || errorcode == '703') {
        localStorage.clear();
        Router.push('/login');
      }
      return Promise.resolve(error.response);
    }
  );
  // 导出给src/utils/http.ts使用
  export { api };
  

• 根目录quasar.config.js，注册模块

  ...
  module.exports = configure(function( /* ctx */ ) {
      return {
  		...
          boot: ['i18n', 'axios', ],
          ...
      }
  })
  

2.3 路由文件夹router

• index.ts

  ...
  //找到此行修改路由是hash还是history显示，其他可以不动
  : process.env.VUE_ROUTER_MODE === 'history'
  ...
  

• routes.ts

  import { RouteRecordRaw } from 'vue-router';
  
  const routes: RouteRecordRaw[] = [
    {
      path: '/login',
      name: '登陆/注册',
      component: () => import('pages/LoginPage.vue'),
    },
    {
      path: '/',
      name: '首页',
      component: () => import('pages/IndexPage.vue'),
      // children:[{ path:'',component:()=>import('pages/IndexPage.vue')}],
    },
    {
      path: '/settings',
      name: '设置',
      component: () => import('pages/SettingsPage.vue'),
    },
  
    // 最后所有未知路由都会导航到此页面，即404
    {
      path: '/:catchAll(.*)*',
      component: () => import('pages/ErrorNotFound.vue'),
    },
  ];
  
  export default routes;
  

2.3 工具文件夹utils

• 详此篇3.3节：传送门

三、网页骨架布局App.vue

3.1 初始生成

• 快速生成网页骨架：主页传送门
• 导航位置：Layout and Grid / Layout Builder， 传送门
  

3.2 提取及封装

• App.vue

  <template>
    
    <q-layout view="hHh lpr fFf">
      <Header>Header>
      <Drawer>Drawer>
  
      <q-page-container>
        <router-view />
      q-page-container>
    q-layout>
  template>
  
  <script lang="ts" setup>
  // 页面顶栏提取组件
  import Header from 'src/components/App/AppHeader.vue';
  // 页面侧边栏提取组件
  import Drawer from 'src/components/App/AppDrawer.vue';
  script>
  

• 子页面如SettingsPage.vue

  <template>
    <q-page padding>
      <div class="text-h1 text-weight-bold">设置页面div>
      <q-btn @click="clear">clearq-btn>
    q-page>
  template>
  

• 查看效果：终端输入yarn dev

四、重点章节

• margin、padding：Style & Identity > Spacing

• 栅格系统：Layout and Grid > Flex Grid > 所有

  
  <div class="q-ml-md overflow-hidden">
     <div class="row q-gutter-lg bg-yellow">
       <div class="col-3 bg-green" v-for="n in 5" :key="n">
       	Child{{ n }}
       div>
     div>
  div>
  

  

• 组件（重点核心）：VueComponents > 所有

  学习方法：先看下面示例，弄懂每个属性的意义，熟悉常见效果，最后看上面的API，查缺补漏

五、官方中文教学视频推荐

• quasar教程第一季：传送门
• quasar教程第二季：传送

---

跳转至vue总篇目录