Comments on the guide page

[chengpeiquan]

~

[yanggggjie]

写的真好！

[chengpeiquan]

写的真好！

谢谢！哈哈哈这一章是最近才新增的，如果觉得还有哪些不太清楚的可以告诉我，我继续完善上去~

[JoeC-CS]

太感谢大大了，救了孩子人机交互设计大作业的狗命！

[chengpeiquan]

太感谢大大了，救了孩子人机交互设计大作业的狗命！

哈哈哈哈哈哈作业加油！！！

[liuyuchen777]

写得太好了！

[chengpeiquan]

写得太好了！

哈哈哈谢谢！

[letterk]

举一个简单的例子，下面这个函数接收一个代表 “计数” 的入参，并拼接成一句话打印到控制台，因为最终打印出来的句子是字符串，所以参数没有必要非得是数值，传字符串也是可以的，所以我们就可以使用联合类型：

// 你可以在 demo 里运行这段代码
function counter(count: number | string) {
  console.log(`The current count is: ${count}.`)
}

// 不论传数值还是字符串，都可以达到我们的目的
counter(1)  // The current count is: 1.
counter('2')  // The current count is: 2.

在这里手打尝试练习的时候, 输出并没有获得传入的数值, 结果为:

The current count is: ${count}.

找不到原因, 直到我把整段代码复制过去才发现,

console.log(`The current count is: ${count}.`)

这里用的是 ` , 键盘1左边的这个符号.
这我的认知冲突了, 我还以为字符串只有引号.

在网上搜了一大圈才得到答案
搜中文居然连这个符号叫啥都搜不到, 搜英文才知道是重音符, 反引号.
有了关键词搜索才知道这个在js里是模板字符串

希望这段能加个tips, 对初学者更友好

[letterk]

起步准备这一章非常棒, 可以说有了这章, 这个教程才能称得上入门教程, 而不是面向有编程经验者的入门教程
去年我就收藏了教程, 最初是因为vue官方手册完全看不懂才找过来的
由于当时对js不太了解, ts更是不懂, 频频报错. 学习失败了

今年有了一些三件套基础后, 又来学习挑战了
有了这章以后, 明显感觉学的顺滑了许多, 作为一个没有关键词就无法面向谷歌编程的业余爱好者, 简直是救命灵药
准备认真的过一遍教程

[chengpeiquan]

举一个简单的例子，下面这个函数接收一个代表 “计数” 的入参，并拼接成一句话打印到控制台，因为最终打印出来的句子是字符串，所以参数没有必要非得是数值，传字符串也是可以的，所以我们就可以使用联合类型：

// 你可以在 demo 里运行这段代码
function counter(count: number | string) {
  console.log(`The current count is: ${count}.`)
}

// 不论传数值还是字符串，都可以达到我们的目的
counter(1)  // The current count is: 1.
counter('2')  // The current count is: 2.

在这里手打尝试练习的时候, 输出并没有获得传入的数值, 结果为:

The current count is: ${count}.

找不到原因, 直到我把整段代码复制过去才发现,

console.log(The current count is: ${count}.)

这里用的是 ` , 键盘1左边的这个符号. 这我的认知冲突了, 我还以为字符串只有引号.

在网上搜了一大圈才得到答案 搜中文居然连这个符号叫啥都搜不到, 搜英文才知道是重音符, 反引号. 有了关键词搜索才知道这个在js里是模板字符串

希望这段能加个tips, 对初学者更友好

这个确实是我之前没有考虑到的，没想到带来了这么大的理解门槛！提示我已经补充上去了，其他的我稍后有时间再检查一下看看哪里还需要做一些补充的我也再加上去，后面如果遇到有类似的问题也可以直接给我发邮件，这样问题也可以比较快得到解决，真是不好意思！

[chengpeiquan]

起步准备这一章非常棒, 可以说有了这章, 这个教程才能称得上入门教程, 而不是面向有编程经验者的入门教程 去年我就收藏了教程, 最初是因为vue官方手册完全看不懂才找过来的 由于当时对js不太了解, ts更是不懂, 频频报错. 学习失败了

今年有了一些三件套基础后, 又来学习挑战了 有了这章以后, 明显感觉学的顺滑了许多, 作为一个没有关键词就无法面向谷歌编程的业余爱好者, 简直是救命灵药 准备认真的过一遍教程

