quasar 项目创建
控制台输入
quasar create your_project_name
(第一次输入该命令会下载 quasar 模板,耐心等待下载完成,如果长时间没有下载完成,可以按Ctrl + C
来取消任务后重新输入创建项目的指令)
- Project name (your_project_name)
输入项目名称,输入回车默认括号内的名称,括号内的名称是上面
quasar create
命令后面传入的项目名称。这里一般回车默认就好了。
- Project product name (must start with letter if building mobile apps) (Quasar App)
项目产品名称,没懂啥意思,默认回车。
- Project description (A Quasar Framework app)
项目描述,输入这个项目的相关描述。
- Author
输入作者名称,可以直接回车。
- Pick your favorite CSS preprocessor: (can be changed later)
这里有三个选项:
Sass with indented syntax (recommended)
Sass with SCSS syntax (recommended)
Stylus
None (the others will still be available)
我选的第二个,这四个选项具体含义我不太清楚,不是专业前端。既然它推荐前两个,那就幸福二选一吧。
- Pick a Quasar components & directives import strategy: (can be changed later) (Use arrow keys)
选择 quasar 组件的导入策略, quasar 的控件都是单独的,每使用一个控件都要在配置中添加控件才能使用。这里有三个选项。
Auto-import in-use Quasar components & directives
Manually specify what to import
Import everything from Quasar
这里建议选第二个,手动管理,编译最快,每个控件都有文档说明引入哪个模块,没什么难度。第一个选项表示自动管理,编译时间比较久,开发调试阶段不建议使用,浪费自己宝贵的时间。第三个选项表示全部引入,这样应该会造成包体较大。
- Check the features needed for your project:
选择插件,上下箭头移动光标,空格选中/取消选中,回车确认。这里有四个选项。
ESLint
Vuex
Axios
Vue-i18n
IE11 support
这里建议第二个和第三个必选。第一个不要选,开启ESLint后编译器对 JS 代码较苛刻,经常报错,报错不是你写的不对,只是没有严格按照标准来写,对缩进什么的都有要求,所以不建议勾选。第四个如果有多语言需求可以勾选。第五个如果有IE11支持的需求可以选,不过和 electron 配合的话,不需要勾选, electron 并不使用 IE 内核。
- Cordova/Capacitor id (disregard if not building mobile apps) (org.cordova.quasar.app)
Cordova 可以将 quasar 程序编译成移动端 APP,所以需要安卓的那种三段式的包名, 一般 com.公司/个人称呼.项目名称 全小写!!!
- Should we run
npm install
for you after the project has been created? (recommended) (Use arrow keys)
是否需要帮你安装依赖项。这里有三个选项。
Yes, use Yarn (recommended)
Yes, use NPM
No, I will handle that myself
果断第一个,毕竟推荐的,选第二个也行(如果你能上外网的话),选第三个也可以,你可能需要手动进入项目目录,然后打开控制台输入cnpm install
或者yarn
来安装依赖项。
运行项目
进入项目目录,输入
quasar dev -m electron
等待程序启动。 如果不添加-m electron
参数则默认是web项目,这时候控制台会提示你输入超链接查看界面。
编译项目
进入项目目录, 控制台输入
quasar build -m electron
等待编译完成就可以在 build 目录下看到编译出来的 exe 了。
注意事项
无论是运行项目,还是打包项目,如果出现 gyp 编译出错,则需要配置一下。(我的 VS2019 必出现这个问题)
- 安装 Chocolatey
打开 Powershell (Powershell 不是 cmd, 如果电脑有 Powershell 可以打开 cmd 然后输入 Powershell 来打开Powershell) 输入
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))
来安装 Chocolatey 等待安装完成后就可以安装 python2 和 visualstudio-workload-vctools 了。
- 安装 python2 和 visualstudio-workload-vctools
Powershell 输入
choco upgrade python2 visualstudio2019-workload-vctools
来安装 python 和 vctools,我这里是 VS2019 所以是visualstudio2019-workload-vctools
如果是 VS2017或者VS2015等其它版本,则把数字改成对应的版本来安装,安装完成后应该就可以正常运行项目了。