Vue CLI

本项目演示地址： https://husilang.github.io/zm-ui 项目参考文章： 从零开始搭建Vue组件库 VV-UI 项目的初衷是学习怎么封装一个基于Vue的UI组件库，顺便记录每个步骤，以及在此过程中遇到的难点及体会。 下面是我个人的一个项目搭建流程，希望能帮助大家。 ①脚手架初始化项目 使用 vue cli 3.0.0版本以上 ，在node或cmd中输入以下命令创建项目 vue create project-name 选择 Manually select features 选择Babel，Router，Vuex，CSS Pre-processors，Unit Testing 选择Sass/SCSS(with node-sass) 选择Mocha + Chai 选择In dedicated config files 以上来安装（按需选择） 运行如下命令： cd project-name npm run serve 看项目是否成功启动，启动成功恭喜你完成第一小步~ ②目录结构修改 src目录修改为examples，用来组件示例 在examples目录下，新建docs文件夹，用来编写各组件的文档 在项目下新增packages文件夹，用来存放封装的组件 ③增加配置文件 由于修改了目录结构，需要修改相关配置，这里参考vue cli官网。 在项目根目录下

最近在用element UI开发一个toB系统时，发现设计稿和UI库有不小的出入，由于不是内部系统，所以这块的还原度没办法“得过且过”。我整理了一些覆盖UI库样式的“手段” 为什么UI库（这里用的是element UI）的组件不好直接覆盖？ 我们通常的vue工程都是用vue-cli自动生成出来的，不知道大家有没有发现一个细节——生成的*.vue文件上会默认带上“scoped”，如下图： UI库不好覆盖的问题也基本从这里开始了。首先看“scoped”是什么？首先“scoped”并不是vue的专利，（ “scoped”属性是HTML5的新特性，如果使用该属性，则样式仅仅应用到style元素的父元素及其子元素。 ）说人话就是vue用了scoped属性，导致当前*.vue文件里的style仅仅作用于当前组件的元素，而对 部分 element UI的组件无效（一些简单的组件，例如el-button这种简单替换的还是可以覆盖的）。 “scoped”在工程中是如何工作的？ 我们可以用自己的工程运行起来看一下。看看生成的页面是什么样的。 可以看到，在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了 data-v-hash 的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。 　

微信小程序搭建mpvue项目过程 第一步：安装Node环境 下载node.js安装包 下载地址： node.js中文网 根据电脑系统选择安装包：这里我选择的windows 64位安装包 安装过程：全程 next 就完事 打开cmd检查是否安装完成（Win+R或者直接搜索打开） 如果 版本号 可以显示出来说明安装成功 国外镜像比较慢，所以把镜像地址换成国内的网址 安装vue-cli脚手架（vue-cli是vue框架的脚手架）并创建项目 cmd下输入 npm install vue-cli -g下载安装脚手架 安装完成vue-cli后，输入vue查看vue是否安装成功，vue list是查看vue现有的组件，webpack是常用的搭建项目的组件 继续在cmd下输入vue init mpvue/mpvue-quickstart truth_hold 然后会出现以下页面 在Project name后敲击回车（Enter）进入下一步 将wx小程序id复制到命令行然后敲击回车 继续一直敲击回车（一直到出现下列界面）表示项目创建完成 进入到项目文件夹下并且安装项目配置文件 安装成功启动项目，输入 npm run dev 将项目导入微信开发者工具 打开开发者工具，菜单栏下的 导入项目 ，直接从创建项目处导入也可以 选择该文件夹然后导入即可 导入成功后将出现以下界面，表示项目搭建完成 来源：

1. 问题描述 在使用vue-pdf插件加载本地PDF文件进行预览时，报如下错误： 'Warning: Ignoring invalid character "33" in hex string' 'Warning: Ignoring invalid character "79" in hex string'... PDF文件位置如下 使用代码如下 <pdf src="/public/static/test1.pdf"></pdf> 2. 原因分析 主要原因是：读取PDF文件时，路径不合法，导致读取不到文件； 在vue-cli3脚手架搭建的项目中，读取本地的PDF文件需要放到public文件夹中，在引用时，不能使用相对路径，且‘/’即表示public文件夹(需略去public)； import pdf from 'vue-pdf'; // 使用组件自带的加载方法可以看到报错信息 mounted(): void { pdf.createLoadingTask('/public/static/test1.pdf').then((res: any) => { console.log(res); }); } 报错信息 3. 解决方法 若是本地开发则将路径改为如下 <pdf src="/static/test1.pdf"></pdf> 若是网络获取，则跟后端联调，确认文件路径是否有问题 来源

在阅读Vue（前端框架）以及Spring（Java框架）相关的文章时，经常会看到“脚手架”的概念。 脚手架，英文scaffolding。 编程的世界来源于现实的世界，那么现实世界中的“脚手架”是什么呢？ 脚手架一般理解是建筑中使用的设备工具，为了保证各施工过程顺利进行而搭设的工作平台。 Stack Overflow上有问答： What is scaffolding? Is it a term for a particular platform? Scaffolding is a meta-programming method of building database-backed software applications. It is a technique supported by some model-view-controller frameworks, in which the programmer may write a specification that describes how the application database may be used. The compiler uses this specification to generate code that the application can use to create, read, update

