从0到一个前端后台管理框架(二)

文章列表：

• 从0到一个前端后台管理框架(一)
• 从0到一个前端后台管理框架(二)
• 从0到一个前端后台管理框架(三)
• 从0到一个前端后台管理框架(四)
• 从0到一个前端后台管理框架(五)

quasar是一个非常好用的框架，至于怎么好用的，请看，

初始化项目

选择存放项目的文件夹，点击地址栏输入cmd回车即可在此路径中打开CMD，输入命令npm init quasar，按照gif中输入即可，上下键选择，空格键选中，回车表示确定。按照Gif中创建项目即可。

这里Gif中我输入的文件夹名称为wlf-admin-study，所以我这里VsCode打开此文件夹，如果你填了别的文件夹名称，那就打开你填的名称的文件夹。

VsCode里新建终端，输入npm i，安装依赖，无报错执行完毕过后，观察项目中是否多了一个node_modules文件夹，正常情况下是会生成此目录。如未生成，请核对哪一步搞错了。

项目完整结构图

编辑package.json文件中的scripts块，在里面添加

"dev": "quasar dev",
"build": "quasar build",


// 添加过后完整scripts块
  "scripts": {
    "dev": "quasar dev",
    "build": "quasar build",
    "lint": "eslint --ext .js,.ts,.vue ./",
    "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
    "test": "echo \"No test specified\" && exit 0"
  },

终端中执行命令npm run dev，无报错应该会自动打开浏览器，出现下面这个界面即说明初始环境搭建成功，

初始化的时候项目会有些警告，是因为字符串双引号不符合Eslint校验，打开提示警告的文件，格式化或者保存一下即可。

修改quasar.config.js文件中framework.lang配置为’zh-CN’

到这一个基本环境就搭建好了，接下来分析一下src文件夹下的内容

• src
  • assets –静态文件
  • boot –启动时加载的一些操作
  • components – 通用组件
  • css –全局CSS
  • i18n –多语言包
  • layouts –整体布局
  • pages –页面
  • router –路由相关
  • stores –全局状态存储
  • App.vue –根组件
  • env.d.ts –系统变量TS类型定义
  • index.template.html –页面模板
  • quasar.d.ts –类型定义
  • shims-vue.d.ts –类型定义

在我们一行代码没敲的时候，基础开发环境已经搭建完成，包括全局状态存储，路由，多语言等Vue全家桶的集成，不用再去搜索Vue整合Vue路由，Vue整和状态存储，等等，，这就是QuasarCli的魅力

此篇博客进度对代码分支——init

下一篇教程地址

从0到一个前端后台管理框架(三)

封