IT小白

这个屌丝很懒，什么也没留下！

热门标签

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

作者：IT小白 | 2024-03-17 17:22:09

踩

vue quasar

一、项目初始化

官网传送门

以下均为基于quasar的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
3
4
5
6
7
8
9
10
11
12
13

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1.3 配置

package.json

# 在此项下增加三个子项
"scripts": {
  "dev": "quasar dev",
  "build": "quasar build",
  "build:pwa": "quasar build -m pwa"
}
1
2
3
4
5
6

启动项目：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"
1
2
3
4
5
6
7

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 };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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

...
module.exports = configure(function( /* ctx */ ) {
    return {
		...
        boot: ['i18n', 'axios', ],
        ...
    }
})
1
2
3
4
5
6
7
8

2.3 路由文件夹router

index.ts

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

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.3 工具文件夹utils

详此篇3.3节：传送门

三、网页骨架布局App.vue

3.1 初始生成

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

3.2 提取及封装

App.vue

<template>
  <!-- 此view可在builder中选好效果，export时直接拷贝过来 -->
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

子页面如SettingsPage.vue

<template>
  <q-page padding>
    <div class="text-h1 text-weight-bold">设置页面</div>
    <q-btn @click="clear">clear</q-btn>
  </q-page>
</template>
1
2
3
4
5
6

查看效果：终端输入yarn dev

四、重点章节

margin、padding：Style & Identity > Spacing

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

<!-- 补充gutter相关 -->
<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>
1
2
3
4
5
6
7
8

在这里插入图片描述

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

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

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

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

跳转至vue总篇目录

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/257217