weixin_40030173的博客

1、检查node.js是否安装，进入cmd命令检查: node -v npm -v2、装淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org3、全局安装webpack:npm install webpack -g webpack版本4以上，需要安装webpack-cli 依赖 :npm...

【代码】pinia安装和使用。

创建src/router/index.ts。

【代码】vue-orgchart拓扑图。

1、vue3安装element-ui不兼容，安装element-plus代替。2、main.js 配置问题，引入顺序很重要。

如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。

解决富文本tinymce/tinymce-vue 汉化不彻底的问题1、翻译成汉字，然后找个中文在线转换unicode的网站转换2、找到 zh_CN.js文件，粘贴进去即可

去官网https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

<el-button type="primary" size="medium" style="width:90%;" @click="login">登录</el-button>created() { this.enterDown(); }, methods: { enterDown() { document.onkeydown = e => { let key_code = window.event.keyCode;

//安装npm install --save axios//组件引入import axios from "axios";axios.post(url, {参数}, { headers: {}//请求头配置 } ).then((res) => { })axios.get(url,{ params:{}, //参数 headers:{}//请求头配置 }).then((res)=>{ con

uuid1()根据当前的时间戳和MAC地址生成， uuid3()和uuid5()使用命名空间和自定义字符串生成，uuid4()使用随机数生成。据说uuid1()的唯一性得到保障，也最chuangyd1()根据当前的时间戳和MAC地址生成， uuid3()和uuid5()使用命名空间和自定义字符串生成，uuid4()使用随机数生成。据说uuid1()的唯一性得到保障，也最chuangy安装npm install uuidv1引入import uuidv1 from "uuid/v1"fn()

使用变量process.env.VUE_APP_BASE_API进行取值。在js文件中直接使用const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 10000,})1.Vue2.0页面写法通过data定义<template> <div> <a :href="this.uploadUrl">点击</a> </

情况一、路径，cd到正确路径情况二、已丢失，重新下载：vue init webpack npm installnpn run dev

Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作，如：actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) }}让我们来注册一个简单的 action：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const sta

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count:1 }, mutations: { increment (state) { state.count++ }, increment1 (state, n) { state.count += n } }})export d

store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '111111', done: true }, { id: 2, text: '222222', done: false } ] }, getters: { doneTodo

store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }})export default storemain.jsimport Vue from 'vue'i

store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const moduleA = { state: () => ({ count: 0 }), mutations: { increment (state) { state.count++ } }, getters: { doubleCount (state) { return s

核心概念：state、 getter 、mutations 、 actions参考：https://www.shangmayuan.com/a/e3ac0302b11d42228252c043.html

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就

侦听器<template> <div> <input type="text" v-model="val1" />+ <input type="text" v-model="val2" />={{ val0 }} </div></template><script>export default { data() { return { val1: "", val2

getter 读调用setter 写调用计算属性的 setter计算属性默认只有 getter，不过在需要时你也可以提供一个 settergetter的使用，如下：<template> <div class="page"> <p>{{firstName}}</p> <p>{{lastName}}</p> <p>{{fullName}}</p> </div></

vue elementUI el-dialog中vm.$nextTick( [callback] )参数：{Function} [callback]用法： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。...

起初用vue项目引入高德地图插件，发现地图无法在弹框显示。解决办法就是抬高层级。但是用由于在弹框里，此处用 position: absolute;不行直接用 position: fixed;然后z-index越大越好；

1、npm 安装npm install vue-amap --save2、main.js文件引入vue-amapimport VueAMap from 'vue-amap'Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: '你申请的key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', '.

通过 npm 安装 echartsnpm install echarts --save引入使用<template> <div class="dashboard-container"> <div id="chartBox" style="width: 60%;height:50vh;"></div> </div></template><script>import echarts from 'ec

内置组件keep-alive主要用于保留组件状态或避免重新渲染。效果一：comp1 页面跳转至 home页面， home页面不刷新comp2 页面跳转至 home页面， home页面刷新//配置路由 router/index.jsimport Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Comp1 from '@/pages/com

导航守卫：全局守卫、路由独享的守卫、组件内的守卫举例说明：import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Parents from '@/pages/Parents'Vue.use(Router)const router = new Router({ routes: [ { path: '/',

props父传子<!--父组件--><template> <div><p>parents</p><Child :default-set="arr"></Child> </div></template><script>import Child from './Child'export default { components: { Child },

转自：https://www.jianshu.com/p/1a60557b74c1使用vue进行开发时，如果要刷新当前路由，则调用router.go(0)方法即可。但是某些情况下，我们可能要求仅仅刷新某个组件，而不是路由，那么我们应该怎么做呢？1.使用this.$forceUpdate()强制重新渲染如果要在组件内部中进行强制刷新，则可以调用this.$forceUpdate()强制重新渲染组件，从而达到更新目的。<template><button @click="reload(

<video id="myvideo" width="320" height="auto" controls="controls" muted> <!-- 加muted 是为了可以实现自动播放 --> 你的浏览器不支持HTML5播放此视频 <span style="white-space:pre"> </span><!-...

<template> <div class="page-content"> <div class="footer"> <el-button slot="right" @click="handelClearEl()" class="no_btn">清除</el-button> <el-button slot="rig...

安装image-conversion包npm i image-conversion --save<template> <div class="select_invoice"> <el-upload class="upload-demo" :multiple="true" :action="你服务器" :data="uploadData" ...

多层数据结构,`我们可以考虑使用v-for进行嵌套循环 <ul> <li v-for="(item,index) in tableData" :key="index" > 0{{item.name}} <ul> <li v-for="(item1,index1) in tableData[index].items" :...

1、引入jquery(前面文章有介绍)2、引入bootstrap安装bootstrap，使用命令npm install bootstrap --save-dev安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容：import 'bootstrap/dist/css/bootstrap.min.css'import...

1.首选通过npm安装jquerynpm install jquery --save2.在build/webpack.base.conf文件当中引入jquery，加如下代码'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')3.在需要的地方4.引入成功了...

去除http://localhost:8080/#/中的#号，router/index.js中加入： mode: ‘history’,

第一步：安装：npm i element-ui -S第二步：src/main.js中全局引入：// 引入ElementUIimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)个人喜欢全局引入，你也可按需引入，例如：import Vue f...

element table 修改字体颜色，根据条件判断设置符合条件的，数据字体或者背景改变颜色。 <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" :row-class-name="ta...

1、运行下面按钮npm install less less-loader --save2、配置webpack.base.conf.js{ test: /.less$/, loader: "style-loader!css-loader!less-loader", }把上面的内容加入位置如图所示：...