vue-cli 3.0

安装：

npm i @vue/cli -g

搭建项目：

vue create vue-test

按需加载element-ui

1、npm i element-ui -S

　　npm install babel-plugin-component -D

2、babel.config.js 文件中设置

module.exports = {
presets: [
'@vue/app',
'@babel/env'
],
plugins: [ // element官方教程
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
}

3、vue文件中引用

import { Button } from 'element-ui';

export default {
name: 'home',
components: {
[Button.name]: Button
}
}

vue单独页中修改body样式，钩子函数中修改

mounted:function(){
　　document.body.style.background = '#F3F7FF'
}

4、在vue中操作DOM--this.$nextTick()

比如一个新闻滚动的列表项。如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。

this.nextTick(callback)，当数据发生变化，更新后执行回调。

this.$nextTick(callback)，当dom发生变化，更新后执行的回调。

5、vue项目里，img标签报错，添加默认图片

<img src="/logo.png" :onerror="defaultImg"> data() { return { defaultImg: 'this.src="' + require('../../assets/img/timg.jpg') + '"' } }

转载于:https://www.cnblogs.com/ckmouse/p/11003357.html

vue-cli 3.0相关推荐

Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
vue/cli 3.0 与 2.0脚手架怎样mock数据
vue/cli 3.0 与 2.0脚手架怎样mock数据 3.0 移除了 static 文件目次,新增了 public 目次,这个目次下的静态资本不会经由 webpack 的处置惩罚,会被直接拷贝,所 ...
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
专访Vue作者尤雨溪：Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
Vue CLI 3.0正式发布！
web前端教程用大白话,来讲编程网友们纷纷点赞,也有网友调侃学不动了! 尤雨溪表示,Vue CLI 3.0 与其他的版本完全不同,它经历了重构,目的是: 1.尽可能减少现代前端工具在配置上的烦恼, ...
如何使用@vue/cli 3.0在npm上创建，发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
@vue/cli 3.0 eslint 转成tslint
我们用 vue/cli 创建新项目的时候,通常会选择代码检查工具 [eslint|tslint],有的时候难免会选错,这个时候想要替换,怎么办场景再现 vue create lint-vue 为了方 ...
Vue CLI 3.0 正式发布，Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
Vue Cli 3.0打包生成app
1.vue cli 3.0创建新工程,添加依赖mint-ui 2.项目配置中,公共路径设置为./,(注意,这一步非常重要,否则打包后项目找不到项目中文件) 修改保存后,可以看到vue.confi ...
基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

vue-cli 3.0

vue-cli 3.0相关推荐

最新文章

热门文章