现代前端开发入门：从ES6到Vue3的第一步
你刚决定学习前端开发，打开教程一看：ES6、Node.js、npm、Webpack、Vite、TypeScript...这些名词像天书一样砸过来。别慌，这篇文章帮你理清现代前端的"基础设施"，为Vue3开发打下坚实基础。
现代前端开发三件套
在Vue3之前，你需要先掌握三个基础：
- ES6+语法 - 现代JavaScript的写法
- Node.js + npm - 包管理和构建工具的基础
- 模块化开发 - 代码组织方式
让我们一个个攻克。
ES6+必学语法
ES6（ECMAScript 2015）是JavaScript的重大升级，Vue3大量使用这些新特性。
let和const
// ❌ 旧写法
var name = 'Vue'
var name = 'React' // 可以重复声明，容易出bug
// ✅ 新写法
const app = 'Vue3' // 常量，不可重新赋值
let count = 0 // 变量，可以修改
count = 1 // OK
// app = 'React' // 报错！const不能重新赋值规则：默认用const，需要修改时才用let，永远不用var。
箭头函数
// ❌ 旧写法
const add = function(a, b) {
return a + b
}
// ✅ 新写法
const add = (a, b) => {
return a + b
}
// 更简洁：单行可以省略大括号和return
const add = (a, b) => a + b
// 单参数可以省略括号
const double = n => n * 2关键区别：箭头函数没有自己的this，它会继承外层作用域的this。这在Vue中非常重要。
const obj = {
count: 0,
// ❌ 普通函数，this指向调用者
incrementOld: function() {
setTimeout(function() {
console.log(this.count) // undefined！
}, 1000)
},
// ✅ 箭头函数，this继承外层
incrementNew: function() {
setTimeout(() => {
console.log(this.count) // 0
}, 1000)
}
}解构赋值
// 对象解构
const user = { name: 'Vue', version: 3, author: 'Evan' }
const { name, version } = user
console.log(name, version) // 'Vue' 3
// 重命名
const { name: framework } = user
console.log(framework) // 'Vue'
// 默认值
const { license = 'MIT' } = user
console.log(license) // 'MIT'
// 数组解构
const [first, second, ...rest] = [1, 2, 3, 4, 5]
console.log(first, second, rest) // 1 2 [3, 4, 5]展开运算符
// 数组展开
const arr1 = [1, 2, 3]
const arr2 = [...arr1, 4, 5]
console.log(arr2) // [1, 2, 3, 4, 5]
// 对象展开（浅拷贝）
const defaults = { theme: 'light', lang: 'zh' }
const settings = { ...defaults, theme: 'dark' }
console.log(settings) // { theme: 'dark', lang: 'zh' }
// 合并对象
const merged = { ...obj1, ...obj2 }模板字符串
const name = 'Vue' const version = 3 // ❌ 旧写法 const msg = 'Welcome to ' + name + ' ' + version // ✅ 新写法 const msg = <code>Welcome to ${name} ${version}// 多行字符串 const html = ``${name}
简写属性
const name = 'Vue'
const version = 3
// ❌ 旧写法
const app = {
name: name,
version: version,
sayHello: function() {
return 'Hello'
}
}
// ✅ 新写法
const app = {
name, // 等同于 name: name
version, // 等同于 version: version
sayHello() { // 方法简写
return 'Hello'
}
}Promise和async/await
// Promise
fetch('/api/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
// async/await（推荐）
async function getUsers() {
try {
const response = await fetch('/api/users')
const data = await response.json()
console.log(data)
} catch (error) {
console.error(error)
}
}
// 并行请求
async function getAll() {
const [users, posts] = await Promise.all([
fetch('/api/users').then(r => r.json()),
fetch('/api/posts').then(r => r.json())
])
return { users, posts }
}数组方法
const numbers = [1, 2, 3, 4, 5]
// map：转换每个元素
const doubled = numbers.map(n => n * 2) // [2, 4, 6, 8, 10]
// filter：筛选元素
const evens = numbers.filter(n => n % 2 === 0) // [2, 4]
// find：查找元素
const found = numbers.find(n => n > 3) // 4
// reduce：累积计算
const sum = numbers.reduce((acc, n) => acc + n, 0) // 15
// some/every：判断
const hasEven = numbers.some(n => n % 2 === 0) // true
const allPositive = numbers.every(n => n > 0) // true
// 链式调用
const result = numbers
.filter(n => n > 2)
.map(n => n * 10)
.reduce((acc, n) => acc + n, 0) // 120可选链和空值合并
const user = {
profile: {
name: 'Vue'
// avatar 可能不存在
}
}
// ❌ 旧写法（容易报错）
const avatar = user && user.profile && user.profile.avatar
// ✅ 可选链
const avatar = user?.profile?.avatar // undefined，不会报错
// ❌ 旧写法
const name = user.name || 'Anonymous' // 空字符串也会用默认值
// ✅ 空值合并
const name = user.name ?? 'Anonymous' // 只有null/undefined才用默认值Node.js和npm
什么是Node.js？
Node.js让JavaScript可以脱离浏览器运行。它主要用于：
- 运行构建工具（Vite、Webpack）
- 服务端开发（Express、Nest）
- 运行脚本
下载安装：https://nodejs.org/
npm基础命令
# 初始化项目
npm init -y
# 安装依赖
npm install vue # 安装到dependencies
npm install -D vite # 安装到devDependencies
npm install -g pnpm # 全局安装
# 版本管理
npm install vue@3 # 指定版本
npm install vue@latest # 最新版本
# 运行脚本
npm run dev # 开发服务器
npm run build # 构建生产版本
# 其他
npm update # 更新依赖
npm outdated # 检查过时依赖
npm audit # 安全检查package.json
{
"name": "my-vue-app",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.4.0"
},
"devDependencies": {
"vite": "^5.0.0"
}
}pnpm：更快的替代品
# 安装pnpm
npm install -g pnpm
# 使用（命令基本相同）
pnpm install
pnpm add vue
pnpm devpnpm优点：
- 更快（硬链接，节省磁盘空间）
- 更严格（避免幽灵依赖）
- 更安全（更好的依赖管理）
ES模块
import/export
// utils.js - 导出
export const PI = 3.14159
export function add(a, b) {
return a + b
}
export default class Calculator {
// ...
}
// main.js - 导入
import Calculator, { PI, add } from './utils.js'
import * as utils from './utils.js'动态导入
// 懒加载
const module = await import('./heavy-module.js')
// Vue路由懒加载
const routes = [
{
path: '/about',
component: () => import('./views/About.vue')
}
]开发环境推荐
VSCode必备插件
- Vue - Official - Vue语法高亮和智能提示
- ESLint - 代码规范检查
- Prettier - 代码格式化
- Volar - Vue3专用（已集成到Vue - Official）
推荐配置
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}小结
你现在掌握了：
- ES6+核心语法（箭头函数、解构、展开、async/await）
- Node.js和npm基础操作
- ES模块的import/export
- 开发环境配置
下一期，我们将学习Vite - Vue3官方推荐的构建工具。它快得让你怀疑人生，配置简单到让你感动流泪。
练习任务：
- 用解构赋值提取对象属性
- 用map/filter/reduce处理数组
- 用async/await改写Promise链式调用
- 创建一个npm项目，安装vue依赖
下期预告：《Vite快速入门：秒级启动的开发体验》—— 为什么Vite这么快？如何配置Vite项目？
Views: 1