Vue.js的高阶知识梳理

Vue高级 – Vue全家桶技术 SSS

1. vue-cli 脚手架
2. vue-router 路由
3. vuex 多组件状态管理

vue-cli

1. 它是vue提供的一个用于构建vue项目的脚手架，目前它的版本已经到了4.x
2. 版本
   – vue-cli 2.x 版本
   – vue-cli 2以上版本【 3 4 】 市面上
3. 安装
   – 如何让一台电脑既可以使用vue-cli 2 也 可以使用 2以上版本？
   – $ cnpm/npm i @vue/cli @vue/cli-init -g
   – @vue/cli 2以上版本
   – @vue/cli-init 调节工具，可以让2以上版本也可以构建2版本的项目
4. 创建项目
5. 2以上版本创建方式【 两者创建出来的项目完全一样 】
6. 标准形式
   – $ vue create 项目名称
7. GUI创建
   – $ vue ui
8. 2版本创建方式
9. 标准形式
   – $ vue init webpack 项目名称
10. 简易形式 【 单案例 】
    – $ vue init webpack-simple 项目名称
11. 项目启动
    – serve 表示开发环境项目启动
    – build 表示生产环境项目打包
    – lint 表示语法检测【 eslint 】
12. yarn vs npm
    – yarn 安全性更好
    – yarn 可以锁定项目中第三方包的版本号，保证团队项目版本一致
13. vue-cli
    – 底层实现： webpack
    – webpack底层语言： Node.js
14. 版本不同
    – 2版本比2以上版本多了两个文件夹，分别为： build 、 config 目录
    – 这两个文件是项目中webpack配置文件夹和项目脚本执行执行文件夹
    – 2以上版本将这两个文件夹放到了node_modules/@vue/cli-service中
15. 四中vue-cli不同创建项目形式总结
    – 不同点
    – 1. webpack配置和项目脚本执行文件放在不同地方
    – 2以上版本放在了node_modules/@vue/cli-service中
    – 2版本标准形式放在了 build \ config
    – 2版本建议形式直接放在webpack.config.js文件中
    – 2. 2以上版本性能要更好
    – 配置插件自由、插件也更丰富了
16. 熟悉脚手架构建的目录【 2以上版本 】
17. yarn run serve -> node_modules/@vue/cli-service/bin/vue-cli-service.js
18. 调用webpack功能
19. 用来编译src下所有东西
20. stylus -> stylus-loader
21. .vue -> vue-loader
22. 高版本es语法 -> babel-config.js优雅降级配置文件来编译
23. node_modules/@vue/cli-service 会有临时文件来启动一个界面
24. src 源代码开发目录【 工作目录 】
25. assets目录 静态资源目录【 会被webpack编译 】
26. img
27. 如果图片 < 4K， 那么这个图片会被编译为 base64 图片 2. 如果图片 > 4K, 那么这个图片被会复制到dist/img 中
28. js
29. 编译压缩js文件
30. css文件
31. 编译所有css文件
32. components目录 -> 项目公共组件【 头部、底部、列表 】
33. App.vue组件
34. 项目中继跟组件后最大的组件
35. 用于放置我们创建的组件
36. main.js 项目入口文件
37. 最先执行的文件，其他文件依赖于这个文件执行
38. vue-cli 使用了 es6 模块化规范
39. 单文件组件
    – xxx.vue文件
    – 一个文件就是一个组件
    – 通过 vue-loader 来将 单文件组件 编译为 浏览器可以执行 js 文件
    – 构成
    – 1. template 模板 【 jsx 结构】 必须有
    – 2. script 脚本 – 组件的配置 可有可无
    – 3. style 样式 可有可无
    – vscode 要安装Vetur插件，才能识别vue文件
40. 使用vue-cli
41. stylus
42. 简化了样式需要符号
43. 严格要求缩进\
44. scoped
    – 可以给样式设置独立作用域，也就是说： 如果我们给vue文件中的样式添加了scoped，那么这个样式只会在当前这个组件生效
    – 如果不加，那么这个样式作用域是全局的
    – 建议：
    – 1. 不要随便使用标签名
    – 2. 每一个vue文件样式都加 scoped
45. vue-cli 配置 – vue.config.js

配置文件修改了，必须重启

1. 项目启动，自动打开网页
2. 反向代理
3. 实现跨域
4. 标识符： 选取域名后的第一个路径作为标识符
5. target: 目标源 ， 选择 协议 + 域名
6. 路径别名
   – 可以将我们麻烦的 ./ …/ ./…/…/ 去掉了
7. eslint语法检测关闭

构建一个项目

1. webapp 项目
2. 移动端自适应配置
   – rem + flex
   – rem配置

• 网易方案 js /* * 配置rem */ function font () { document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px' } font() // 表示页面一开启就转换单位 window.onresize = font // 表示页面尺寸发生改变时，再次计算rem - 淘宝方案 js /* 通过js来动态添加rem */ (function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; width>maxWidth && (width=maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次； refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function() { doc.body.style.fontSize = "16px"; }, false); } })(375, 750); // 备注： 这里的375本身就应该写成750 ，但是写成750之后，我们设计稿的尺寸要/50,不好算，我就想，除以100更好算，所以我改成了375 - 阿里方案 js (function(doc, win) { const docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { const clientWidth = docEl.clientWidth; if (!clientWidth) return; let max = 24; let min = 9.3125; let size = 20 * (clientWidth / 320); size = Math.min(size, max); size = Math.max(size, min); docEl.style.fontSize = size + 'px'; console.log(docEl.style.fontSize, 'em= =====') }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); - 。。。

3. 构建项目目录
   – layout/index.vue 项目的布局外壳
   – 创建公共组件 标题栏/tabbar -> LayOut组件中使用
   – utils 项目公共封装库
   – rem.js
4. 数据请求封装 request.js
5. 创建路由配置文件夹 router
6. 新建文件夹 pages/views ， 它是路由路径对应的组件
7. 新建文件夹 store 它是状态管理 vuex 的配置文件夹
8. 新建文件夹mock.serveice， 用于数据模拟
9. 创建项目样式全局变量文件 assets/stylesheets/constant.stylus
10. 在public/index.html中引入fontawesome cdn
11. fontawesome是一个icon图标库
12. Tab.vue构建
13. TabBar.vue
    – 数量 2 – 5 个