Vue CLI

前端 vue + webpack 环境，使用脚手架两步搞定： // 全局安装 vue-cli npm install vue-cli - g // 创建一个基于 webpack 模板的新项目 vue init webpack website // 切换至mock-server-demo目录 cd website // 安装依赖 npm install 后端 node.js + express，使用脚手架两步搞定： //全局安装 express npm install -g express- generator //创建express项目 express admin //切换至admin目录 cd admin //安装依赖 npm install 来源： oschina 链接： https://my.oschina.net/u/4325435/blog/3231154

找了很多教程终于做好了，现贴出来，以备不时之需。 1、首先需要两个div，一个用来放背景图，一个用来放除背景图之外的东西 1 <div class="background"></div> 2 <div class="front"></div> 第一个div放背景图 <div class="background"> <img :src="imgSrc" width="100%" height="100%" alt="" /> </div> 第二个div放登录页面，这里就不贴出来了。这样html部分就写完了，非常简单 2、js部分，这里也非常简单，但有一点，尝试使用css自带方式即src="图片路径"方式无法导入图片，可能是路径原因，改用值绑定方式 文件路径为： 　　|——src 　　|————assets 　　|——————images 　　|————————bg2.jpg 　　|——components 　　|————page 　　|——————login.vue js为： 　 data(){ return { imgSrc:require('../../assets/images/bg2.jpg') } } 3、css部分。css有个属性叫 z-index ，是用来确定元素层叠关系的，值大的元素显示在值小的元素的上面。同时，该元素position必须为absolute才会起作用

缘起 书接上文《 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史 》，昨天咱们说到了以我的经历说明的web开发经历的几个阶段，而且也说到了Vue系列需要讲到的知识点，今天就正式开始Code，当然今天的代码都特别简单，希望大家慢慢的学习，今天主要讲的是JS高级——关于面向对象的语法。 磨刀不误砍柴工，当然，我在写这篇之前，或者是写Vue之前，都在考虑要从何处入手，怎么写，因为大家肯定有一部分是全栈工程师，都很懂，那我写的您就可以一目十行，不用看代码，也有一部分还是专注于后端，前端只是会一些Javascript，或者Jquery，进行一些Dom操作等，最后还有一部分小伙伴是CS模式开发的，我们的QQ群我就了解到一些，所以呢，我就去各个平台看大家是如何讲Vue，或者是讲MVVM前后端分离的，嗯~~~，我也都能看懂，但是就是不想和他们一样 [ 这样会拉仇恨么哈哈 ]，当然，不是说我写的好，因为好多人都是文章直接一上来就Vue-cli搞起来，直接Hello World跑起来，然后就是搞一个TodoList，基本的就这么过去了，感觉既然是写了，就要从基础写起，所以我就想到了先从JS面向对象讲起，做个铺垫，也给大家一个缓冲。大家放心，Vue-cli，Vue-router，Axios，Vuex等等，咱们都有，还有hello

找了很多教程终于做好了，现贴出来，以备不时之需。 1、首先需要两个div，一个用来放背景图，一个用来放除背景图之外的东西 1 <div class="background"></div> 2 <div class="front"></div> 第一个div放背景图 <div class="background"> <img :src="imgSrc" width="100%" height="100%" alt="" /> </div> 第二个div放登录页面，这里就不贴出来了。这样html部分就写完了，非常简单 2、js部分，这里也非常简单，但有一点，尝试使用css自带方式即src="图片路径"方式无法导入图片，可能是路径原因，改用值绑定方式 文件路径为： 　　|——src 　　|————assets 　　|——————images 　　|————————bg2.jpg 　　|——components 　　|————page 　　|——————login.vue js为： 　 data(){ return { imgSrc:require('../../assets/images/bg2.jpg') } } 3、css部分。css有个属性叫 z-index ，是用来确定元素层叠关系的，值大的元素显示在值小的元素的上面。同时，该元素position必须为absolute才会起作用

npm install -g @vue /cli npm uninstall -g @vue /cli@特定版本 3.12.0 yarn global add @vue /cli yarn global remove @vue /cli @特定版本 来源： oschina 链接： https://my.oschina.net/u/4375750/blog/3229580

