初探vue3.0笔记
tips: 请注意区分vue3.0和vue cli 3.x/4.x
创建项目
vue create -r https://registry.npm.taobao.org vue-next-test
选择你喜欢的配置即可,创建成功后,从Demo来看,跟vue2.0的typescript写法差别看起来不大的样子。。。
tips: 请注意区分vue3.0和vue cli 3.x/4.x
vue create -r https://registry.npm.taobao.org vue-next-test
选择你喜欢的配置即可,创建成功后,从Demo来看,跟vue2.0的typescript写法差别看起来不大的样子。。。
错误信息:Cannot find module './App.vue' or its corresponding type declarations
解决方案:修改shims-vue.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
解决方案:重启 Vscode
解决方案:在src目录下新增vue-property.d.ts
import Vue from 'vue'
declare module "vue/types/vue" {
interface Vue {
$api: any;
}
}
解决方案: 修改tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["webpack-env", "vuex"],
"paths": {
"@/*": ["src/*"],
"@/components": ["src/components"] // 添加这一行
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
"exclude": ["node_modules"]
}
该文章为异教徒解决方案,各位看官看下即可,切勿模仿!!!
原生的el-upload只支持上传图片时候的预览和回显,这是因为只针对img标签做了适配,如下图。
而如果我们上传视频,则会出现一个白方框,用户体验不佳。
其实正确的解决思路应该是
show-file-list
属性设置为false
。然后再自己循环显示file-list,以及追加对应的预览,删除按钮及功能。但是我觉得这样太麻烦了(时间问题)。
于是我突发奇想,如果我将img标签改成video标签呢?如下图
发现居然完美契合,毫无违和感。
在做到把img改为video标签之前,还需要解决的另一个问题就是,如何让视频也支持预览。老规矩,我们先来看看官方Demo怎么实现预览的。
官方的做法是增加一个dialog,然后在点击预览图片时将文件url传给dialog。我们先来实现一下改写一下dialog
<el-dialog :visible.sync="dialogVisible" :modal-append-to-body="true">
<video width="100%" muted autoplay="autoplay" loop="loop" v-if="dialogImageUrl[dialogImageUrl.length - 1] == 4" :src="dialogImageUrl"></video>
<img width="100%" v-else :src="dialogImageUrl" alt />
</el-dialog>
tips: 我这种判断MP4格式的方式实属异端,不建议模仿。
一到标签节点的操作,我第一想到的就是document操作(异端+1),直接上代码。
changeVideoTag(){
let videoTag = document.querySelector('.video img')
console.log('检测到应为video的img标签', videoTag)
if(videoTag){
let parentNode = videoTag.parentNode
let newElement = document.createElement('video')
newElement.setAttribute('class', videoTag.getAttribute('class'))
newElement.setAttribute('src', videoTag.getAttribute('src'))
parentNode.insertBefore(newElement, videoTag)
}
},
该函数负责寻找video类下的img标签,然后在img标签之前,添加一个同样的videos元素节点,此处你可以选择是否移除原img标签。
原理就是在项目中添加一个webpack插件,然后配置插件
项目根目录新增vue.config.js
const path = require('path')
const RemovePlugin = require('remove-files-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new RemovePlugin({
after: {
root: path.join(__dirname, './unpackage'),
include: [
path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ?
'build' : 'dev', process.env
.UNI_PLATFORM, './mp-weixin/static/APPPIC')
],
trash: false
}
})
]
}
}
部分webpack类似的webpack插件