solocao的专栏

父组件子组件核心方法，多个对外暴露方法就行

解决方案：1、安装@vitejs/plugin-vue-jsxpnpm install @vitejs/plugin-vue-jsx2、配置vite.config.tsimport vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({ plugins: [ vue(), vueJsx() ]})

我的需求是弹出一个模态框。使用visible控制隐藏与现实，需要watch，visible变化，执行其他相关操作。核心代码如下：import { watch, toRefs } from "vue";const props = defineProps({ visible: { type: Boolean, default: () => { return false; }, },});const visible = toRefs(props).vis

1、安装vite-plugin-importer2、配置vite.config.ts文件import { fileURLToPath, URL } from 'url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx'import usePluginImport from 'vite-plugin-importer'

想把项目公司一些基础公用组件进行封装，所以需要对单组件进行开发优化。使用到Vue Cli官方文档：https://cli.vuejs.org/zh/guide/build-targets.html1、一个新环境，需要安装Vue Clinpm install -g @vue/clinpm install -g @vue/cli-service-global2、创建项目(已经在事先创建目录下，使用.)vue create .3、安装lessnpm install less less-load

属于个人代码整理filters: { formatDate: function (e) { // 获取js 时间戳 let time = new Date().getTime(); // 去掉 js 时间戳后三位 time = parseInt((time - e) / 1000); // 存储转换值 let s; if (time < 60 * 10) { // 十分钟内 r

在index.html引入<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>配置文件vue.config.js代码如下：module.exports = { configureWebpack:{ externals: { 'jquery' : '$', } },};

需求：自己留个记录<div class="button—2" @click="uploadFile"> <input type="file" ref="file" multiple="multiple" @change="fileChange" style="display:none"> 上传 </div>async fileChange(event) { const file = event.target.files[0]; const res

neditor是ueditor的亚种。我已经实现了vue+neditor的封装，下面记录一下常用工具栏的配置。1、配置方法实例化编辑器的时候传入 toolbars 参数2、参数列表名称描述anchor锚点undo撤销redo重做bold加粗indent首行缩进snapscreen截图italic斜体underline下划线strikethrough删除线subscript下标fontborder字符

在使用vue脚手架生成的目录中，会有一个src/assets还有一个static。两者都可以用来放一些静态文件。那有什么区别呢？static中的文件不会被webpack打包，文件被复制到dist/staticassets中的文件会经过 webpack 打包，重新编译。图片若放在assets中，引入需要用require。data () { return { pic: require(...

在使用xlsx库的时候遇到的报错。This relative module was not found:* ./cptable in ./node_modules/xlsx-style/dist/cpexcel.js记录解决方法，我是使用webpack进行配置的。在chainWebpack里面增加一行代码，重新编译，即可。config.externals({ './cptable': ...

在研究vue代码中动态加载组件遇到这样的问题，记录解决方法：1、安装@babel/plugin-syntax-dynamic-importyarn add @babel/plugin-syntax-dynamic-import2、.babelrc中配置{ "plugins": ["@babel/plugin-syntax-dynamic-import"]}...

通过sync修饰符，来实现子组件更新父组件状态，是目前写法上最方便的语法糖了。下面举个例子1、首先父组件声明状态active，并写一个子组件&lt;compo :foo.sync="active"&gt;&lt;/compo&gt;这种语法糖其实会被解析成&lt;compo :foo="active" @update:foo="val =&gt; active = val"&gt;&

1、重定向 redirectconst routes = [ { path: '/', redirect: '/index'}, { path: '/index', component: index }]2、嵌套路由const routes = [ { path: '/index', component: index, children: [ ...

Nuxt.js简单介绍2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的...

本来项目完美打包，后来我增加了一个插件vue-ionicons，打包build就是报错：ERROR in static/js/8.017e5cf2d2f1a552890d.js from UglifyJsUnexpected token: punc (() [./node_modules/vue-ionicons/dist/ionicons-mixin.js:7,0][static/js/8....

有些场景，比如表单验证的时候，只要有一个字段没有填写，就给出toast提示，这就需要一发现问题，就给出提示，并且跳出循环。map想要直接跳出循环，需要使用抛出异常的写法，而for of则适用这种场景。使用for of// 进行提交前的验证valid() { for (const key in Object.keys(this.form)) { if (this.form[key...

为了方便，是用了vue-quill-editor作为富文本编辑器，但是他和一些插件的安装有注意点：1、在vue.config.js中修改配置var webpack = require('webpack');module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ ...

1、在src目录下创建config文件夹。2、创建三个文件development.jsexport default { oss: 'development', apiUrl: 'http://0.0.0.0:8081'}production.jsexport default { oss: 'development', apiUrl: 'http://0.0.0.0:8...

记得在工作区设置中配置如下{ "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_line_length": 120, "wrap_attributes": "auto", "end_with_newline": false } }, &

需求：一个对象const state = { user: { verify: { state: 0 } }}我需要使用类似this.set({ 'user.verify.state': 1 })这种写法直接获取或修改state[user.verify.state]的值。不知道别人怎么写的，我的写法如下：const mutations = { set...

很早以前，都是手动配置webpack搭建vue运行环境。现在很多脚手架可以使用了。1、创建一个项目目录比如client2、进入目录运行npx @vue/cli ./3、选择Manually select features，选择自己常用的特性4、安装完成后，运行npm run serve 就搞定了。...

为了保证多个项目复用代码，我喜欢把路径别名设置为@，下面结束vscode中的配置方法。1、安装插件Path Intellisense2、配置"path-intellisense.mappings": { "@": "${workspaceRoot}/src"}3、在项目package.json所在同级目录下创建文件jsconfig.json：{ "compilerO...

在使用nuxt之前，我们正常的route控制语法如下：const route = new Router({ routes:{ [...] }})route.beforeEach(to,from,next){ //进行路由权限校验等方法}而使用nuxt，路由默认会根据页面的路径规则自动生成，所以乍一看根本没有配置的地方，所以当我们想要使用类似bef...