Vue3 快速上手

编辑器

编辑器首选 VSCode，必装插件 Volar，选装 Stylus

项目初始化

npm init vue@latest
cd <your-project-name>
cd your-project-name
npm install
npm run dev

EsLint 设置

• 安装 npm i -D eslint
• 初始化配置 EsLint npx eslint --init

获取 DOM 节点

在 template 的节点内附着 ref 属性，
脚本中使用 ref 获取，注意变量名为指定的 ref 属性名。

const refAttr = ref(null);

路由守卫

• 全局前置守卫 router.beforeEach
• 全局后置守卫 router.afterEach
• 全局解析守卫 router.beforeResolve
• 路由独享守卫 beforeEnter
• 组件内守卫 beforeRouterEnter
• 组件内守卫 beforeRouterUpdate
• 组件内守卫 beforeRouterLeave

在每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用

文档和资源

• vue3 官方文档
• Element-Plus 官网
• ECharts项目
• Vue3 语法参考
• EsLint
• 在 router 中使用 pinia
• @vueuse/core中api记录
• Vue Router 10 条高级技巧
• 一文搞懂Vue3中watch和watchEffect区别和用法！