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

@quasar/cli是一个非常好用的工具，至于怎么好用的，请看，

初始化项目

创建项目Gif

选择存放项目的文件夹，点击地址栏输入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示意图

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整和状态存储，等等，，这就是@quasar/cli的魅力