谢谢谢谢！很开心续写的新内容也得到认可！！！

[backtomoon]

写得真好，感谢分享，对我帮助很大。
阅读完我有两个疑惑：

• 关于开发依赖和生产依赖，文章中说的我可以理解，但是我不知道他们到底有什么本质区别，他们会影响打包吗？好像不会？
  后来我在知乎这个问题找到了答案，希望可以帮到有相同疑惑的人。

• 这里我看不懂，ESM不是可以直接在script标签了引入的么，这里是什么意思呢？希望大大能够解答orz。

事实上我们刚才编译的 JS 文件，因为涉及到模块化，是无法直接在 HTML 页面里使用的（单个文件可以，因为没有涉及模块）

[chengpeiquan]

写得真好，感谢分享，对我帮助很大。 阅读完我有两个疑惑：

• 关于开发依赖和生产依赖，文章中说的我可以理解，但是我不知道他们到底有什么本质区别，他们会影响打包吗？好像不会？
  后来我在知乎这个问题找到了答案，希望可以帮到有相同疑惑的人。
• 这里我看不懂，ESM不是可以直接在script标签了引入的么，这里是什么意思呢？希望大大能够解答orz。

事实上我们刚才编译的 JS 文件，因为涉及到模块化，是无法直接在 HTML 页面里使用的（单个文件可以，因为没有涉及模块）

收到~ 这几个问题我后面补充完善一下然后跟你说哈（最近在赶项目上线有点忙 (:з)∠)

[Leovenn]

非常不错 ，感触颇深。

[cattomgithub]

写得很好，之前的疑惑一扫而空

[firleaves]

谢谢，我这个前端一窍不通的人看了很容易理解

[chengpeiquan]

谢谢，我这个前端一窍不通的人看了很容易理解

谢谢阅读和认可！

[unpWn4bl3]

写的太好了，这一章彻底解决了我对现代前端开发流程的大部分疑惑，之前只是照着抄完全看不懂

[chengpeiquan]

写的太好了，这一章彻底解决了我对现代前端开发流程的大部分疑惑，之前只是照着抄完全看不懂

谢谢~ 加油！

[lianginx]

我的天，偶然间在 Google 搜索结果里看到了这个教程，写的太棒了，通俗易懂，跟着从头到尾操作下来，之前不明白的地方都基本上有了简单的理解，在这里搞明白了其中的原理之后在去深入学习就很方便了，谢谢作者！

这一章可以说的前端新手必看了，分享给小伙伴看看～

[chengpeiquan]

我的天，偶然间在 Google 搜索结果里看到了这个教程，写的太棒了，通俗易懂，跟着从头到尾操作下来，之前不明白的地方都基本上有了简单的理解，在这里搞明白了其中的原理之后在去深入学习就很方便了，谢谢作者！

这一章可以说的前端新手必看了，分享给小伙伴看看～

谢谢谢谢！中秋节快乐！

[arrheni]

cool

[MagicalBomb]

真的写的很不错，通俗易懂，由浅入深。 辛苦作者， 写这种最费时间经历了

[chengpeiquan]

真的写的很不错，通俗易懂，由浅入深。 辛苦作者， 写这种最费时间经历了

谢谢你的肯定！

[KayWong]

谢谢你的文章，让我对Web的整个体系有了全新的认识，也知道了这种发展的前因后果。对于只了解了三件套（HTML、CSS、JS）就跑去学各种高级框架有点懵逼的我来说，帮助特别大。

[2038854562]

感谢，收获很多

[HelloAllenZhu]

这篇教程完全秒杀Vue3官网的教程。

[Yeshan-Taoist]

• 默认导出

// src/esm/module.mjs
const bar = 2;
function foo(params) {
    console.log(params);
}
export default {
    foo,
    bar
}

• 默认导入

// src/esm/index.mjs
import m from "./module.mjs";
console.log(typeof m);
console.log(m);
m.foo(m.bar);

• 结果

> [email protected] dev:esm
> node src/esm/index.mjs

object
{ foo: [Function: foo], bar: 2 }
2

• 这里的结果怎么理解这句话?
  工程化前期准备->用 ES Module 设计模块->命名导出和导入的"但 ES Module 不是对象"

