渐进式 JavaScript 框架Vue项目创建(二) 青旅半醒 2022-03-29 16:40 161阅读 0赞 **创建项目** * **在选择好的目录下按住shift选择窗口创建一个vue项目叫demo-vue:vue create demo-vue ** * ![20190109091446139.png][] * **default默认插件为babel和eslint。** * **manually select features 选择其它插件** * ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70][] * **点击空格选择单个,a为选择全部。** * **基础插件介绍** * **Babel: es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码。** * **TypeScript: *TypeScript*是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集。** * **Progressive Web App (PWA) support**: 1. **渐进式** - 每个用户都可用而不管选择什么样的浏览器,因为它们是以渐进式增强为核心原则构建的。 2. \* **自适应** - 适应任何形态:桌面,移动设备,平板电脑或尚未出现的形式。 3. \* **不依赖网络连接** - **Service Workers**允许离线工作,或在低质量网络上工作。 4. \* **类似于应用程序** - 使用应用程序风格的交互和导航,感觉像一个应用程序。 5. \* **保持最新** - 得益于service Woker的更新进程,应用能始终保持最新状态。 6. \* **安全** - 借助于HTTPS,防止窥探,并确保内容没有被篡改 7. \* **可发现** - 受益于W3C清单和service Worker注册作用域,搜索引擎可找到它们,可以识别为“应用程序”。 8. \* **用户粘性** - 通过推送通知等功能让用户重返应用。 9. \* **可安装** - 允许用户在主屏幕上“保留”他们认为最有用的应用程序,而无需经过应用程序商店。 10. \* **可链接** \- 通过URL轻松共享,不需要复杂的安装。 * **Router**:**Vue Router 是 [Vue.js][] 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。** * **Vuex :是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。** * **CSS Pre-processors:** **CSS 的预处理器主要是辅助功能。** * ** Linter / Formatter: JavaScript 的代码风格检查工具。** * **Unit Testing:单元测试** * **E2E Testing:看不到代码的测试** **回车进行具体配置** * **我选择为:****Babel, PWA, Router, Vuex, CSS Pre-processors, Linter** * **进行具体配置** * **可以用路由的 history 模式,这种模式充分利用history.pushState API 来完成 URL 跳转而无须重新加载页面** * ![20190109102332576.png][] * ** css预处理采用Stylus 去Stylus官网参考使用教程** * ![20190109112039688.png][] * **优化编码样式和编码提示** * ![20190109110036517.png][] * **代码保存就检测** * ![20190109110509818.png][] * **将Babel,PostCss,ESLint配置信息保存到package.json (另一种是保存到独立文件)** * ![20190109112300113.png][] * **是否保存这次的配置信息(下次创建项目可以直接使用)** * ![2019010911571670.png][] * **起个名字** * ![20190109115759384.png][] [20190109091446139.png]: /images/20220329/eb236526bf1f45cc975fde5c81f36ce0.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU5ODM4_size_16_color_FFFFFF_t_70]: /images/20220329/513c4d1a2d404f17b14e654b395c4a52.png [Vue.js]: http://cn.vuejs.org/ [20190109102332576.png]: /images/20220329/e6e37b23783e44f680150b444bee27e7.png [20190109112039688.png]: /images/20220329/e5dd22fbfef64e2c8194475d625d22a7.png [20190109110036517.png]: /images/20220329/b82f09e6f2464a25a2438500081e2634.png [20190109110509818.png]: /images/20220329/12eeff04ff2a4871812b5a050508f12e.png [20190109112300113.png]: /images/20220329/90643aa46ed44042a33799f699b50cb3.png [2019010911571670.png]: /images/20220329/9785c167c7494d7ebcfd819cd8b8d23b.png [20190109115759384.png]: /images/20220329/cd13aab17ef947d092e40816df4d9ff8.png
还没有评论,来说两句吧...