二、 quasar 项目创建及运行

quasar 项目创建

控制台输入 quasar create your_project_name (第一次输入该命令会下载 quasar 模板,耐心等待下载完成,如果长时间没有下载完成,可以按 Ctrl + C 来取消任务后重新输入创建项目的指令)

1. Project name (your_project_name)

输入项目名称,输入回车默认括号内的名称,括号内的名称是上面 quasar create 命令后面传入的项目名称。这里一般回车默认就好了。

2. Project product name (must start with letter if building mobile apps) (Quasar App)

项目产品名称,没懂啥意思,默认回车。

3. Project description (A Quasar Framework app)

项目描述，输入这个项目的相关描述。

4. Author

输入作者名称,可以直接回车。

5. 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)
我选的第二个,这四个选项具体含义我不太清楚,不是专业前端。既然它推荐前两个,那就幸福二选一吧。

6. 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
这里建议选第二个,手动管理,编译最快,每个控件都有文档说明引入哪个模块,没什么难度。第一个选项表示自动管理,编译时间比较久,开发调试阶段不建议使用,浪费自己宝贵的时间。第三个选项表示全部引入,这样应该会造成包体较大。

7. Check the features needed for your project:

选择插件，上下箭头移动光标,空格选中/取消选中，回车确认。这里有四个选项。
ESLint
Vuex
Axios
Vue-i18n
IE11 support
这里建议第二个和第三个必选。第一个不要选,开启ESLint后编译器对 JS 代码较苛刻,经常报错,报错不是你写的不对,只是没有严格按照标准来写,对缩进什么的都有要求,所以不建议勾选。第四个如果有多语言需求可以勾选。第五个如果有IE11支持的需求可以选,不过和 electron 配合的话,不需要勾选, electron 并不使用 IE 内核。

8. Cordova/Capacitor id (disregard if not building mobile apps) (org.cordova.quasar.app)

Cordova 可以将 quasar 程序编译成移动端 APP，所以需要安卓的那种三段式的包名, 一般 com.公司/个人称呼.项目名称 全小写！！！

9. 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 必出现这个问题)

1. 安装 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 了。

2. 安装 python2 和 visualstudio-workload-vctools

Powershell 输入 choco upgrade python2 visualstudio2019-workload-vctools 来安装 python 和 vctools,我这里是 VS2019 所以是 visualstudio2019-workload-vctools 如果是 VS2017或者VS2015等其它版本,则把数字改成对应的版本来安装，安装完成后应该就可以正常运行项目了。

 
 
 
 

上一章: lectron-vue + quasar 环境搭建