> 文章列表 > quasar搭建,运行,打包

quasar搭建,运行,打包

quasar搭建,运行,打包

1、官网

quasar中文网、quasar英文网

2、配置PowerShell执行策略

以管理员身份运行PowerShell,运行Set-ExecutionPolicy RemoteSigned,并输入Y,回车确认

3、VSCode

安装VSCode

4、安装nvm

访问下载地址下载安装nvm:
百度云分享
官网直装链接
nvm的github发行界面下载nvm-setup.exe
GitCode镜像下载nvm-setup.exe(登录获取下载链接,下载链接还是Github的,唯一的作用就是挑选版本的时候快点)

5、配置nvm

nvm install lts安装最新版本的Node.js,本文安装的是18.16.0
nvm install lts启用这个版本
运行cmd /c "nvm -v && node -v && npm -v",正常输出版本号说明安装完成

6、安装yarn

npm install --global yarn

7、安装@quasar/cli

yarn global add @quasar/cli

8、创建一个Quasar应用程序

yarn create quasar

安装上下方向键切换选择,回车键确认选择

  1. What would you like to build?
    选择第一项:App with Quasar CLI, let's go! - spa/pwa/ssr/bex/electron/capacitor/cordova
  2. Project folder:
    项目文件夹名称:默认名称,直接回车
  3. Pick Quasar version:
    选择Quasar的版本:Quasar v2 (Vue 3 | latest and greatest) - recommended,默认选择v2版本,直接回车
  4. Pick script type:
    选择JS还是TS:Javascript,默认选择js,直接回车
  5. Pick Quasar App CLI variant:
    选择Webpack还是Vite:Quasar App CLI with Vite,按方向键下键切换选择,选Vite,回车
  6. Package name:
    包名:默认名称,直接回车
  7. Project product name: (must start with letter if building mobile apps)
    项目产品名称:(构建移动端必须以字母开头):默认名称,直接回车
  8. Project description:
    项目描述:默认描述,直接回车
  9. Author:
    作者:输入自己的名字加邮箱,回车
  10. Pick your CSS preprocessor:
    CSS框架:Sass with SCSS syntax,默认选择,直接回车
  11. Check the features needed for your project:
    其他特性:ESLint,默认选择,直接回车
  12. Pick an ESLint preset:
    ESLint设置:Prettier - https://github.com/prettier/prettier,默认选择,直接回车
  13. Install project dependencies? (recommended)
    包管理器:Yes, use yarn,默认选择,直接回车

9、进入项目

cd .\\quasar-project\\

10、运行

yarn quasar dev
quasar搭建,运行,打包

11、添加electron模式

npx quasar mode -a electron

12、打包

cmd /c "set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/&& npx quasar build -m electron"
等待加载

生成位置:quasar-project\\dist\\electron\\Packaged\\Quasar App-win32-x64
运行Quasar App.exe即可。


quasar搭建,运行,打包