module.exports = { // 部署应用时的基本 URL baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080', // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为 outputDir: 'dist', // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 assetsDir: '', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 indexPath: 'index.html', // 默认在生成的静态资源文件名中包含hash以控制缓存 filenameHashing: true, // 构建多页面应用，页面的配置 pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时，template 中的 title

引自网上 1.安装nodejs、npm、webpack、vue-cli 2.在本地创建demo目录，然后git bash here或者powershell执行一下命令： vue init webpack demo 3.生成项目结构如下： build: 构建脚本目录 config: 构建配置目录 node_modules: 依赖node工具包目录 src: 源码目录，写业务代码的地方 src/assets: 资源目录，例如图片、css、js等文件 src/components: 组件目录 src/router: 路由目录 src/App.vue：页面级vue组件 src/main.js：页面入口js文件 static：静态资源目录 index.html：入口文件 .eslintrc.js：es语法检测 4.启动项目，输入：npm run dev，可根据控制台显示的链接直接在浏览器访问，一般情况下是 http://localhost:8080， 如果8080端口被占用，那么会自动增加上去，例如8081. 来源： oschina 链接： https://my.oschina.net/u/1156250/blog/3228118

项目兼容性问题 开发环境 360浏览器 vue "^2.5.17" vue-cli3 问题 对象不支持“startsWith”属性或方法 startsWith()方法用来判断当前字符串是否是以另外一个给定的子字符串“开头”的，根据判断结果返回 true 或 false。 查阅 MDN ，发现ie根本就不支持，因此使用ie内核的360浏览器必然也不支持 解决方案 这个是es6字符串的一个方法，但是ie不支持，因此只能使用babel-polyfill，这个是对这些不支持方法的实现，解决方法如下： npm install babel-polyfill -S import 'babel-polyfill' --- 在index.js中引入 新问题 在360上很奇怪，有的页面还会报这个错 然后我就把MDN的的polyfill给引过来了 新建一个polyfill.js，代码如下 if (!String.prototype.startsWith) { (function() { 'use strict'; // needed to support `apply`/`call` with `undefined`/`null` var defineProperty = (function() { // IE 8 only supports `Object.defineProperty` on DOM

前言 博客的编辑器终于做好了，可以愉快的写博客了 码起来 然后SHADOW发现博客页的加载越来越慢了，理论上博客的数量并不多。不应该会慢才对 排查问题 排查网络 打开Chrome的开发工具调到网络观察页面的加载情况有两个请求比较耗时 https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture 这是Bing的每日图片接口，用来做随机的主页博客背景。先记录下来，后续考虑换掉 http://www.shadow-li.com.cn/static/js/chunk-41d0b938.841343de.js 这个很明显是webpack的打包文件，重点是体积有点大，有500多kb 排查报错 本地环境开发时都排查过一遍，不太会有报错或者异常，略过 排查性能 切换到Chrome的performance，重新加载页面，观察整个页面的加载情况。 这里主要看FPS一栏，除了最初的200毫秒，也就是First Paint前基本保持满帧，应该也不是操作dom引起的重绘和回流 所以可以确定是文件加载过慢的导致的，而文件又比较大，所以从文件下手 webpack的打包的文件经过混淆和重新编译，直接在浏览器中看是看不出什么端倪的。所以需要工具的帮助 诊断 对webpack打包做分析推荐使用 webpack-bundle

VUE环境搭建 安装VUE NPM方式 在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。 # 最新稳定版 $ npm install vue 安装 命令行工具 (CLI) Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。 npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个vue项目 vue create 项目名称 项目创建成功。 启动项目 1.进入项目目录 2.启动项目 npm run 项目名 项目文件目录介绍 .git (隐藏文件) ===》git初始化时候的文件 node_modules ===》项目所有依赖的包文件 public ===》本地服务器的文件夹 index.html 主页 src ===》工作目录 assets ==>资源（图片，css） components ==>当如组件 App.vue ==>根组件 main.js 项目全局配置 .gitignore ===》不需要上传到仓库的文件 package.json ===》有关bable的配置 README.md ===》说明文件 项目启动先访问index.html 页面==》