Vue.js 相关
@xiaomajia
这是一个零散的记录遇到的问题的地方
展开
-
vue中的provide和inject
目录一、语法二、使用场景三、关于 provide/inject 的响应问题每次看到关于vue组件传值的文章,都会讲到provide和inject这种传值方法。但是在实际的项目开发中,基本没有看到过使用这个的场景(印象中之前看iview form组件代码的时候看到过),所以这应该用于什么场景当中呢?一、语法用法详见vue document - provide/inject,在...原创 2019-10-18 17:04:01 · 669 阅读 · 0 评论 -
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available
问题描述:原因分析:在项目配置的时候,默认 npm 包导出的是运行时构建,即 runtime 版本,不支持编译 template 模板。vue 在初始化项目配置的时候,有两个运行环境配置的版本:Compiler 版本、Runtime 版本。其主要区别在于:Compiler 版本:可以对 template 模板内容进行编译(包括字符串模板和可以绑定的 html 对象作为模板...原创 2019-03-07 20:47:32 · 36531 阅读 · 14 评论 -
vue cli3.x 项目中引入 vux(一):手动配置
最近做的一个项目,是使用vux组件库开发的,使用的时候发现vux在使用的时候需要做一些相应的配置,记录如下:建议 node.js 版本在7.6.0以上。1、引入vux# npm install vux --save2、vux2必须配合vux-loader使用,所以需要引入vux-loader# npm install vux-loader --sava--dev...原创 2019-06-17 09:45:49 · 2585 阅读 · 0 评论 -
vue cli3.x 项目中引入 vux (二):vux快捷生成模板
在 Vue 项目中使用vux组件有两种方法:1、在 Vue 项目中添加vux,详见:vue cli3.x 项目中引入 vux(一):手动配置2、快捷生成项目模板:详见官网文档-快速开始( 以下摘自官方文档 )(1)若没有安装 vue-cli ,先全局安装vue-clinpm install vue-cli -g(2)创建使用vux2模板的项目vue init...转载 2019-06-17 10:17:07 · 474 阅读 · 0 评论 -
vue cli3.x 项目中引入 less 全局变量
项目中使用 less 变量定义了项目的一些主题颜色,这里采用style-resources-loader 来进行全局引入。具体配置如下:1、安装style-resources-loader,并选择想要使用的语言(本项目中使用less)vue add style-resources-loader安装完成后,style-resources-loader 和vue-cli-...原创 2019-06-17 13:34:31 · 2772 阅读 · 1 评论 -
使用iview的Menu组件,路由中断跳转但是路由高亮仍然改变问题
问题描述:最近项目有一个需求,在表单填写相关页面,如果用户没有保存表单内容,点击导航栏将要离开页面的时候提示“信息未保存,离开页面数据将会丢失,是否确定离开?”(1)选择“确定” —— 执行路由跳转(2)选择“取消” —— 中止跳转,仍旧留在当前页以上为需求描述,遇到的问题是:选择取消后,侧导航栏的高亮项不正确。简单示例如下图:点击“错误收集”,取消路由跳转,页面仍停留在“...原创 2019-07-24 13:47:29 · 2786 阅读 · 0 评论 -
vue动态路由:路由参数改变,视图不更新
问题描述:使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下:原因分析:具体原因在vue官方文档:响应路由参数的变化一节中有讲过:当使用路由参数时,例如从/user/foo导航到/user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这...原创 2019-07-17 16:56:08 · 4065 阅读 · 0 评论 -
vue中通过v-html添加内容添加样式无效
问题描述:在使用富文本编辑图文详情的时候,通常会使用v-html引入所编辑的内容,然而,详情显示的样式有时不是我们希望的(尤其是图片,大图会出现溢出内容区域的问题),在<style scope> 中添加样式却并不生效。原因分析:以下摘自vue官方文档:在单文件组件里,scoped的样式不会应用在v-html内部,因为那部分 HTML 没有被 Vue 的模板编译器...原创 2019-08-12 10:39:51 · 2327 阅读 · 0 评论 -
vscode 格式化 vue 代码
格式化 HTML:即 vue(template)1. 安装 Vetur 拓展2. 配置 setting.json打开 [文件] -&gt; [首选项] -&gt; [设置] -&gt; [拓展] -&gt; [Vetur]vsCode 跟新过后设置变成下拉选择的方式来配置拓展,但是可以点击右上方的···按钮,选择选择打开 setting.json,即可添加用户设置配置 template...原创 2019-03-06 10:45:35 · 5794 阅读 · 0 评论 -
Vue.js(四)—— Vue的生命周期
看过vue官网以及一些讲述vue生命周期的文章,还是决定自己总结一下,便于理解: 生命周期:每个 Vue 实例在被创建时都要经过一系列的初始化过程——开始创建、初始化数据、编译模板、挂载Dom、渲染页面→更新→重新渲染、销毁等,也就是就是Vue实例从创建到销毁的过程,成为生命周期。 ...原创 2018-10-10 14:51:56 · 175 阅读 · 0 评论 -
Vue.js(二)—— 使用vue-router设置每个页面的title
1.引入vue-routerimport Vue from 'vue'import Router from 'vue-router'2. 在router/index.js文件中配置每个页面的title:export default new Router({ routes: [{ path: '/', name: 'homepage', componen...原创 2018-09-05 17:28:32 · 588 阅读 · 0 评论 -
Vue.js(三)—— vue.js中自定义过滤器filters
目录1. 基础语法2. 多个过滤器串联3. 单个过滤器接收多个参数vue.js 中允许自定义过滤器,用于常见文本的格式化;过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (表达式用法从 2.1.0+ 开始支持)。1. 基础语法将过滤器添加在 JavaScript 表达式的尾部,由“管道”符号指示:<template> <...原创 2018-09-12 15:38:25 · 2193 阅读 · 0 评论 -
vue项目执行npm i 安装依赖包常见问题
目录1. Downloading https://chromedriver.storage.googleapis.com/2.41/chromedriver_window32...报错2. node-sass 安装失败: Failed at the node-sass@4.12.0 postinstall script.3... 待续1. Downloading https://c...原创 2018-09-17 18:22:11 · 16350 阅读 · 1 评论 -
axios在vue中的应用(一)—— 简单调用
目录1. 安装并引入axios1.1 使用 npm/cnpm 安装1.2 在main.js文件中引入axios2. 使用axios请求本地json文件3. 将传递的json数据转为FormData3.1 引入qs3.2 添加请求拦截器,将axios参数转化为FormData形式4. 设置请求头Axios 是一个基于 promise 的 HTTP 库,可以用在浏...原创 2018-09-13 15:38:50 · 572 阅读 · 0 评论 -
Vue.js(五)—— Vue基础组件的自动化全局注册
在使用vue构建项目的过程中,我们会设置一些通用的组件,他可能只包含了一个按钮或者其他的一个小功能,但是会被我们在不同的组件页面频繁调用。此时若是每一个组件页面都进行引用,将会有很多重复冗杂的代码,可以改为全局注册。具体如下:1. 将这些通用基础组件放置在同一个文件夹下:如 components/baseComponents/2. 在应用入口文件中全局导入(如:main.js),以下是...原创 2018-10-12 11:25:27 · 3475 阅读 · 0 评论 -
Vue.js(六)—— 组件:slot用法
目录一、默认情况下(不使用slot)二、单个slot三、具名slot四、编译作用域五、默认插槽的内容六、作用域插槽七、访问slotVue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。简单来讲:默认情况下我们在父组件中加入到子组件的DOM是不会显示的,但是如果我们需要插入一段DOM,那么这段DOM是否显示,如何显示,显...原创 2018-10-15 11:56:21 · 1424 阅读 · 0 评论 -
vue2.x+webpack配置问题总结
目录1. 配置热更新&自动打开浏览器方法一:修改 package.json 文件方法二:修改 webpack.config.js 文件2. npm run build 生成的map文件配置【文件目录及相关配置基于 vue cli 2.x 版本构建】1. 配置热更新&自动打开浏览器实现自动打开浏览器、热更新和配置浏览器的默认端口号方法一:修改...原创 2018-10-09 10:26:21 · 1145 阅读 · 0 评论 -
axios在vue中的应用(二)—— 表单提交上传图片
使用axios实现图片预览、图片上传等功能:methods: { // 图片预览 priviewImg(e) { // ... }, // 提交表单 sumitRefund() { let fd = new FormData(); fd.append("reason", this.refundReason...原创 2018-09-30 15:23:31 · 687 阅读 · 0 评论 -
Vue2.x版本: 从零构建一个vue项目
1. vue环境搭建安装node.js,在安装node的时候会默认安装npm,输入 node -v可以查看当前node.js的版本 使用淘宝镜像源:npm install -g cnpm -registry= https://registry.npm.taobao.org 全局安装webpack:npm i webpack -g2. 初始化vue项目全局安装vue-cli脚手架:...原创 2018-07-06 17:24:18 · 279 阅读 · 0 评论