{"_path":"/docs/env/frontend","_draft":false,"_partial":false,"_empty":false,"title":"前端开发环境","description":"Vue.js 是在宁皓独立开发者训练营中选择使用的前端应用框架，我们会基于 Vue.js 开发应用的前端，也就是可以通过浏览器使用的应用。","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"前端web应用开发环境"},"children":[{"type":"text","value":"前端（Web）应用开发环境"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue.js 是在宁皓独立开发者训练营中选择使用的前端应用框架，我们会基于 Vue.js 开发应用的前端，也就是可以通过浏览器使用的应用。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在本地准备好基于 Vue.js 框架的应用开发环境，可以先准备一个调试应用需要的 Chrome 浏览器，在系统里装好 Node.js，再安装一下 Vue.js 框架提供的命令行工具，用这个命令行工具创建一个 Vue.js 应用项目，启动项目的开发服务，再用 VSCode 打开这个项目，就可以开启本次训练营的前端应用开发之旅了。"}]},{"type":"element","tag":"h2","props":{"id":"chrome"},"children":[{"type":"text","value":"Chrome"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在训练营中，我们会使用 Chrome 浏览器测试基于 Vue.js 开发的前端应用。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"安装-chrome"},"children":[{"type":"text","value":"安装 Chrome"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chrome 是 Google 公司开发的产品，在国内无法正常访问 Chrome 浏览器的官方网站，我们可以在百度搜索 Chrome 关键词，通过第三方网站下载这款浏览器。"}]},{"type":"element","tag":"h3","props":{"id":"开发者工具"},"children":[{"type":"text","value":"开发者工具"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chrome 浏览器的开发者工具是前端工程师必备的工具之一，在训练营中，我们会在开发者工具里检查界面元素，在控制台查看输出的调试数据，在应用标签里查看本地存储等等。打开这个工具可以通过菜单 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"视图"}]},{"type":"text","value":" - "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"开发者"}]},{"type":"text","value":" - "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"开发者工具"}]},{"type":"text","value":"。或者使用快捷键 alt + command + I（macOS）、ctrl + shift + I（Windows）。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(1).png"},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"界面语言"},"children":[{"type":"text","value":"界面语言"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在开发者工具 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"设置"}]},{"type":"text","value":" - "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"偏好设置"}]},{"type":"text","value":" 里，打开 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"语言"}]},{"type":"text","value":" 这个下拉菜单，在这里可以选择开发者工具的界面使用的语言。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(2).png"},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"元素"},"children":[{"type":"text","value":"元素"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在开发者工具的元素选项卡可以检查界面元素，比如定位元素在界面上的显示，应用在元素上的样式等等。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(3).png"},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"控制台"},"children":[{"type":"text","value":"控制台"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"开发调试前端应用时，我们经常会使用 console.log() 在控制台上输出一些数据，在开发者工具的 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"控制台"}]},{"type":"text","value":" 标签里，可以查看前端应用输出到控制台上的数据。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(4).png"},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"应用"},"children":[{"type":"text","value":"应用"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"前端应用会在浏览器的本地存储里存储一些数据，在开发者工具 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"应用"}]},{"type":"text","value":" 标签的下面，可以在 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"存储"}]},{"type":"text","value":" 的下面，查看应用的 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"本地存储空间"}]},{"type":"text","value":" 里的数据。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(5).png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"nodejs"},"children":[{"type":"text","value":"Node.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在训练营中开发 Vue.js 应用时，应用的开发服务与创建应用零部件需要的命令行工具都需要用到 Node.js。在准备服务端应用开发环境的时候，我们已经在系统里准备好了 Node.js。"}]},{"type":"element","tag":"h2","props":{"id":"yarn"},"children":[{"type":"text","value":"Yarn"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"yarn 与 npm 一样，都可以作为 Node.js 项目的包管理工具。在开发 Node.js 服务端项目或者前端项目都会用到包管理工具，一般来说二选其一即可，在 NIDC（宁皓独立开发者训练营） 中，开发服务端项目的时候会使用 npm 作为包管理工具，开发基于 Vue.js 框架的前端应用时，会使用 yarn 作为项目的包管理工具。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"官方网站"}]},{"type":"text","value":"："},{"type":"element","tag":"a","props":{"href":"https://yarnpkg.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://yarnpkg.com/"}]}]},{"type":"element","tag":"h3","props":{"id":"安装-yarn"},"children":[{"type":"text","value":"安装 Yarn"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以前需要用 npm 安装 yarn，现在 yarn 这个包管理工具包含在版本 >=16.10 的 Node.js 里，在终端执行一下："}]},{"type":"element","tag":"code","props":{"code":"corepack enable\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"corepack enable\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果使用的 Node.js 版本 <16.10，可以在全局范围安装一下 corepack："}]},{"type":"element","tag":"code","props":{"code":"npm install corepack --global\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install corepack --global\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"完成以后，应该就可以使用 yarn 这个包管理工具了。"}]},{"type":"element","tag":"code","props":{"code":"yarn --help\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn --help\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vuejs"},"children":[{"type":"text","value":"Vue.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 NIDC（宁皓独立开发者训练营）中，我们会使用 Vue 提供的命令行工具，比如去创建全部的 Vue 项目，启动本地开发服务，编译生成在生产环境上使用的应用等等。"}]},{"type":"element","tag":"h3","props":{"id":"vue-cli-命令行工具"},"children":[{"type":"text","value":"Vue CLI 命令行工具"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在全局范围安装一下 Vue CLI 这个包，这样就可以在任何地方使用 vue 命令了。"}]},{"type":"element","tag":"code","props":{"code":"npm install @vue/cli --global\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install @vue/cli --global\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在终端，用 npm 在全局范围安装一个叫 @vue/cli 的东西，这个 @vue/cli 是软件包的名字，Vue 官方提供的软件包，很多都有 @vue 这个前缀。安装完成以后，执行 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"vue -h"}]},{"type":"text","value":" ，如果能正常的看到命令的帮助信息，就说明成功地安装了 Vue CLI。"}]},{"type":"element","tag":"h3","props":{"id":"使用-vue-cli-创建项目"},"children":[{"type":"text","value":"使用 Vue CLI 创建项目"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在全局范围安装了 @vue/cli 这个软件包以后，可以使用 vue 这个命令，我们可以使用它创建一个 Vue 项目。"}]},{"type":"element","tag":"code","props":{"code":"cd ~/desktop\nvue create nid-vue\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ~/desktop\nvue create nid-vue\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"进入到想要保存项目的地方以后，执行 vue create 命令创建一个名字是 nid-vue 的 Vue 项目，这个命令会问一些问题。"}]},{"type":"element","tag":"code","props":{"code":"? Please pick a preset:\n  Default ([Vue 3] babel, eslint)\n  Default ([Vue 2] babel, eslint)\n❯ Manually select features\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Please pick a preset:\n  Default ([Vue 3] babel, eslint)\n  Default ([Vue 2] babel, eslint)\n❯ Manually select features\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"首先可以选择一个项目的预设（preset），选择 Default Vue 3 会创建一个默认的使用 3.x 版本的 Vue 项目。我们可以选择 Manually select features（手动选择功能），用键盘的上下箭头按键可以选择，按下回车确定选择。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(6).png"},"children":[]},{"type":"text","value":"\n如果选择手动选择功能，会让我们继续选择项目需要的一些功能，按空格按键可以切换选择功能，比如可以将 TypeScript、Router、Vuex 这几个功能选上，按回车继续下一步。"}]},{"type":"element","tag":"code","props":{"code":"? Choose a version of Vue.js that you want to start the project with\n❯ 3.x\n  2.x\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Choose a version of Vue.js that you want to start the project with\n❯ 3.x\n  2.x\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这一步是选择要使用的 Vue 版本，默认选择 3.x。"}]},{"type":"element","tag":"code","props":{"code":"? Use class-style component syntax? (y/N)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Use class-style component syntax? (y/N)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"是否选择类风格的组件，默认是 N，表示不选择。"}]},{"type":"element","tag":"code","props":{"code":"? Use Babel alongside TypeScript? (Y/n)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Use Babel alongside TypeScript? (Y/n)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"是否要使用 Babel，可以选择使用 Babel。"}]},{"type":"element","tag":"code","props":{"code":"? Use history mode for router? (Y/n)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Use history mode for router? (Y/n)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"是否使用历史模式的路由器，选择使用这种模式的路由器。"}]},{"type":"element","tag":"code","props":{"code":"? Pick a linter / formatter config:\n❯ ESLint with error prevention only\n  ESLint + Airbnb config\n  ESLint + Standard config\n  ESLint + Prettier\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Pick a linter / formatter config:\n❯ ESLint with error prevention only\n  ESLint + Airbnb config\n  ESLint + Standard config\n  ESLint + Prettier\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"选择检查器与格式化器的配置，可以选择默认的 ESLint with error prevention only。"}]},{"type":"element","tag":"code","props":{"code":"? Pick additional lint features:\n❯◉ Lint on save\n ◯ Lint and fix on commit\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Pick additional lint features:\n❯◉ Lint on save\n ◯ Lint and fix on commit\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"选择额外的检查功能，可以选中 Lint on save，然后按回车继续。"}]},{"type":"element","tag":"code","props":{"code":"? Save this as a preset for future projects? (y/N)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Save this as a preset for future projects? (y/N)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"是否保存为预设，这样以后使用 vue create 命令创建 Vue 项目的时候，可以直接选择使用这个预设，输入 N ，按下回车，表示不保存为预设。"}]},{"type":"element","tag":"code","props":{"code":"🎉  Successfully created project nid-vue.\n👉  Get started with the following commands:\n\n $ cd nid-vue\n $ yarn serve\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"🎉  Successfully created project nid-vue.\n👉  Get started with the following commands:\n\n $ cd nid-vue\n $ yarn serve\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue CLI 会根据我们做出的选择将 Vue 项目准备好，成功以后会提示 Successfully created project ..."}]},{"type":"element","tag":"h3","props":{"id":"启动本地开发服务"},"children":[{"type":"text","value":"启动本地开发服务"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用 Vue CLI 成功创建了一个 Vue 项目以后，可以使用 VSCode 编辑器打开这个项目。然后可以在终端启动这个 Vue 项目的开发服务，这样就可以在浏览器通过一个本地的地址访问到我们正在开发的 Vue 项目，在编辑器修改项目，保存项目文件以后，在浏览器上显示的应用会实时更新，显示修改之后的项目。"}]},{"type":"element","tag":"code","props":{"code":"cd ~/desktop/nid-vue\nyarn serve\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ~/desktop/nid-vue\nyarn serve\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在终端，进入到项目所在目录以后，执行 yarn serve，这会启动 Vue 项目的本地开发服务，给我们的项目创建一个 Web 服务器，通过一个特定的地址可以直接访问正在开发的 Vue 应用。serve 这个命令是在项目的 package.json 文件里的 scripts 下面定义的。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(7).png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Vue 项目开发服务启动后的提示"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"开发服务启动以后会给出访问的地址，在本地电脑上可以通过 localhost 访问，注意访问地址里会带着一个特定的端口号，默认是 8080。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(8).png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 Chrome 浏览器访问 Vue 项目的本地开发服务的地址，会显示 Vue 项目默认的一个欢迎界面。"}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"前端web应用开发环境"},"children":[{"type":"text","value":"前端（Web）应用开发环境"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue.js 是在宁皓独立开发者训练营中选择使用的前端应用框架，我们会基于 Vue.js 开发应用的前端，也就是可以通过浏览器使用的应用。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在本地准备好基于 Vue.js 框架的应用开发环境，可以先准备一个调试应用需要的 Chrome 浏览器，在系统里装好 Node.js，再安装一下 Vue.js 框架提供的命令行工具，用这个命令行工具创建一个 Vue.js 应用项目，启动项目的开发服务，再用 VSCode 打开这个项目，就可以开启本次训练营的前端应用开发之旅了。"}]},{"type":"element","tag":"h2","props":{"id":"chrome"},"children":[{"type":"text","value":"Chrome"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在训练营中，我们会使用 Chrome 浏览器测试基于 Vue.js 开发的前端应用。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"安装-chrome"},"children":[{"type":"text","value":"安装 Chrome"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chrome 是 Google 公司开发的产品，在国内无法正常访问 Chrome 浏览器的官方网站，我们可以在百度搜索 Chrome 关键词，通过第三方网站下载这款浏览器。"}]},{"type":"element","tag":"h3","props":{"id":"开发者工具"},"children":[{"type":"text","value":"开发者工具"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chrome 浏览器的开发者工具是前端工程师必备的工具之一，在训练营中，我们会在开发者工具里检查界面元素，在控制台查看输出的调试数据，在应用标签里查看本地存储等等。打开这个工具可以通过菜单 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"视图"}]},{"type":"text","value":" - "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"开发者"}]},{"type":"text","value":" - "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"开发者工具"}]},{"type":"text","value":"。或者使用快捷键 alt + command + I（macOS）、ctrl + shift + I（Windows）。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(1).png"},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"界面语言"},"children":[{"type":"text","value":"界面语言"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在开发者工具 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"设置"}]},{"type":"text","value":" - "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"偏好设置"}]},{"type":"text","value":" 里，打开 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"语言"}]},{"type":"text","value":" 这个下拉菜单，在这里可以选择开发者工具的界面使用的语言。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(2).png"},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"元素"},"children":[{"type":"text","value":"元素"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在开发者工具的元素选项卡可以检查界面元素，比如定位元素在界面上的显示，应用在元素上的样式等等。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(3).png"},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"控制台"},"children":[{"type":"text","value":"控制台"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"开发调试前端应用时，我们经常会使用 console.log() 在控制台上输出一些数据，在开发者工具的 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"控制台"}]},{"type":"text","value":" 标签里，可以查看前端应用输出到控制台上的数据。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(4).png"},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"应用"},"children":[{"type":"text","value":"应用"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"前端应用会在浏览器的本地存储里存储一些数据，在开发者工具 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"应用"}]},{"type":"text","value":" 标签的下面，可以在 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"存储"}]},{"type":"text","value":" 的下面，查看应用的 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"本地存储空间"}]},{"type":"text","value":" 里的数据。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(5).png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"nodejs"},"children":[{"type":"text","value":"Node.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在训练营中开发 Vue.js 应用时，应用的开发服务与创建应用零部件需要的命令行工具都需要用到 Node.js。在准备服务端应用开发环境的时候，我们已经在系统里准备好了 Node.js。"}]},{"type":"element","tag":"h2","props":{"id":"yarn"},"children":[{"type":"text","value":"Yarn"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"yarn 与 npm 一样，都可以作为 Node.js 项目的包管理工具。在开发 Node.js 服务端项目或者前端项目都会用到包管理工具，一般来说二选其一即可，在 NIDC（宁皓独立开发者训练营） 中，开发服务端项目的时候会使用 npm 作为包管理工具，开发基于 Vue.js 框架的前端应用时，会使用 yarn 作为项目的包管理工具。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"官方网站"}]},{"type":"text","value":"："},{"type":"element","tag":"a","props":{"href":"https://yarnpkg.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://yarnpkg.com/"}]}]},{"type":"element","tag":"h3","props":{"id":"安装-yarn"},"children":[{"type":"text","value":"安装 Yarn"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以前需要用 npm 安装 yarn，现在 yarn 这个包管理工具包含在版本 >=16.10 的 Node.js 里，在终端执行一下："}]},{"type":"element","tag":"code","props":{"code":"corepack enable\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"corepack enable\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果使用的 Node.js 版本 <16.10，可以在全局范围安装一下 corepack："}]},{"type":"element","tag":"code","props":{"code":"npm install corepack --global\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install corepack --global\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"完成以后，应该就可以使用 yarn 这个包管理工具了。"}]},{"type":"element","tag":"code","props":{"code":"yarn --help\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn --help\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vuejs"},"children":[{"type":"text","value":"Vue.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 NIDC（宁皓独立开发者训练营）中，我们会使用 Vue 提供的命令行工具，比如去创建全部的 Vue 项目，启动本地开发服务，编译生成在生产环境上使用的应用等等。"}]},{"type":"element","tag":"h3","props":{"id":"vue-cli-命令行工具"},"children":[{"type":"text","value":"Vue CLI 命令行工具"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在全局范围安装一下 Vue CLI 这个包，这样就可以在任何地方使用 vue 命令了。"}]},{"type":"element","tag":"code","props":{"code":"npm install @vue/cli --global\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install @vue/cli --global\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在终端，用 npm 在全局范围安装一个叫 @vue/cli 的东西，这个 @vue/cli 是软件包的名字，Vue 官方提供的软件包，很多都有 @vue 这个前缀。安装完成以后，执行 "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"vue -h"}]},{"type":"text","value":" ，如果能正常的看到命令的帮助信息，就说明成功地安装了 Vue CLI。"}]},{"type":"element","tag":"h3","props":{"id":"使用-vue-cli-创建项目"},"children":[{"type":"text","value":"使用 Vue CLI 创建项目"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在全局范围安装了 @vue/cli 这个软件包以后，可以使用 vue 这个命令，我们可以使用它创建一个 Vue 项目。"}]},{"type":"element","tag":"code","props":{"code":"cd ~/desktop\nvue create nid-vue\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ~/desktop\nvue create nid-vue\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"进入到想要保存项目的地方以后，执行 vue create 命令创建一个名字是 nid-vue 的 Vue 项目，这个命令会问一些问题。"}]},{"type":"element","tag":"code","props":{"code":"? Please pick a preset:\n  Default ([Vue 3] babel, eslint)\n  Default ([Vue 2] babel, eslint)\n❯ Manually select features\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Please pick a preset:\n  Default ([Vue 3] babel, eslint)\n  Default ([Vue 2] babel, eslint)\n❯ Manually select features\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"首先可以选择一个项目的预设（preset），选择 Default Vue 3 会创建一个默认的使用 3.x 版本的 Vue 项目。我们可以选择 Manually select features（手动选择功能），用键盘的上下箭头按键可以选择，按下回车确定选择。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(6).png"},"children":[]},{"type":"text","value":"\n如果选择手动选择功能，会让我们继续选择项目需要的一些功能，按空格按键可以切换选择功能，比如可以将 TypeScript、Router、Vuex 这几个功能选上，按回车继续下一步。"}]},{"type":"element","tag":"code","props":{"code":"? Choose a version of Vue.js that you want to start the project with\n❯ 3.x\n  2.x\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Choose a version of Vue.js that you want to start the project with\n❯ 3.x\n  2.x\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这一步是选择要使用的 Vue 版本，默认选择 3.x。"}]},{"type":"element","tag":"code","props":{"code":"? Use class-style component syntax? (y/N)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Use class-style component syntax? (y/N)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"是否选择类风格的组件，默认是 N，表示不选择。"}]},{"type":"element","tag":"code","props":{"code":"? Use Babel alongside TypeScript? (Y/n)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Use Babel alongside TypeScript? (Y/n)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"是否要使用 Babel，可以选择使用 Babel。"}]},{"type":"element","tag":"code","props":{"code":"? Use history mode for router? (Y/n)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Use history mode for router? (Y/n)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"是否使用历史模式的路由器，选择使用这种模式的路由器。"}]},{"type":"element","tag":"code","props":{"code":"? Pick a linter / formatter config:\n❯ ESLint with error prevention only\n  ESLint + Airbnb config\n  ESLint + Standard config\n  ESLint + Prettier\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Pick a linter / formatter config:\n❯ ESLint with error prevention only\n  ESLint + Airbnb config\n  ESLint + Standard config\n  ESLint + Prettier\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"选择检查器与格式化器的配置，可以选择默认的 ESLint with error prevention only。"}]},{"type":"element","tag":"code","props":{"code":"? Pick additional lint features:\n❯◉ Lint on save\n ◯ Lint and fix on commit\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Pick additional lint features:\n❯◉ Lint on save\n ◯ Lint and fix on commit\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"选择额外的检查功能，可以选中 Lint on save，然后按回车继续。"}]},{"type":"element","tag":"code","props":{"code":"? Save this as a preset for future projects? (y/N)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"? Save this as a preset for future projects? (y/N)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"是否保存为预设，这样以后使用 vue create 命令创建 Vue 项目的时候，可以直接选择使用这个预设，输入 N ，按下回车，表示不保存为预设。"}]},{"type":"element","tag":"code","props":{"code":"🎉  Successfully created project nid-vue.\n👉  Get started with the following commands:\n\n $ cd nid-vue\n $ yarn serve\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"🎉  Successfully created project nid-vue.\n👉  Get started with the following commands:\n\n $ cd nid-vue\n $ yarn serve\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue CLI 会根据我们做出的选择将 Vue 项目准备好，成功以后会提示 Successfully created project ..."}]},{"type":"element","tag":"h3","props":{"id":"启动本地开发服务"},"children":[{"type":"text","value":"启动本地开发服务"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用 Vue CLI 成功创建了一个 Vue 项目以后，可以使用 VSCode 编辑器打开这个项目。然后可以在终端启动这个 Vue 项目的开发服务，这样就可以在浏览器通过一个本地的地址访问到我们正在开发的 Vue 项目，在编辑器修改项目，保存项目文件以后，在浏览器上显示的应用会实时更新，显示修改之后的项目。"}]},{"type":"element","tag":"code","props":{"code":"cd ~/desktop/nid-vue\nyarn serve\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ~/desktop/nid-vue\nyarn serve\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在终端，进入到项目所在目录以后，执行 yarn serve，这会启动 Vue 项目的本地开发服务，给我们的项目创建一个 Web 服务器，通过一个特定的地址可以直接访问正在开发的 Vue 应用。serve 这个命令是在项目的 package.json 文件里的 scripts 下面定义的。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(7).png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Vue 项目开发服务启动后的提示"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"开发服务启动以后会给出访问的地址，在本地电脑上可以通过 localhost 访问，注意访问地址里会带着一个特定的端口号，默认是 8080。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"/images/docs/env/frontend/image(8).png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 Chrome 浏览器访问 Vue 项目的本地开发服务的地址，会显示 Vue 项目默认的一个欢迎界面。"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"chrome","depth":2,"text":"Chrome","children":[{"id":"安装-chrome","depth":3,"text":"安装 Chrome"},{"id":"开发者工具","depth":3,"text":"开发者工具"}]},{"id":"nodejs","depth":2,"text":"Node.js"},{"id":"yarn","depth":2,"text":"Yarn","children":[{"id":"安装-yarn","depth":3,"text":"安装 Yarn"}]},{"id":"vuejs","depth":2,"text":"Vue.js","children":[{"id":"vue-cli-命令行工具","depth":3,"text":"Vue CLI 命令行工具"},{"id":"使用-vue-cli-创建项目","depth":3,"text":"使用 Vue CLI 创建项目"},{"id":"启动本地开发服务","depth":3,"text":"启动本地开发服务"}]}]}},"_type":"markdown","_id":"content:docs:2.env:2.frontend.md","_source":"content","_file":"docs/2.env/2.frontend.md","_extension":"md"}