Vue CLI

今天从github上面学习了一下别人的代码，应该使用Vuecli3.x或4.x搭建的，修改代码之后热重载失效，需要手动刷新很不方便。 解决方案： 核心代码：在vue.config.js文件中 chainWebpack: (config) => { config.resolve.symlinks(true) // 修复热更新失效 }, 修改完成之后，则可以正常热刷新热重载 来源： oschina 链接： https://my.oschina.net/u/4446873/blog/4374023

最近在项目中使用了Vue CLI 3.0版本，项目中需要设置反向代理解决跨域问题，下面记录一下设置过程。 新建配置文件 （vue-cli3.x 官网的配置文档 https://cli.vuejs.org/zh/config/#devserver-proxy ） 在项目的根目录下新建 vue.config.js 文件，自Vue CLI 3开始，项目中所有的配置信息都写在这个文件中（2在config目录中配置）。如下图： 配置反向代理 在vue.config.js 文件里，添加如下代码： module.exports = { devServer: { proxy: { '/api' : { target: 'http://m.baidu.com', // 目标地址 ws: true , // // 是否启用websockets changeOrigin: true , // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: {'^/api': '/'} // 这里重写路径 } } } } 在数据请求的时候： 假设原来的接口为： http:// m.baidu.com /sf/vsearch/image/browse/wiseresultjson?ie=utf-8&word=%E6

其实本来应该写个介绍的，但是我看到其他的文章写得很完善了，所以就来写写我在其中遇到的一些问题就好了。 安装 single-spa 请看沉末的 这篇文章 。 背景 简单介绍下背景吧～ 为什么要用 single-spa 呢，是因为公司的项目需要拆项目了，这个时候就需要知道微前端的概念了，那么什么是微前端呢。 微前端服务 微前端架构是一种类似于微服务的架构，由ThoughtWorks 2016年提出，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。 在项目中是运用 single-spa 去搭建微前端框架的，在搭建框架之前，我们需要知道两个知识点，什么是 single-spa 和 importmap 。 single-spa 而 single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案。 特点： (兼容各种技术栈)在同一个页面中使用多种技术框架(React, Vue, AngularJS, Angular, Ember等任意技术框架),并且不需要刷新页面. (无需重构现有代码)使用新的技术框架编写代码,现有项目中的代码无需重构. (更优的性能)每个独立模块的代码可做到按需加载,不浪费额外资源. 每个独立模块可独立运行. importmap

Vue3.0目前已经出了beta版本,并在github上进行了开源，叫做 vue-next ，本文将之前采用Vue2.6开发的todoList小项目改造成为Vue3.0编写，并介绍一下2.x和3.x之间写法的不同之处。 点击体验 Github地址： Vue.js2.6版本todoList ， Vue.js3.0版本todoList Vue3.x适配大部分Vue2.x的组件配置，也就是说以前我们在Vue2.x针对组件的一些配置项，例如： export default { name: 'test' , components: {}, props: {}, data () { return {} }, created (){}, mounted () {}, watch:{}, methods: {} } 复制代码 在Vue3.x中也是可以适配的，对应的相关生命周期方法也可正常执行，但是Vue3.x的一大核心是引入了 Vue Composition API （组合式API）,这使得组件的大部分内容都可以通过 setup() 方法进行配置，同时Vue Composition API在Vue2.x也可以使用，需要通过安装@vue/composition-api来使用： npm install @vue/composition-api ... import VueCompositionApi

因选择创建模板时，上下箭头不起作用： 解决方法： 更改 git Bash 的配置，找到安装git下面的 etc 下面的 bash.bashrc 打开，在文件最底部加上 alias vue= 'winpty vue.cmd' 保存，然后重新打开 git Bash 这个时候再重新使用 create 命令创建项目，发现上下箭头的作用就正常了. 来源： oschina 链接： https://my.oschina.net/u/3786097/blog/4498270

这个作业属于哪个课程 2020春S班 这个作业要求在哪里 个人作业——软件工程实践总结&个人技术博客 这个作业的目标 总结回顾软工实践课程，记录技术成长内容 作业正文 个人作业——软件工程实践总结&个人技术博客 其他参考文献 无 前言 1、当初为什么报 软件工程 这个专业？当初对 软件工程 这个专业的期待和想象是什么？ 当初希望自己是如何投入这个专业的学习的？曾经做过什么准备，或者立下过什么FLAG吗？     经过一个学期的沉淀，对于这个问题确实有比较深刻的理解，以前的自己只是认为软件工程是一个面对电脑的、不那么枯燥的专业，并且在毕业后能够更容易找到工作。但是经历了项目开发的几个月之后，我认为每一个行业都有它自己的难处，能够容易地找到工作，是建立在自己技术过关的前提下。更何况在如今的大形势下，有大批的人涌入这个行业，如何保持自己的竞争力，是个需要时时刻刻在意的问题。我希望自己能够更加专注地学习，而不是在将来参与工作后才来追悔莫及。 2、这门课程即将迎来结束，但你们的路却才刚刚开始，考研就业考公，未来你将面临更多的选择和挑战。你是否在这门课中获得了成长呢？     获得成长是肯定的，在技术上，起码能够独立地进行前端的开发了，在管理团队和与人相处上，也同样有进步，软件工程永远都不是一个人的战斗，我在这门课中也学会了如何与队友打交道，如何对团队做贡献。对于将来，我曾有一段时间是迷茫的

const TerserPlugin = require('terser-webpack-plugin'); const Timestamp = new Date().getTime(); module.exports = { devServer: { host: '127.1.1.88', }, productionSourceMap: false, publicPath: '/migratory/', configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 返回一个将会被合并的对象 return { optimization: { minimizer: [ new TerserPlugin({ sourceMap: false, terserOptions: { compress: { drop_console: true } } }) ] }, output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `js/[name].[chunkhash].${Timestamp}.js`, chunkFilename: `js/[name].[chunkhash].${Timestamp}.js`, }, } }; },

