[微全栈] 前端

html 骨骼

css 能看

javascript 能动

前端需要知道的：

（ui 给到设计图）

-> 前端编写 静态页面    （资源和数据都在本地）

-> 前后端联调，实现 动态页面    (资源和数据请求后端)

-> 前端构建打包，成 dist 资源包，给到后端

(->后端部署到服务器，上线)

目的： 可以独立使用 vue 开发简单的页面，前后端联调，及项目构建打包。

相关技术：

1. vue     菜鸟教程

2. element-ui

3. nodeJS    菜鸟教程

...

计划：wiki

一. 环境脚手架搭建；让一个简单的 vue 项目跑起来；了解整个项目的架构 ---- kjf

1. 安装 node

更新到最新版本

2. webstorm 项目 编辑器 安装

3. npm 包管理器

npm install -g 工具名           ---- 第三方工具 (node 本身没有的工具，比如 vue)

命令带 -g

意味着全局，意味着一次安装，长期使用， a项目能用，b项目也能用

命令不带 -g

意味着，将工具安装在一个项目，比如 a 项目，将来新的 b 项目想要用到话，需要再安装

带 --save ，即使打包上线，也需要这个工具，否则无法运行

带 --save-dev ，安装进开发时的依赖，及打包上线后，工具不存在

拿百度输入法举例：

• npm install -g 百度输入法
• 在任意目录下 npm install -g 百度输入法       

a 项目能用      将来的 b 项目也能用

• 只在 a 项目下 npm install --save 百度输入法       

a 项目能用，打包后也能用        b 项目不能用，

• 只在 a 项目下 npm install --save-dev 百度输入法

a 项目能用，打包后不能用，也不需要用        b项目不能用

• windows 双击 百度输入法.exe 文件, 就能安装一个软件
• mac 双击 百度输入法.dmg 文件，就能安装一个软件

4. 项目构建，模块打包 工具

浏览器输入网址

->向服务器发送请求

->得到 html，解析

->每一个资源都是一个请求： 一张图片，一个 js，一个 css

为了优化用户体验，构建时，尽量的减少请求，以尽快渲染好页面

• gulp
• grunt
• webpack

vue-cli 是 vue 版本的 webpack

5. 项目工具安装 (理论上，工具不被你玩儿坏的话，一台电脑装一次就行了)

1) cd

2) cd Desktop

3) sudo mkdir vuework

4) cd vuework

• mac 顺序执行
• 5) sudo npm install webpack@3.0.0 -g
• 6) sudo npm install -g webpack-cli
• 7) sudo npm install -g vue-cli
• windows 顺序执行，命令不加 sudo！！！之后的所有都是！！！
• 5) npm install -g webpack
• 6) npm install -g webpack-cli
• 7) npm install -g vue-cli

1) cd

2) cd Desktop

3) cd vuework

6. 项目启 (以后每次项目，都如此)

本次项目名为 "hello-vue"

 

4) sudo vue init webpack hello-vue

询问项目配置

• 只有看到这两行的时候，敲 n
• 看到其他的行，敲 回车

5) cd hello-vue

6) 使用 webstorm 打开项目

像这样，点开头的文件都是配置文件

项目构建命令

npm 的命令，以及 package.json 里声明的命令

4) 执行 npm start 命令，浏览器输入 http://localhost:8080 就可以看到，官方实例

5) 我配置的一个，比较好的项目起手工程：

1

----------------------------------------------------------------------

二. 路由，element-ui ---- llf

1.

----------------------------------------------------------------------

三. 搭后台管理系统 ---- wy

1. 

----------------------------------------------------------------------

四. ajax 前后端联调 ---- kjf

1. 

----------------------------------------------------------------------

五. 调试工具、抽签 demo ---- llf

1. 

----------------------------------------------------------------------

六. 实际项目演练 

1. 

----------------------------------------------------------------------

拓展：

1. 简单的浏览器调试

2. mac 打开命令行

1) 

2) 搜索"终端"

3. 在 mac 下，出现文件权限问题

需要在最开始的时候，chmod 777 工程，然后再 vue init webpack 项目名

4.