记学习Quasar-cli的一些知识
记录学习过程中遇到的问题以及知识点
个人理解quasar是一个Vue框架的组件库,市场上有很多这类的组件库,则需要我们根据自己的需求选择适合自己项目的组件库。而quasar主要是用于移动端
环境的搭建
- Visual Studio Code ,一个轻量且强大的代码编辑器,人性化,多插件安装;
- 在vue-cli的基础上,cmd中跑 npm install -g quasar-cli;
- 创建项目:创建文件夹,cmd进入文件夹;创建项目 quasar init 项目名称
- 用vs code 打开文件夹,右击项目文件夹,选择终端中打开,或者快捷键ctrl+~,但一定要进入项目文件,不然会报错;
- **运行项目:**在终端输入 quasar dev 运行完成后会自动跳出项目网页 ;
- 若再次打开项目网页,点击终端的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>
人生中第一篇博客完成,未完待续!