记学习Quasar-cli的一些知识

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

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

环境的搭建

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

项目目录

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组件

在quasar 中文网上有很多组件提供给我们使用，只要在quasar.conf.js添加引用即可，

然后再页面中就可以直接使用添加引用的组件了。

效果就是这样了

有些组件还有其他地方需要引用，主要是quasar.conf.js中framework的 componets 、directives、 plugins 。

路由设置

页面做好了，但是怎么运行这个页面呢？这个时候就要设置路由了，在router文件下的router.js主要设置页面的路由。

在主页地址后加入login即可进入login.vue页面了

path：‘/’ 表示主页面，运行后打开的第一个页面

如何自定义组件

1.在components文件下新建headers文件，为一个头部标题组件。根据自己的需求加工。
2.设置路由运行跳转到headers文件，看是否符合自己需求。

3.因为quasar主要用于移动端，所有我们要调成移动端查看效果**（推荐使用谷歌浏览器，可右击检查，然后转换移动端）**
4.接下来是如何使用这个组件。
在需要引用组件的页面中的script中声名，然后在components转换成标签；

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

5.在template中就可以引用这个组件了；

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>

人生中第一篇博客完成，未完待续！