写在开头 微前端系列文章： 基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇 基于 qiankun 的微前端最佳实践（图文并茂） - 应用间通信篇 万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇 本系列其他文章计划一到两个月内完成，点个 关注 不迷路。 计划如下： 生命周期篇； IE 兼容篇； 生产环境部署篇； 性能优化、缓存方案篇； 引言 大家好~ 本文是基于 qiankun 的微前端最佳实践系列文章之 从 0 到 1 篇 ，本文将分享如何使用 qiankun 如何搭建主应用基座，然后接入不同技术栈的微应用，完成微前端架构的从 0 到 1。 本教程采用 Vue 作为主应用基座，接入不同技术栈的微应用。如果你不懂 Vue 也没关系，我们在搭建主应用基座的教程尽量不涉及 Vue 的 API ，涉及到 API 的地方都会给出解释。 注意： qiankun 属于无侵入性的微前端框架，对主应用基座和微应用的技术栈都没有要求。 我们在本教程中，接入了多技术栈 微应用 的 主应用 最终效果图如下： 构建主应用基座 我们以 实战案例 - feature-inject-sub-apps 分支 （案例是以 Vue 为基座的主应用，接入多个微应用） 为例，来介绍一下如何在 qiankun 中如何接入不同技术栈的微应用。 我们先使用 vue

Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架 Vue.js: Web 前端用于构建用户界面的渐进式框架 Vuetify: Vue.js 的 Material Design 组件框架 看完以上介绍，也明白了本文要做的事：用 Vue.js 与 Vuetify 组件，基于 Electron 来创建原生桌面应用。 环境准备 Visual Studio Code Node.js Yarn Vue CLI 创建 Vue.js 应用 添加 Vuetify 组件 添加 Electron 构建 发布 Electron 应用 参考 结语 环境准备 Visual Studio Code 建议使用的 VS Code 编辑代码，下载地址： https://code.visualstudio.com/ 。 同时可安装如下些扩展： ESLint: 代码检查 Prettier - Code formatter: 代码格式化 Vetur: Vue 代码工具 Vue 2 Snippets: Vue 代码提示（可选） 查看 VS Code 版本： $ code -v 1.46.1 cd9ea6488829f560dc949a8b2fb789f3cdc05f5d x64 Node.js Node.js 开发环境，下载地址： https://nodejs.org

vue-cli2.0过渡到 vue-cli3.0配置和使用 为了避免vue-cli2.0版本对3.0版本造成影响，需要先卸载全局安装的2.0版本 一、卸载vue-cli2.0 卸载分两种情况： 1.安装nodejs时，是否在nodejs目录下手动新建了node_cache和node_global文件夹，同时配置了与之相关的环境变量； 这种情况，你只需要把这两个文件夹删掉，然后再新建两个名字一样的空文件夹 2.默认路径 这种情况，你只需要找到npm 和npm-cache文件夹，删掉即可； 路径：C:\Users\你的用户名\AppData\Roaming 二、vue-cli3.0配置和使用 1、由于把之前全局安装的模块都删掉了，咱们需要重新配置一下镜像提高拉包速度 npm install cnpm - g - registry = https : / / registry . npm . taobao . org 测试是否安装成功： cnpm - v 2、全局安装 vue-cli3.0 cnpm install - g @vue / cli@ 3.3 .0 3.安装完毕，我们开始手动创建项目 创建一个myapp的项目文件夹 vue create myapp 点击键盘下方向键，选择Manually select features手动配置；回车 点击方向键，移动到想安装的模块