项目实战

1. vue仿小米商城

vue仿小米商城

1. Node环境安装
   Welcome to Node.js v12.18.0.
2. Git安装
   git version 2.25.1.windows.1
3. vscode配置git
4. vueCli安装
   npm install -g @vue/cli 4.0.0
5. 使用vueCli创建项目
   vue create xiaomi(项目名)
6. 进入项目
   cd xiaomi
7. 启动项目
   npm run serve
8. vue管理器
   vue ui
9. 常用插件介绍

• 轮播插件
  npm i vue-awesome-swiper@3 --save-dev
  “vue-awesome-swiper”: “^3.1.3”,对应官方文档，版本过高或过低都会出现问题，不建议使用其他版本
• 懒加载插件
  npm i vue-lazyload --save-dev
• Element-ui
  npm i element-ui@2.9.2 --save-dev
• SASS预编译
  npm i node-sass sass-loader --save-dev
• cookie插件
  npm i vue-cookie --save-dev

技术点：

1. mock（模拟数据）设置
   方式：
   (1). 本地创建json
   public/mock/user/login.json文件
   url: /mock/user/login.json
   (2). easy-mock平台
   (3). 集成mock API【重点】

2. < a href=“javascript;:”>< /a> 防止点击链接时界面刷新

3. css的background-color属性可以调节背景色的透明度

4. css3
   css3动画：

5. css中的mixin

6. scss

7. axios在vue中的使用方式

8. vue-router在vue中的使用

9. 模态框 / 弹窗（Modal）插件

10. vuex

11. 第三方支付
    支付宝支付：content是html源码，渲染到页面上后自动跳转到支付页面
    微信支付：content是支付链接，转换为二维码后即可扫码支付

12. 二维码生成插件 ---- qrcode
    

13. ElementUI

14. 分页
    (1). 分页器分页
    (2). 滚动分页 ---- vue-infinite-scroll
    
    

15. 图片懒加载

项目源码

面试点：

1. 跨域问题及解决方法
   跨域是浏览器为了安全而做出的限制策略
   浏览器必须遵守同源策略：同域名、同端口、同协议
   前端常见跨域解决方案
2. cookie、localStory、sessionStorage三者的区别？
3. computed、watch、methods的区别

2. vue商城后台管理系统

• 建议直接使用vue-admin-admin或vue-admin-beautiful进行后台管理系统的开发

服务端源码
链接：https://pan.baidu.com/s/1H5fh1go0R7Fi8r0w1r8QjA
提取码：lqw9

服务端接口文档

技术点：

1. VueRouter
   路由导航守卫

2. Element-ui

3. axios

4. echarts

5. token
   

6. 分级展开表格插件vue-table-with-tree-grid

7. 富文本编辑器插件vue-quill-editon

8. lodash
   Lodash是一个javascript原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。
   官方文档

9. cityData.js
   链接：https://pan.baidu.com/s/1GA19lx2r1pwsnVb6LCEmWQ
   提取码：mk45

3. 文章管理系统实战项目

NodeJS+Express+MongoDB搭建后端服务器

1. Express 应用程序生成器
   通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。

   创建项目
   express -e 项目名称

   //项目架构
   	├── app.js
   	├── bin
   	│   └── www.js   项目入口文件
   	├── package.json
   	├── public
   	│   ├── images
   	│   ├── javascripts
   	│   └── stylesheets
   	│       └── style.css
   	├── model   连接数据库相关操作(自己建立)
   	│   └── index.js
   	├── routes  路由配置
   	│   ├── index.js
   	│   └── users.js
   	└── views  视图，如果编写前后端分离的服务器基本没啥用
   	    ├── error.ejs
   	    └── index.ejs
   

2. Nodemon
   nodemon是一种工具，可在检测到目录中的文件更改时通过自动重新启动节点应用程序来帮助开发基于node.js的应用程序。简单来说，代码修改不需要重启项目。

   在package.json中进行如下修改
   

3. MongoDB驱动程序

   安装MongoDB驱动依赖
   npm install mongodb --save

4. express-session