一、Vue3.0 的设计目标 更小\更快 - Vue 3.0大小大概减少一半，只有10kB 加强TypeScript支持 加强API设计一致性 - 易读 提高自身可维护性 开放更多底层功能 vue3.x 采用Function-based API 形式组织代码，使其更容易压缩代码且压缩效率也更高,由于 修改了组件的声明方式，以函数组合的方式完成逻辑，天然与typescript 结合。（vue2.x中的组件是通过声明的方式传入一系列options的，所以在2.x下使用typeScript 需要装饰器的方式 vue-class-component 才行） // vue2.x 要想使用ts 需要这样处理,详见官方文档 https://cn.vuejs.org/v2/guide/typescript.html <script lang= "ts" > import Vue from 'vue' import Component from 'vue-class-component' @Component export default class App extends Vue {} </script> 复制代码 二、typescript 有什么优点 1、增加代码的可读性与可维护性 大部分函数看类型定义就知道是干嘛的 静态类型检查，减少运行时错误 2、社区活跃，大牛都在用 在vue3热潮下

项目简介 星然云商城是基于当前流行技术采用前后端分离商城系统,包含商城,会员,充值,购物车,退款,订单,付款等功能，更适合企业,个人二次开发； 项目开源地址： https://github.com/xrshop/xrshop_h5 项目官网地址： http://ds.judaixia.com 主要功能如下： ① 订单模块：下单、购物车、支付，发货、收货、评价、退款等 ② 配置模块：各种配置 ③ 用户模块：登陆、注册、会员卡、充值、购买等 ④ 商品模块：商品添加、规格设置，商品上下架等 ⑤ 其他等 部分功能截图如下: 技术选型: 后端使用技术 1.1 SpringBoot2 1.2 MyBatis-Plus 1.3 SpringSecurity 1.4 Redis 1.5 Quartz 1.6 Mysql 1.7 swagger 1.8 Lombok 1.9 Hutool 1.10 Mapstruct 1.11 Redisson 前端使用技术 2.1 TypeScript3 2.2 Vue2 2.2 Sass 2.2 VueCli3 2.2 WebPack4 2.2 Babel 2.2 Git 2.2 Nginx​ 来源： oschina 链接： https://my.oschina.net/u/4552122/blog/4464157

electron-vue这个插件没用过，因为里面的electron版本和vue版本固定了感觉不灵活所以没去尝试，使用 Vuecli3.0 和electron5.0.8版本用到了串口，无语的是打包每次都成功了，一运行就报错。报错的意思大概就未引用seriaport模块，一顿无语。。。我不是在配置文件加了么。。。。 只好去他们的官网查看，终于让我找到了问题所在 蛋痛的是，这文件加在哪儿？？？？ 心里是崩溃的，最后没办法怀着试试的心态加到根目录 打包后成功了。。。。 嗯。。。研究这个已经三个星期了，各种坑，对于我这个英语菜的我都不好意思的人，还是很开心的。。。。看来是时候好好学习下英语了， 来源： oschina 链接： https://my.oschina.net/u/4398116/blog/4286115

VUE学习目录汇总 一、vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟俺一起全面入坑 03 “Vue2.0”跟俺一起全面入坑 —— 自定义便签 超好用的VueJs调试工具——vue-devtools Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli） Vue2.0史上最全入坑教程（中）—— 脚手架代码详解 Vue2.0史上最全入坑教程（下）—— 实战案例 Vue2.0史上最全入坑教程（完）—— 实战案例 vue-cli中配置sass 和 利用SASS函数功能实现px转rem 二、vue提高 Vue2.0生命周期和钩子函数的一些理解 ===》 推荐 用webpack（2.x语法）手动搭建Vue项目 全面解析vue-cli生成的项目中使用其他库（js库、css库） Vuex从入门到入门 ===》 大中型项目复杂逻辑会用到 Vuex从入门到熟练使用 Vuex从入门到熟练使用 vue与服务端通信—vue-resource vue开发过程中跨域最简单解决方案 富文本编辑器Ueditor如何在Vue中使用？ 三、vue 1.x和vue 2.x的区别 到了Vue2.x有哪些变化？—— 知识点 到了Vue2.x有哪些变化？—— 组件通信 四、其他必备知识点 ES6入门（一） ES6快速入门（二） ES6快速入门

前言 本次的一个布局技术都写的非常详细了，只要按着来就行，不过，先说明本次主题为二次元主题。 如果真的喜欢本主题的不妨可以试一试（建议跟据目录来看） 在很久很久以前。。。。 嘛，就在前不久我正在。。 额，上图仅仅表示我的 无敌 无聊，本人不抽烟。 嗯嗯，在我闲来无事的过程中我找到了一个我特别喜欢的个人博客网站； 然后：（放图~哦哦） 大佬”蝉时雨“，自己写的主题： 1、所用前端技术：vue 2、博客文章存储技术：Github issuses（就是原项目的讨论部分，分类，心情也是使用的，待会细讲） 3、博客评论技术：Gittalk (嗯，就是github提供的开发者设置里面有) 4、博客热度技术：LeanCloud (因为没有后端数据库方面，所以使用第三方存储) 传送门： 蝉时雨的网站 传送门： 蝉时雨的github 嘛，待会就以这几个部分讲解 技术简单过 先说好其实并不难，真的不难，按着来就行！！！ 思维图如下： 脑图版： 本次的仓库： 本次的要改动代码： 本次环境： 在食用 Aurora 主题之前，需先安装 Nodejs 和 Git 环境，这两步不必细说。环境安装完毕，由于 Aurora 使用 vue 开发，所以需要安装 vue-cli。 欧克，Let`go Github Pages 的部署（个人网址的托管） 1、创建自己github的Pages（并把项目拉下来自己测试跑） ①