[chengpeiquan]

• 默认导出

// src/esm/module.mjs
const bar = 2;
function foo(params) {
    console.log(params);
}
export default {
    foo,
    bar
}

• 默认导入

// src/esm/index.mjs
import m from "./module.mjs";
console.log(typeof m);
console.log(m);
m.foo(m.bar);

• 结果

> [email protected] dev:esm
> node src/esm/index.mjs

object
{ foo: [Function: foo], bar: 2 }
2

• 这里的结果怎么理解这句话?
  工程化前期准备->用 ES Module 设计模块->命名导出和导入的"但 ES Module 不是对象"

写这句话的时候，上下文是关于 ESM 和 CJS 的对比的， ESM 使用 export default 默认导出一个对象的情况下，在另外一个模块里导入时，不能跟 CJS 一样使用 { foo } 这样的解构方式导入该对象里面的某个 Key ，我想想这个怎么换个比较容易理解的表达优化一下这部分的描述

[chengpeiquan]

• 默认导出

// src/esm/module.mjs
const bar = 2;
function foo(params) {
    console.log(params);
}
export default {
    foo,
    bar
}

• 默认导入

// src/esm/index.mjs
import m from "./module.mjs";
console.log(typeof m);
console.log(m);
m.foo(m.bar);

• 结果

> [email protected] dev:esm
> node src/esm/index.mjs

object
{ foo: [Function: foo], bar: 2 }
2

• 这里的结果怎么理解这句话?
  工程化前期准备->用 ES Module 设计模块->命名导出和导入的"但 ES Module 不是对象"

写这句话的时候，上下文是关于 ESM 和 CJS 的对比的， ESM 使用 export default 默认导出一个对象的情况下，在另外一个模块里导入时，不能跟 CJS 一样使用 { foo } 这样的解构方式导入该对象里面的某个 Key ，我想想这个怎么换个比较容易理解的表达优化一下这部分的描述

@Yeshan-Taoist Hi，这部分内容 已更新~

[Yeshan-Taoist]

感谢解答，今天终于陆陆续续看完工程化的前期准备
之前都是在官网东一榔头，西一榔头的阅读
这份入门指导对于补足一些显而易见的常识起到很好的作用，感谢作者的辛苦付出。

[chengpeiquan]

感谢解答，今天终于陆陆续续看完工程化的前期准备 之前都是在官网东一榔头，西一榔头的阅读 这份入门指导对于补足一些显而易见的常识起到很好的作用，感谢作者的辛苦付出。

不客气的！也谢谢你的阅读和支持！

[yibaoch]

支持作者 写的很详细 爱你

[chengpeiquan]

支持作者 写的很详细 爱你

谢谢支持！新年快乐！

[free-free]

后端同学，最近想搞点前端的东西，你写得好详细，感谢

[chengpeiquan]

后端同学，最近想搞点前端的东西，你写得好详细，感谢

谢谢！新年好！

[guruhao]

这个入门实在太友好了，一口气读了两章。建议浏览器使用esm模块那节readFileSync()加一段判断文件是否存在，因为我输错了http://localhost:8080/indx.mjs这种会去访问一个不存在的文件，把HTTP server搞down了，排查好半天。

[chengpeiquan]

这个入门实在太友好了，一口气读了两章。建议浏览器使用esm模块那节readFileSync()加一段判断文件是否存在，因为我输错了http://localhost:8080/indx.mjs这种会去访问一个不存在的文件，把HTTP server搞down了，排查好半天。

谢谢支持！提到的这个启动失败的情况确实容易存在，我去加个提示上去，引导如何排查错误~

[Frankie32244]

学到了！膜拜大佬的创作！希望大佬后续能创作出更多的优秀作品！期待....

[fiveeth]

感谢大佬

[caiyua]

我真的太幸运遇到这个文档了。我学vue学得头疼，明明一些语法都知道怎么用了，还一直找什么视频项目教程去跟着做（各种不如意，过程就不说了）。突然想到，做项目应该先模仿别人的代码，看看别人项目的代码怎么写的，自己模仿着模仿着才能够学会。然后我在github上面找呀找，竟然点进这篇详细的入门文档，而且连续看了2个小时至少了应该吧，看到这。看来有的人说看文档才是最快的学习方法也不无道理，主要是这个文档作者写得太好了，各种详细介绍，代码解释，把我不明白的解释明白，明白的解释得更明白，。。厉害啊。过一会睡了，明天早上接着学typescript！（2023-05-06-00:40）

