跳到正文 Week 1 Studio: Getting started with Vue.JS · Jimmy Huang's Blog
Lab Summary 本周Lab就是介绍下教学团队,按照Ed里的教程走一遍内容,把Vue安装上跑起来,就结束了,上了一个小时就下课
Overview
EFOLIO TASK 1.1 (PASS AND CREDIT LEVEL) 展开内容 DESCRIPTION: WHAT TO SUBMIT (INDIVIDUAL): EVALUATION CRITERIA:
EFOLIO TASK 1.2 (DISTINCTION AND HIGH DISTINCTION LEVEL) 展开内容 DESCRIPTION: 修改基础 VueJS 应用,添加一个名为 MyName.vue 的新组件,在欢迎页面上显示 你的名字 。
创建一个 GitHub 账号(如果你还没有的话)。
与同学互动(可以是线下当面,也可以通过 Ed 在线交流)。
WHAT TO SUBMIT (INDIVIDUAL): EVALUATION CRITERIA:
1. Setup Dev Environment
Install Node.js (LTS version) curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
While Vue.js focuses on building the visible parts of your web app (what you see in the browser), Node.js operates behind the scenes to handle essential tasks.
Vue.js 专注于构建 Web 应用的可见部分(即浏览器中显示的内容),而 Node.js 则在后台运行,处理基本任务。
Why Node.js is Important for Vue.js Development
Let's talk about NPM npm(Node 包管理器) 就像一个巨大的工具箱,里面装满了随时可用的 JavaScript 代码。这些代码片段被称为 包 ,它们可以做各种各样的事情:
2. Install Visual Studio Code
Install Visual Studio Code
Install Visual Studio code extensions
3. Create a New Vue Project
4. Open and run a Vue project in VS Code
Launch the project
Step 1: Open the Terminal
Step 2: Install dependencies
Step 3: Launch the project visit http://localhost:5173/
5. Let's Explore the Project!
Understand the directory structure of a Vue project Vue.js 中的 .vue 文件通常由三个主要部分组成: <template> 、 <script> 和 <style> 块。这种 .vue 文件结构的好处是确保模板、逻辑和样式都包含在单个文件中,从而促进基于组件的架构和模块化。
6. Debugging in Vue 6. 在 Vue 中调试