记学习Quasar-cli的一些知识

记学习Quasar-cli的一些知识

  • 记录学习过程中遇到的问题以及知识点
    • 环境的搭建
    • 项目目录
    • 创建一个网页
    • 如何使用quasar组件
    • 路由设置
    • 如何自定义组件

记录学习过程中遇到的问题以及知识点

个人理解quasar是一个Vue框架的组件库,市场上有很多这类的组件库,则需要我们根据自己的需求选择适合自己项目的组件库。而quasar主要是用于移动端

环境的搭建

  1. Visual Studio Code ,一个轻量且强大的代码编辑器,人性化,多插件安装;
  2. 在vue-cli的基础上,cmd中跑 npm install -g quasar-cli
  3. 创建项目:创建文件夹,cmd进入文件夹;创建项目 quasar init 项目名称
  4. 用vs code 打开文件夹,右击项目文件夹,选择终端中打开,或者快捷键ctrl+~,但一定要进入项目文件,不然会报错;
    记学习Quasar-cli的一些知识_第1张图片
  5. **运行项目:**在终端输入 quasar dev 运行完成后会自动跳出项目网页 ;
    记学习Quasar-cli的一些知识_第2张图片
  6. 若再次打开项目网页,点击终端的App URL 即可;
    记学习Quasar-cli的一些知识_第3张图片

项目目录

quasar 中文文档上有很详细的介绍,
http://www.quasarchs.com/guide/,
个人用的比较多的有
components:放自定义组件
Pages:存放项目文件
router/router.js:路由设置
statics:放静态文件,图片,Json文件等
quasar.conf.js:配置环境,加载官网组件等,比较重要。

创建一个网页

在pages文件下新建一个Login文件夹,这个文件夹存放登录页面的文件
然后再新建文件,命名为login.vue,这个就是我们的登录页面了。vue文件构建包含三部分的Quasar应用程序:’template’(HTML),’script’(Javascript)和’style’(CSS)。再在template中只能包含一个div,所以我们在这个div中再分出div或者其他标签进行编写代码。
记学习Quasar-cli的一些知识_第4张图片
接下来就是设计美化这个页面了。

如何使用quasar组件

在quasar 中文网上有很多组件提供给我们使用,只要在quasar.conf.js添加引用即可,
记学习Quasar-cli的一些知识_第5张图片
然后再页面中就可以直接使用添加引用的组件了。
记学习Quasar-cli的一些知识_第6张图片
效果就是这样了

记学习Quasar-cli的一些知识_第7张图片
有些组件还有其他地方需要引用,主要是quasar.conf.js中framework的 componets 、directives、 plugins 。

路由设置

页面做好了,但是怎么运行这个页面呢?这个时候就要设置路由了,在router文件下的router.js主要设置页面的路由。
记学习Quasar-cli的一些知识_第8张图片
在主页地址后加入login即可进入login.vue页面了
在这里插入图片描述
path:‘/’ 表示主页面,运行后打开的第一个页面

如何自定义组件

1.在components文件下新建headers文件,为一个头部标题组件。根据自己的需求加工。
2.设置路由运行跳转到headers文件,看是否符合自己需求。
记学习Quasar-cli的一些知识_第9张图片
3.因为quasar主要用于移动端,所有我们要调成移动端查看效果**(推荐使用谷歌浏览器,可右击检查,然后转换移动端)**
4.接下来是如何使用这个组件。
在需要引用组件的页面中的script中声名,然后在components转换成标签;

<script>
import headers from 'src/components/headers' //声名组件
export default {
    components:{
        "headers":headers,
    },
    data(){
    return{
    
    }
</script>

5.在template中就可以引用这个组件了;
记学习Quasar-cli的一些知识_第10张图片
6.header.vue 代码

<template>
    <div>
        <div class="header">
            <slot></slot>//插槽,引用该组件的页面可以在这里插入数据,如顶部标题
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>
.header{
    height:50px;width:100%;backgroundcolor:9f0000;color: white;text-align: center;line-height: 50px;font-size: 20px;font-weight: bold

}
</style>

人生中第一篇博客完成,未完待续!

你可能感兴趣的:(学习)