一、Node.js 环境配置

1. 安装Node.js
   • 官网下载：https://nodejs.org/zh-cn/download
   • 验证安装：
     node -v
npm -v
     
2. 配置镜像加速
   • 查看当前镜像源：
     npm config get registry
     
   • 设置为阿里云镜像：
     npm config set registry https://registry.npmmirror.com
     

二、Vue.js 核心特性

三、Vue项目创建流程

• 打开终端输入：npm create vue@latest
• 输入项目名称，回车确认
• 核心功能选择：Router单页面应用开发 ＆ Pinia状态管理
• 试验性特性：可直接回车确认
• 此时项目已生成，输入cd 项目名称进入项目目录
• 输入nmp install安装依赖
• 输入nmp run dev启动开发服务器

四、修改页面内容

1. 找到About页面
   • 路径：src/views/AboutView.vue
2. 编辑模板

   <template>
     <div class="about">
       <h1>这是我的个人介绍页面</h1>
     </div>
   </template>
   
   <style scoped>
   .about {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   </style>

3. 查看效果

五、添加新页面

1. 创建视图文件
   • 在src/views/下创建NoteView.vue
2. 配置路由

   // 在router/index.js中添加
   {
     path: '/note',
     name: 'note',
     component: () => import('../views/NoteView.vue')
   }

3. 添加导航链接

   <!-- 在App.vue中添加 -->
   <RouterLink to="/note">笔记</RouterLink>
   
   <!-- 为了让导航之间有间隔可添加以下代码 -->
   <style scoped>
   nav a {
     display: inline-block;
     padding: 0 1rem;
     border-left: 1px solid var(--color-border);
   }
   </style>

六、项目维护技巧

• 清理垃圾
• 找回误删的东西
• 清理缓存：npm cache clean --force
• 恢复依赖：删除node_modules后执行npm install
• 升级依赖：npm update

七、Vue.js 学习

• 官网：https://vuejs.org
• 中文官网：https://cn.vuejs.org