quasar之搭建开发环境 - zhouted/zhouted.github.io GitHub Wiki

安装node&npm&yarn

参考：yarn和npm的对比 npm安装源淘宝镜像

  • 安装包：node-v12.16.3-x64.msi
  • 安装成功打开“Node.js command prompt”执行命令行继续安装和配置：
#npm默认的安装源太慢，设为淘宝镜像
npm config set registry http://registry.npm.taobao.org/
#安装yarn
npm install yarn -g
yarn config set registry "https://registry.npm.taobao.org"
yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
yarn config set phantomjs_cdnurl "http://cnpmjs.org/downloads"
yarn config set electron_mirror "https://npm.taobao.org/mirrors/electron/"
yarn config set sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
yarn config set profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
yarn config set chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

#把如下命令的输出加入系统环境变量path里
yarn global bin

安装并使用quasar-cli生成app骨架

参考：http://www.quasarchs.com/start/quasar-cli

yarn global add @quasar/cli
cd /your/workspace
quasar create quapp
? Project name (internal usage for dev) quapp
? Project product name (must start with letter if building mobile apps) Quasar App
? Project description A Quasar Framework app
? Author zhoutiedao <[email protected]>
? Pick your favorite CSS preprocessor: (can be changed later) SCSS
? Pick a Quasar components & directives import strategy: (can be changed later) Auto import
? Check the features needed for your project: ESLint, Axios
? Pick an ESLint preset: Prettier
? Cordova/Capacitor id (disregard if not building mobile apps) cn.alives.quasar.app
? Should we run `npm install` for you after the project has been created? (recommended) yarn
#创建成功后进去运行一下试试
cd quapp
quasar dev

安装并配置vscode

  • 安装包：VSCodeSetup-x64-1.45.0.exe
  • 安装插件：ESLint Prettier Vetur Control+Shit+P打开Settings(JSON)加如下配置：
{
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
    "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
    "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
    "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
    "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.semi": false,
    "prettier.singleQuote": true
}

之后就可以打开/your/workshop/quapp文件夹愉快的撸代码了:)