HbuilderX mac版配置 2022年8月24日

Setting.json

{
    "adb.path" : "/Users/lixiang/Documents/platform-tools/adb",
    "alipayApp.devTools.path" : "/Applications/小程序开发者工具.app",
    "dir.exclude" : ".git,.cvs,.svn,node_modules,unpackage,dist",
    "editor.codeassist.px2upx.enabel" : false,
    "editor.contentAssistSelectionMode" : "Alt+数字模式",
    "editor.formatOnSave" : true,
    "editor.insertSpaces" : true,
    "editor.lineHeight" : "1",
    "editor.minimap.enabled" : false,
    "editor.saveOnFocusLost" : false,
    "editor.tabSize" : 2,
    "editor.wordWrap" : true,
    "terminal.type" : "内置终端",
    "weApp.devTools.path" : "/Applications/wechatwebdevtools.app"
}

jsbeautifyrc.js(此处使用的是原始文件)

module.exports = {
    parsers: {
        ".js": "js",
        ".json": "js",
        ".njs": "js",
        ".sjs": "js",
        ".wxs": "js",
        ".css": "css",
        ".nss": "css",
        ".wxss": "css",
        ".acss": "css",
        ".ttss": "css",
        ".qss": "css",
        ".html": "html",
        ".ux": "html",
        ".wxml": "html",
        ".nml": "html",
        ".vue": "html",
        ".nvue": "html",
        ".axml": "html",
        ".swan": "html",
        ".ttml": "html",
        ".qml": "html"
    },
    options: {
        "indent_size": "1",
        "indent_char": "\t",
        "indent_with_tabs": false, //使用tab缩进
        "eol": "\r\n", //行结束符
        "end_with_newline": false, //使用换行结束输出
        "indent_level": 0, //起始代码缩进数
        "preserve_newlines": true, //保留空行
        "max_preserve_newlines": null, //最大连续保留换行符个数。比如设为2,则会将2行以上的空行删除为只保留1行
        "space_in_paren": false, //括弧添加空格 示例 f( a, b )
        "space_in_empty_paren": false, //函数的括弧内没有参数时插入空格 示例 f( )
        "jslint_happy": false, //启用jslint-strict模式
        "space_after_anon_function": false, //匿名函数的括号前加空格
        "brace_style": "collapse", //代码样式,可选值 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline
        "unindent_chained_methods": false, //不缩进链式方法调用
        "break_chained_methods": false, //在随后的行中断开链式方法调用
        "keep_array_indentation": false, //保持数组缩进
        "unescape_strings": false, //使用xNN符号编码解码可显示的字符
        "wrap_line_length": 120,
        "e4x": false, //支持jsx
        "comma_first": false, //把逗号放在新行开头,而不是结尾
        "operator_position": "before-newline",
        "unformatted": ["wbr"],
        "html": {
            "indent_handlebars": true,
            "indent_inner_html": true,
            "indent-scripts": "normal", //[keep|separate|normal]
            "extra_liners": [] //配置标签列表,需要在这些标签前面额外加一空白行
        }
    }
}

package.json

{
  "dependencies": {
    "base-64": "^1.0.0",
    "dayjs": "^1.11.3"
  },
  "devDependencies": {
    "eslint-config-standard-vue-ts": "^1.0.21"
  },
  "scripts": {
    "lint": "eslint ./pages/ --ext .js,.vue",
    "lint:fix": "eslint ./pages/ --ext .js,.vue --fix"
  }
}

eslint配置 .eslintrc.js

module.exports = {
  extends: [
    'standard-vue-ts'
  ],
  rules: {
    'space-before-function-paren': 'off',
    'indent': 'off',
    'vue/html-indent': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/singleline-html-element-content-newline': 'off'
  },
  globals: {
    getApp: true,
    uni: true,
    $: true,
  },
}

常用命令

npm run lint
npm run lint:fix

《Vue3+Koa2》2.6 路由跳转的三种方式

一、router-link

<router-link to="/login">去登录</router-link>

二、传统跳转

goHome() {
    this.$router.push("/welcome")
}

三、composition API跳转

<script setup>
import {useRouter} from 'vue-router'
let router = useRouter()
const goHome = () => {
    router.push('/welcome')
}
</script>

《Vue3+Koa2》2.5 打印并注入环境变量

一、打印环境变量

main.js
------------
import { createApp } from 'vue'
import App from './App.vue'
// vite项目用import.meta.env | webpack项目是process.env
console.log("环境变量=>", JSON.stringify(import.meta.env,null,2))
createApp(App).mount('#app')

二、注入环境变量

  1. 在项目根目录中新建文件.env.dev
  2. 文件内容,新增变量必须以VITE开头,例如VITE_name=lixiang
  3. 修改package.json中的调试指令
    "dev": "vite --mode dev"

《Vue3+Koa2》2.1 项目初始化

一、安装Vue CLI

npm install -g @vue/cli
vue --version

二、使用vite搭建项目

yarn create vite my-vue-app --template vue
cd my-vue-app
yarn // 安装默认的依赖
yarn dev // 试运行项目

三、安装项目生产依赖

yarn add vue-router@next vuex@next element-plus axios -S

四、安装项目开发依赖

yarn add sass -D // 仅在开发期间有用(解析css)

《Vue3+Koa2》1.3 Vue全家桶介绍

Vue全家桶是基于vue开发必备的也是必学的一套框架,也可以说是一套组件,里面具体包含了如下几项:

  1. vue3渐进式JavaScript 框架 👉官方文档
  2. vue-cli 项目构建工具(已经被vue/cli取代)👉 官方文档
  3. vue-router 路由管理工具👉 官方文档
  4. vuex 全局变量状态管理工具(目前更推荐使用Pinia)👉 官方文档
  5. vue-resource http请求工具(已经被axios取代)👉 官方文档

《Vue3+Koa2》1.2 项目开发流程

项目开发流程

  • 需求:需求调研、需求设计、需求评审、用例评审
  • 开发:接口设计、接口评审、前后端开发、CR、自测
  • 测试:Bug修复、功能优化、需求调整、遗漏功能开发
  • 上线:预发验证、灰度测试、checklist、权限配置、版本回退
  • 回顾:事故复盘、问题总结、数据总览

《Vue3+Koa2》1.1 课前须知

一、本课程核心知识点

架构设计 vite2 vue3 koa2 log4js
mongo4.4 axios 模块化 JWT 递归菜单
菜单权限 审批流 脚手架开发 LowCode 等等

二、本课程适合人群

  1. 有一定前端基础的同学
  2. 想掌握Vue3全家桶的同学
  3. 对全栈感兴趣的同学
  4. 对JWT、权限菜单、前后端架构感兴趣的同学