前端学习笔记

发表于 | 更新于 | 分类于 | 阅读次数：

学习路径

目标

基础：前端入门基础

  • HTML + CSS
  • JS 基础
  • 目标：掌握前端基础知识，能够使用进行简单应用开发（例如记事本）

进阶：框架：Vue，技术全家桶

  • webpack
  • vue-cli
  • vue
  • vue-router
  • axios
  • echarts
  • vux
  • elementui
  • ant-design
  • 目标：
    • 能够开发中等复杂规模的应用熟练应用
    • Vue.js 全家桶技术栈
    • 学会组件化、模块化开发方式

学习资源

bilibili | 极客时间 | 掘金 | Github | 码云

实践

脚手架搭建

1
2
3
4
5
6
7
8
9
10
npm -V
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -V
sudo cnpm install vue-cli -g
vue -V
vue init webpack vue-demo
cd vue-demo
cnpm run dev

cnpm install axios --save

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── build               # 项目构建（webpack）目录，一般情况下不需要自行配置
├── config              # 项目配置目录，配置端口号等
├── node_modules        # npm加载的项目依赖模块
├── src                 # 项目主开发目录
│   ├── App.vue         # 项目主组件
│   ├── assets          # 静态目录，例如图片等
│   ├── components      # 公共组件目录
│   ├── main.js         # 程序入口文件，加载各种公共组件
│   ├── store           # vuex状态管理
│   └── router          # vue-router路由管理
├── static              # 静态资源目录，如图片、字体等
├── index.html          # 主页
├── package.json        # 项目依赖包及版本信息
└── README.md           # 项目说明

组件化思想

几乎任意类型的应用界面都可以抽象为一个组件树：

项目实战