haiweilian/vnext-analysis

🚀 Vue3 体系源码分析、流程标记、思维导图、Mini 版实现。

𝗛𝗲𝗹𝗹𝗼! 𝗜'𝗺 haiweilian ٩(๑>◡<๑)۶

Now I'm working at Rxjy Ltd as a web frontend developer.

Languages And Tools:

Open Source Projects And Contributors:

mirari/v-viewer . jdf2e/nutui . youzan/vant . pansyjs/watermark

vbenjs/vite-plugin-mock . vueComponent/ant-design-vue

bfehub/** 前端工程化解决方案工具包，开发模板、实用插件、代码规范
vnext-analysis Vue3 体系源码分析、流程标记、思维导图、Mini 版实现
vivy-nest-admin 基于 Nest.js & React.js & TypeORM 的后台权限管理系统

vnext-analysis's Issues

调试配置指引

编写时使用 yarn v1.x 、node v16.x

Vue 调试

• 构建开发版本

cd vue-next-3.2.0
yarn install
yarn build

• 构建完成后会有以下文件

• 在 Chrome 中调试

由于需要写很多的小测试，也避免经过工具转换更复杂所以就直接写在 html 了。可以通过 LiveServer 启动一个静态服务在浏览器调试。

• 在 VsCode 中调试

上面的服务不要关，启动 vscode 中的服务。会启动一个新的浏览器窗口，访问要调试的页面。

Pinia / Vuex / VueRouter 调试

这三个操作步骤一致，以 Pinia 举例演示。

• 构建开发版本

cd pinia-2.0.0
yarn install
yarn build

• 构建完成后会有以下文件

• 在 Chrome 中调试

// 启动调试项目
cd pinia-examples
yarn install
yarn dev

• 在 VsCode 中调试

上面的服务不要关，启动 vscode 中的服务。会启动一个新的浏览器窗口，访问要调试的页面。