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