[chengpeiquan]

我真的太幸运遇到这个文档了。我学vue学得头疼，明明一些语法都知道怎么用了，还一直找什么视频项目教程去跟着做（各种不如意，过程就不说了）。突然想到，做项目应该先模仿别人的代码，看看别人项目的代码怎么写的，自己模仿着模仿着才能够学会。然后我在github上面找呀找，竟然点进这篇详细的入门文档，而且连续看了2个小时至少了应该吧，看到这。看来有的人说看文档才是最快的学习方法也不无道理，主要是这个文档作者写得太好了，各种详细介绍，代码解释，把我不明白的解释明白，明白的解释得更明白，。。厉害啊。过一会睡了，明天早上接着学typescript！（2023-05-06-00:40）

谢谢你这么认真的评论和赞赏！加油！祝你学习顺利工作顺利！

[michael2299]

网上看了很多前端的文章，这个是最好的，把很多概率/工具的前世今生讲的很清楚，一口气看了几章网页版，买本纸质的书继续看

[chengpeiquan]

网上看了很多前端的文章，这个是最好的，把很多概率/工具的前世今生讲的很清楚，一口气看了几章网页版，买本纸质的书继续看

太感谢了！

[wanglihuaya]

的项目本身也是一个包。

大佬 这里多了一个 “的” 字

[bladeyon]

ESM 设计模块那一段，在“命名导出和导入”解释默认导出不能“解构”没说清楚。

import { foo, ... } from './esm.mjs'导入的是esm.mjs中通过export直接导出的值；而export default导出的应该用import def from './esm.mjs'或import { default as def } from './esm.mjs'导入。

// ems.mjs
export const foo = 1;
export default {
  a: 1
};

// index.mjs
import def from './esm.mjs'; // 只导入默认导出
import { default as def2 } from './esm.mjs';
import def3, { foo } from './esm.mjs'; // 只导入所有
import * as all from './esm.mjs'; // 导入所有并重命名

console.log(def); // { a: 1 }
console.log(def3, def2, foo); // { a: 1 } { a: 1 } 1
console.log(all); // { default: { a: 1 }, foo: 1 }

[chengpeiquan]

ESM 设计模块那一段，在“命名导出和导入”解释默认导出不能“解构”没说清楚。

这里是相对于上一小节 CommonJS 的特地对比说明，这句话完全被忽略了看起来：

“虽然默认导出的时候， CJS 和 ESM 的写法非常相似，但命名导出却完全不同！”

在 CommonJS 里可以通过 module.exports 导出一个对象，在另外一个模块可以直接解构导入对象上的某个属性 const { foo, bar } = require('./module.cjs') ，

“不能解构” 是针对 export default { foo: 1 } 后，不能 import { foo } from './module.mjs' 来只导入对象里的某个属性，并不是对比 export default 和 export 的。

[19774279]

这一章写得太好了，这么说吧，网上总是说VUE3简单，入门简单，使用简单，哪哪都简单。但真正情况是，如果没有前端打包基础的人来学，会发现什么都不简单，跑个HelloWorld比jQuery困难了100倍。这一章把这里需要的所有基础知识都介绍到了，而且非常详细。
如果用大学教材来打比方，这篇文章就像外国人写的微积分教材，其他的前端书籍、视频就是中国人写的微积分教材。

[chengpeiquan]

这一章写得太好了，这么说吧，网上总是说VUE3简单，入门简单，使用简单，哪哪都简单。但真正情况是，如果没有前端打包基础的人来学，会发现什么都不简单，跑个HelloWorld比jQuery困难了100倍。这一章把这里需要的所有基础知识都介绍到了，而且非常详细。 如果用大学教材来打比方，这篇文章就像外国人写的微积分教材，其他的前端书籍、视频就是中国人写的微积分教材。

谢谢您的称赞！新年快乐！

[PCJ600]

写的太好了，很幸运读到了这些文档，感谢作者！