[{"data":1,"prerenderedAt":828},["ShallowReactive",2],{"toc-zh-\u002Fguide\u002Fenvironment":3,"page-zh-\u002Fguide\u002Fenvironment":500},{"id":4,"title":5,"body":6,"description":493,"extension":494,"meta":495,"navigation":431,"path":496,"seo":497,"stem":498,"__hash__":499},"content_zh\u002Fguide\u002Fenvironment.md","环境准备",{"type":7,"value":8,"toc":471},"minimark",[9,22,27,40,44,51,56,65,68,82,87,91,94,101,105,108,130,133,141,148,152,155,158,162,165,184,187,207,211,222,228,232,235,256,265,269,273,276,295,298,320,323,342,346,359,363,375,386,390,402,404,410,417,420,467],[10,11,12,16,17,21],"p",{},[13,14,15],"strong",{},"本章目标","：在你的电脑上安装 Node.js 和 pnpm，然后创建一个可以运行的 Nuxt 项目。学完本章你将有一个可访问 ",[18,19,20],"code",{},"http:\u002F\u002Flocalhost:3000"," 的空白 Nuxt 项目。",[23,24,26],"h2",{"id":25},"什么时候需要看这章","什么时候需要看这章？",[28,29,30,34,37],"ul",{},[31,32,33],"li",{},"你是第一次接触前端开发，电脑上没有任何前端工具",[31,35,36],{},"你的电脑重装过系统，需要重新搭建环境",[31,38,39],{},"你已经安装了 Node.js 但不熟悉 pnpm",[23,41,43],{"id":42},"第-1-步安装-nodejs","第 1 步：安装 Node.js",[10,45,46,47,50],{},"Node.js 是 Nuxt 运行的基础环境。Nuxt 4 要求 ",[13,48,49],{},"Node.js >= 22.0.0","。",[52,53,55],"h3",{"id":54},"_11-下载安装包","1.1 下载安装包",[10,57,58,59],{},"打开 Node.js 官网： ",[60,61,62],"a",{"href":62,"rel":63},"https:\u002F\u002Fnodejs.org",[64],"nofollow",[10,66,67],{},"你会看到两个版本：",[28,69,70,76],{},[31,71,72,75],{},[13,73,74],{},"LTS","（长期支持版）：推荐大多数人使用，稳定可靠",[31,77,78,81],{},[13,79,80],{},"Current","（最新版）：包含最新功能，但可能有 bug",[10,83,84],{},[13,85,86],{},"选择 LTS 版本，点击下载即可。",[52,88,90],{"id":89},"_12-安装","1.2 安装",[10,92,93],{},"下载完成后，双击安装包，一路点\"下一步\"即可完成安装。",[10,95,96,97,100],{},"安装过程中有一个选项叫做 ",[13,98,99],{},"\"Automatically install the necessary tools\"","，勾选它（它会自动安装一些编译工具，后面可能用到）。",[52,102,104],{"id":103},"_13-验证安装","1.3 验证安装",[10,106,107],{},"安装完成后，打开终端（PowerShell \u002F CMD \u002F Terminal 都可以），输入以下命令：",[109,110,115],"pre",{"className":111,"code":112,"language":113,"meta":114,"style":114},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","node --version\n","bash","",[18,116,117],{"__ignoreMap":114},[118,119,122,126],"span",{"class":120,"line":121},"line",1,[118,123,125],{"class":124},"sBMFI","node",[118,127,129],{"class":128},"sfazB"," --version\n",[10,131,132],{},"你应该看到类似这样的输出：",[109,134,139],{"className":135,"code":137,"language":138},[136],"language-text","v22.12.0\n","text",[18,140,137],{"__ignoreMap":114},[10,142,143,144,147],{},"版本号大于等于 ",[18,145,146],{},"22.0.0"," 就说明安装成功了。",[23,149,151],{"id":150},"第-2-步安装-pnpm","第 2 步：安装 pnpm",[10,153,154],{},"pnpm 是一个 JavaScript 包管理器。你可以把它理解成一个\"应用商店\"——别人写好的代码打包发布上去，你用 pnpm 下载安装。",[10,156,157],{},"Nuxt Dict 项目强制使用 pnpm，不能用 npm 或 yarn。",[52,159,161],{"id":160},"_21-安装-pnpm","2.1 安装 pnpm",[10,163,164],{},"在终端中输入：",[109,166,168],{"className":111,"code":167,"language":113,"meta":114,"style":114},"npm install -g pnpm\n",[18,169,170],{"__ignoreMap":114},[118,171,172,175,178,181],{"class":120,"line":121},[118,173,174],{"class":124},"npm",[118,176,177],{"class":128}," install",[118,179,180],{"class":128}," -g",[118,182,183],{"class":128}," pnpm\n",[10,185,186],{},"这条命令的含义是：",[28,188,189,195,201],{},[31,190,191,194],{},[18,192,193],{},"npm install"," = 用 npm 安装一个包",[31,196,197,200],{},[18,198,199],{},"-g","（global）= 全局安装，之后在任何目录都能用 pnpm 命令",[31,202,203,206],{},[18,204,205],{},"pnpm"," = 我们要装的包名",[52,208,210],{"id":209},"_22-验证安装","2.2 验证安装",[109,212,214],{"className":111,"code":213,"language":113,"meta":114,"style":114},"pnpm --version\n",[18,215,216],{"__ignoreMap":114},[118,217,218,220],{"class":120,"line":121},[118,219,205],{"class":124},[118,221,129],{"class":128},[10,223,224,225,50],{},"输出应该大于等于 ",[18,226,227],{},"10.22.0",[52,229,231],{"id":230},"_23-配置镜像源可选推荐","2.3 配置镜像源（可选，推荐）",[10,233,234],{},"国内的网络环境访问国外 npm 仓库可能比较慢。配置淘宝镜像可以加速下载：",[109,236,238],{"className":111,"code":237,"language":113,"meta":114,"style":114},"pnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\u002F\n",[18,239,240],{"__ignoreMap":114},[118,241,242,244,247,250,253],{"class":120,"line":121},[118,243,205],{"class":124},[118,245,246],{"class":128}," config",[118,248,249],{"class":128}," set",[118,251,252],{"class":128}," registry",[118,254,255],{"class":128}," https:\u002F\u002Fregistry.npmmirror.com\u002F\n",[257,258,259],"blockquote",{},[10,260,261,264],{},[13,262,263],{},"镜像源是什么？"," 简单理解就是把国外的服务器上存的数据在国内服务器上复制了一份，国内下载更快。",[23,266,268],{"id":267},"第-3-步创建-nuxt-项目","第 3 步：创建 Nuxt 项目",[52,270,272],{"id":271},"_31-初始化项目","3.1 初始化项目",[10,274,275],{},"打开终端，进入你想放项目代码的目录，然后运行：",[109,277,279],{"className":111,"code":278,"language":113,"meta":114,"style":114},"npx nuxi init my-app\n",[18,280,281],{"__ignoreMap":114},[118,282,283,286,289,292],{"class":120,"line":121},[118,284,285],{"class":124},"npx",[118,287,288],{"class":128}," nuxi",[118,290,291],{"class":128}," init",[118,293,294],{"class":128}," my-app\n",[10,296,297],{},"这个命令会：",[28,299,300,310],{},[31,301,302,305,306,309],{},[18,303,304],{},"npx nuxi"," = 临时下载并运行 ",[18,307,308],{},"nuxi","（Nuxt 的项目脚手架工具）",[31,311,312,315,316,319],{},[18,313,314],{},"init my-app"," = 创建一个名为 ",[18,317,318],{},"my-app"," 的项目",[10,321,322],{},"运行过程中它会问你几个问题：",[28,324,325,333],{},[31,326,327,330,331],{},[13,328,329],{},"Which package manager would you like to use?"," → 选择 ",[13,332,205],{},[31,334,335,330,338,341],{},[13,336,337],{},"Initialize git repository?",[13,339,340],{},"Yes","（推荐）",[52,343,345],{"id":344},"_32-进入项目目录","3.2 进入项目目录",[109,347,349],{"className":111,"code":348,"language":113,"meta":114,"style":114},"cd my-app\n",[18,350,351],{"__ignoreMap":114},[118,352,353,357],{"class":120,"line":121},[118,354,356],{"class":355},"s2Zo4","cd",[118,358,294],{"class":128},[52,360,362],{"id":361},"_33-安装依赖","3.3 安装依赖",[109,364,366],{"className":111,"code":365,"language":113,"meta":114,"style":114},"pnpm install\n",[18,367,368],{"__ignoreMap":114},[118,369,370,372],{"class":120,"line":121},[118,371,205],{"class":124},[118,373,374],{"class":128}," install\n",[10,376,377,378,381,382,385],{},"这个命令会根据 ",[18,379,380],{},"package.json"," 里声明的依赖列表，把所有需要的包下载到 ",[18,383,384],{},"node_modules\u002F"," 目录。",[52,387,389],{"id":388},"_34-启动项目","3.4 启动项目",[109,391,393],{"className":111,"code":392,"language":113,"meta":114,"style":114},"pnpm dev\n",[18,394,395],{"__ignoreMap":114},[118,396,397,399],{"class":120,"line":121},[118,398,205],{"class":124},[118,400,401],{"class":128}," dev\n",[10,403,132],{},[109,405,408],{"className":406,"code":407,"language":138},[136],"Nuxt 4.x.x\n\n> Local:    http:\u002F\u002Flocalhost:3000\u002F\n",[18,409,407],{"__ignoreMap":114},[10,411,412,413,416],{},"在浏览器中打开 ",[18,414,415],{},"http:\u002F\u002Flocalhost:3000\u002F","，看到 Nuxt 的欢迎页面，就说明项目创建成功了！",[23,418,419],{"id":419},"本章你学会了",[28,421,424,434,440,450,459],{"className":422},[423],"contains-task-list",[31,425,428,433],{"className":426},[427],"task-list-item",[429,430],"input",{"disabled":431,"type":432},true,"checkbox"," 在电脑上安装 Node.js（版本 >= 22）",[31,435,437,439],{"className":436},[427],[429,438],{"disabled":431,"type":432}," 安装 pnpm 包管理器",[31,441,443,445,446,449],{"className":442},[427],[429,444],{"disabled":431,"type":432}," 用 ",[18,447,448],{},"npx nuxi init"," 创建一个 Nuxt 项目",[31,451,453,445,455,458],{"className":452},[427],[429,454],{"disabled":431,"type":432},[18,456,457],{},"pnpm dev"," 启动开发服务器",[31,460,462,464,465],{"className":461},[427],[429,463],{"disabled":431,"type":432}," 在浏览器中访问 ",[18,466,20],{},[468,469,470],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":114,"searchDepth":472,"depth":472,"links":473},2,[474,475,481,486,492],{"id":25,"depth":472,"text":26},{"id":42,"depth":472,"text":43,"children":476},[477,479,480],{"id":54,"depth":478,"text":55},3,{"id":89,"depth":478,"text":90},{"id":103,"depth":478,"text":104},{"id":150,"depth":472,"text":151,"children":482},[483,484,485],{"id":160,"depth":478,"text":161},{"id":209,"depth":478,"text":210},{"id":230,"depth":478,"text":231},{"id":267,"depth":472,"text":268,"children":487},[488,489,490,491],{"id":271,"depth":478,"text":272},{"id":344,"depth":478,"text":345},{"id":361,"depth":478,"text":362},{"id":388,"depth":478,"text":389},{"id":419,"depth":472,"text":419},"安装 Node.js 和 pnpm，创建你的第一个 Nuxt 项目。","md",{},"\u002Fguide\u002Fenvironment",{"title":5,"description":493},"guide\u002Fenvironment","I4z7mYS_WJyVTH1m6IUda_9o_4Mn-gSwU_GAImHW0OY",{"id":4,"title":5,"body":501,"description":493,"extension":494,"meta":826,"navigation":431,"path":496,"seo":827,"stem":498,"__hash__":499},{"type":7,"value":502,"toc":806},[503,509,511,519,521,525,527,532,534,544,548,550,552,556,558,560,570,572,577,581,583,585,587,589,591,605,607,621,623,633,637,639,641,657,663,665,667,669,683,685,699,701,715,717,727,729,739,745,747,757,759,764,768,770,804],[10,504,505,16,507,21],{},[13,506,15],{},[18,508,20],{},[23,510,26],{"id":25},[28,512,513,515,517],{},[31,514,33],{},[31,516,36],{},[31,518,39],{},[23,520,43],{"id":42},[10,522,46,523,50],{},[13,524,49],{},[52,526,55],{"id":54},[10,528,58,529],{},[60,530,62],{"href":62,"rel":531},[64],[10,533,67],{},[28,535,536,540],{},[31,537,538,75],{},[13,539,74],{},[31,541,542,81],{},[13,543,80],{},[10,545,546],{},[13,547,86],{},[52,549,90],{"id":89},[10,551,93],{},[10,553,96,554,100],{},[13,555,99],{},[52,557,104],{"id":103},[10,559,107],{},[109,561,562],{"className":111,"code":112,"language":113,"meta":114,"style":114},[18,563,564],{"__ignoreMap":114},[118,565,566,568],{"class":120,"line":121},[118,567,125],{"class":124},[118,569,129],{"class":128},[10,571,132],{},[109,573,575],{"className":574,"code":137,"language":138},[136],[18,576,137],{"__ignoreMap":114},[10,578,143,579,147],{},[18,580,146],{},[23,582,151],{"id":150},[10,584,154],{},[10,586,157],{},[52,588,161],{"id":160},[10,590,164],{},[109,592,593],{"className":111,"code":167,"language":113,"meta":114,"style":114},[18,594,595],{"__ignoreMap":114},[118,596,597,599,601,603],{"class":120,"line":121},[118,598,174],{"class":124},[118,600,177],{"class":128},[118,602,180],{"class":128},[118,604,183],{"class":128},[10,606,186],{},[28,608,609,613,617],{},[31,610,611,194],{},[18,612,193],{},[31,614,615,200],{},[18,616,199],{},[31,618,619,206],{},[18,620,205],{},[52,622,210],{"id":209},[109,624,625],{"className":111,"code":213,"language":113,"meta":114,"style":114},[18,626,627],{"__ignoreMap":114},[118,628,629,631],{"class":120,"line":121},[118,630,205],{"class":124},[118,632,129],{"class":128},[10,634,224,635,50],{},[18,636,227],{},[52,638,231],{"id":230},[10,640,234],{},[109,642,643],{"className":111,"code":237,"language":113,"meta":114,"style":114},[18,644,645],{"__ignoreMap":114},[118,646,647,649,651,653,655],{"class":120,"line":121},[118,648,205],{"class":124},[118,650,246],{"class":128},[118,652,249],{"class":128},[118,654,252],{"class":128},[118,656,255],{"class":128},[257,658,659],{},[10,660,661,264],{},[13,662,263],{},[23,664,268],{"id":267},[52,666,272],{"id":271},[10,668,275],{},[109,670,671],{"className":111,"code":278,"language":113,"meta":114,"style":114},[18,672,673],{"__ignoreMap":114},[118,674,675,677,679,681],{"class":120,"line":121},[118,676,285],{"class":124},[118,678,288],{"class":128},[118,680,291],{"class":128},[118,682,294],{"class":128},[10,684,297],{},[28,686,687,693],{},[31,688,689,305,691,309],{},[18,690,304],{},[18,692,308],{},[31,694,695,315,697,319],{},[18,696,314],{},[18,698,318],{},[10,700,322],{},[28,702,703,709],{},[31,704,705,330,707],{},[13,706,329],{},[13,708,205],{},[31,710,711,330,713,341],{},[13,712,337],{},[13,714,340],{},[52,716,345],{"id":344},[109,718,719],{"className":111,"code":348,"language":113,"meta":114,"style":114},[18,720,721],{"__ignoreMap":114},[118,722,723,725],{"class":120,"line":121},[118,724,356],{"class":355},[118,726,294],{"class":128},[52,728,362],{"id":361},[109,730,731],{"className":111,"code":365,"language":113,"meta":114,"style":114},[18,732,733],{"__ignoreMap":114},[118,734,735,737],{"class":120,"line":121},[118,736,205],{"class":124},[118,738,374],{"class":128},[10,740,377,741,381,743,385],{},[18,742,380],{},[18,744,384],{},[52,746,389],{"id":388},[109,748,749],{"className":111,"code":392,"language":113,"meta":114,"style":114},[18,750,751],{"__ignoreMap":114},[118,752,753,755],{"class":120,"line":121},[118,754,205],{"class":124},[118,756,401],{"class":128},[10,758,132],{},[109,760,762],{"className":761,"code":407,"language":138},[136],[18,763,407],{"__ignoreMap":114},[10,765,412,766,416],{},[18,767,415],{},[23,769,419],{"id":419},[28,771,773,778,783,790,797],{"className":772},[423],[31,774,776,433],{"className":775},[427],[429,777],{"disabled":431,"type":432},[31,779,781,439],{"className":780},[427],[429,782],{"disabled":431,"type":432},[31,784,786,445,788,449],{"className":785},[427],[429,787],{"disabled":431,"type":432},[18,789,448],{},[31,791,793,445,795,458],{"className":792},[427],[429,794],{"disabled":431,"type":432},[18,796,457],{},[31,798,800,464,802],{"className":799},[427],[429,801],{"disabled":431,"type":432},[18,803,20],{},[468,805,470],{},{"title":114,"searchDepth":472,"depth":472,"links":807},[808,809,814,819,825],{"id":25,"depth":472,"text":26},{"id":42,"depth":472,"text":43,"children":810},[811,812,813],{"id":54,"depth":478,"text":55},{"id":89,"depth":478,"text":90},{"id":103,"depth":478,"text":104},{"id":150,"depth":472,"text":151,"children":815},[816,817,818],{"id":160,"depth":478,"text":161},{"id":209,"depth":478,"text":210},{"id":230,"depth":478,"text":231},{"id":267,"depth":472,"text":268,"children":820},[821,822,823,824],{"id":271,"depth":478,"text":272},{"id":344,"depth":478,"text":345},{"id":361,"depth":478,"text":362},{"id":388,"depth":478,"text":389},{"id":419,"depth":472,"text":419},{},{"title":5,"description":493},1782551377679]