vue
国内使用度最高的前端现代化框架
前端薛小帅
代码戏人生,写出新风采
展开
-
Vite+Vue3+Pinia学习笔记
Vite+Vue3+TypeScript+Pinia学习笔记原创 2022-10-28 10:31:55 · 524 阅读 · 0 评论 -
Vue3中经验总结
【代码】Vue3中经验总结。原创 2022-10-27 23:56:13 · 153 阅读 · 0 评论 -
uniapp全局组件全局使用(不在每个页面template使用,仅支持H5),函数式调用全局组件方法
uniapp全局组件全局使用(不在每个页面template使用,仅支持H5),函数式调用全局组件方法原创 2022-08-16 14:17:34 · 12875 阅读 · 13 评论 -
Vue根据富文本内容生成目录
根据富文本内容生成目录,CV即可原创 2022-06-14 15:54:58 · 2721 阅读 · 8 评论 -
Vue3尝个鲜,reactive、ref、toRefs的简单使用
这年头不会vue3的是不是要被淘汰了,为了我还能吃上口热乎饭,赶紧来玩一玩需求是响应式的,修改数值,如图所示这在 vue2.x 中简直无脑操作,接下来我们用 vue3 中的两种方式去实现<!-- HTML代码我们保持一致 --><template> <div>{{ a }}</div> <button @click="add">+</button> <button @click="reduce".原创 2022-04-29 14:31:49 · 989 阅读 · 3 评论 -
Centos宝塔上面如何部署Nuxt服务端渲染项目
服务器必装 Nodejs PM2 MongoDB(因为我这个项目用的MongoDB) Redis(我这里用到了)广告:(推荐几个服务器厂商,进去购买有优惠)阿里云https://www.aliyun.com/activity/daily/fy22sepmain?userCode=layypnp8腾讯云https://curl.qcloud.com/CrBmXe58项目上传这里先看一下我Nuxt目录结构简单介...原创 2021-09-10 11:42:20 · 816 阅读 · 0 评论 -
Vue3封装IconFont组件
在 src/Components 目录下新建 iconFont/index.vue 文件原创 2021-06-03 10:23:50 · 603 阅读 · 0 评论 -
Nuxtjs怎样使用全局scss、less
首先需要安装 npm 插件@nuxtjs/style-resources然后在 nuxt.config.js 中进行配置export default { ... css: [ {src:'~assets/css/index.scss',lang:'scss'}//引入你的scss文件 ], ... modules: [ '@nuxtjs/style-resources',//引入模块 ], styleResources: { scss.原创 2021-02-08 09:42:17 · 724 阅读 · 0 评论 -
NuxtJS中使用axios,Nuxt封装axios请求
nuxt 项目通常都会给我们自带 @nuxt/axios 模块,如果你没有请安装npm install @nuxt/axios -s安装完成之后我们打开 nuxt.config.js,在 modules 中配置如下modules: [ '@nuxtjs/axios'],完成之后就可以直接在 asyncData 里面使用 axios 了但是这里主要讲的是 Nuxt 中 axios 的封装,包括 拦截 和 url 统一管理,请往下看首先在 plugins 目录下新建一..原创 2021-01-22 15:14:57 · 6149 阅读 · 2 评论 -
Nuxt的服务端部署
Nuxt有两种部署方案,即 静态部署 和 服务端部署静态部署 主要就是 spa 部署,执行 npm run generate 即可生成 dist ,放置在服务端即可项目打包重点来说一下服务端部署将 nuxt 项目中的 nuxt.config.js 中的mode改为uniserval 然后执行npm run build 生成 .nuxt 目录 最后执行 npm run start 命令即可然后将下图中的三个目录放置在服务器上,在服务目录下执行 npm run start 即可在服务端运.原创 2020-12-15 19:00:18 · 1418 阅读 · 0 评论 -
vue-cli怎样搭建Vue项目?使用vue-cli搭建Vue3.xBate版项目
Vue2.x项目的创建我这里使用的是 @vue/cli 4.1.2 版本查看 vue-cli 的版本打开 CMD 终端输入 vue --version安装 vue-cli 脚手架在 CMD 终端中输入 npm install -g @vue/cli 全局安装 vue/clinpm install -g @vue/cli创建Vue2.x项目至此vue2.x项目就搭建完成,接下来按照提示启动项目即可目录结构如下图所示打开 package.js..原创 2020-09-20 00:25:38 · 394 阅读 · 0 评论 -
vue封装图片上传组件,nodejs实现图片上传
今天来造一个轮子,vue的图片上传组件,虽说ElementUI已经有了,但是不满足我的需求,所以不得已造了一个个人博客后台每篇博文需要上传一张主图我的需求是在编辑文章的时候获取到存在的图片,可以将其删除重新上传(就是修改文章主图)但是ElementUI只可以上传图片,然后点击删除按钮删除图片,不能设置初始图片???????????? 前端Nuxt.js 后端Node.js(express) 数据库MongoDB博客地址 ????????????前端薛帅首先来展示前端封装的组件原创 2020-07-12 01:47:30 · 675 阅读 · 0 评论 -
axios的二次封装,请求、base_url、接口统一管理分开处理
首先先来看一下目录结构主要有三个文件 api.js |url.js | conf.js先来介绍一下这三个 js 文件api.js,封装的axios代码,源码如下import axios from 'axios'import { BASE_URL, API_URL } from './conf'; // 1-引入BASE_URL 和 API_URL,后面再说这两个是什么东西// const token = sessionStorage.getItem('token')...原创 2020-06-07 18:31:21 · 1863 阅读 · 0 评论 -
论前端小白怎样在vue中最快速的使用mock.js
首先 ==>npm i mockjs -D 安装 mockjs 接下来 ==> src 下 新建目录mock => mock目录下新建index.jsindex.js内容如下const Mock = require('mockjs');//格式: Mock.mock( url, post/get , 返回的数据)Mock.mock('/user/userInfo', 'get', require('./json/userInfo'));然后 ==>...原创 2020-05-28 11:55:56 · 233 阅读 · 0 评论 -
npm install 报错? fs 不能被resolve ?
先看一下报错信息然后我按照他的提示去 node_modules 里面找到对应文件,注释掉 fs 相关就ok了可是这样毕竟不雅经过苦苦寻找,终于找到原因了在 webpack.config.js 中添加如下// 与 entry output ... 是同级关系 node: { fs: 'empty'},...原创 2020-05-22 09:09:04 · 1266 阅读 · 1 评论 -
Vue中给Window对象添加方法
大家都知道vue中所有元素都是作用于Vue实例的,可是我使用DCloud的Wap2App打包App之后需要配置sitemap.json,配置onclick事件,但是该事件只能绑定Window下的方法,所以此时就需要在Vue中定义一个方法,并将其绑定在Windows对象下首先在App.vue methods中定义一个方法methods:{ share(){ //微信分享 ... }}然后在mounted中写下如下代码,将其绑定在W...原创 2020-05-19 09:16:12 · 6290 阅读 · 0 评论 -
将Vue项目打包成App
首先将源码执行如下命令打包生成 dist 目录npm run buildyarn build然后打开 HbuilderX创建 5+App创建好之后,在你创建的项目下会生成 img,css,js 等静态资源将最开始打包的 dist 目录里的静态资源拖至新创建的 5+App 项目内(删除掉原有的静态资源,或覆盖)到这里,本来创建的 5+App 里的文件除了最开始...原创 2020-04-24 16:18:09 · 1357 阅读 · 0 评论 -
Nuxt中使用Vuex的Actions
在Nuxt.js中如果使用Vuex,我们不需要安装引用,Nuxt已经帮我们解决了这个问题只需要在Nuxt的store目录下创建js文件即可每一个js文件都可以是一个模块(当然index.js除外,这是根模块)//tools.jsexport const state = () => ({})export const mutations = {}export const...原创 2020-04-22 14:51:29 · 1708 阅读 · 0 评论 -
vue中计算属性computed的用法,js保留两位小数
用法一、这种方法大家都司空见惯了,这里的value就是3<template> <div>{{value}}</div></template><script> export default { data(){ return { num...原创 2020-04-16 15:41:12 · 1817 阅读 · 0 评论 -
vue-cli3.x项目发布到GitHub服务器
首先得有一个GitHub二级域名,点此查看然后将你本地用vue-cli3.x搭建的项目执行npm run build 进行打包打包完成直接提交到git仓库是不行的,会报一些静态资源 404这个时候在项目根目录下创建一个 vue.config.js 文件(相当于webpack.config.js),并写下如下代码module.exports = { public...原创 2020-04-07 11:41:39 · 245 阅读 · 0 评论 -
Nuxt.js中配置生产环境和开发环境API
首先在 nuxt.config.js 中配置 env 如下代码:export default { ... env: { baseUrl: process.env.BASE_URL || 'http://xxx.xxx.xx.xx:xxxx' }}然后在 plugins 目录下创建 axios.js 文件,并写下如下代码import axio...原创 2020-03-22 17:38:34 · 2632 阅读 · 0 评论 -
vue中配置开发环境和生产环境api
首先在 config 目录下新建一个 proxyConfig.js 文件,并写入如下代码:module.exports = { proxy: { '/api': { target:'http://xxx.xxx.xx.xx:xxxx', // 接口域名 changeOrigin:true, //是否跨域 pathRewri...原创 2020-03-22 16:07:57 · 1352 阅读 · 0 评论 -
Nuxt.js中使用video.js
首先需要安装依赖包npm install vue-video-player --save然后在plugins目录下新建文件video-player.js在video-player.js里写下如下代码import Vue from 'vue'const VueVideoPlayer = require('vue-video-player/dist/ssr')Vue.us...原创 2020-03-10 14:22:33 · 2932 阅读 · 0 评论 -
Vue中使用wangeditor
这款富文本还行,使用起来比较简单首先安装npm包npm install wangeditor -S然后在需要的组件中使用<div class="editor" id="editor" ref="editor"></div>设置 editor 的css.editor{ width: 100%; height: 700px; margi...原创 2020-03-04 09:58:26 · 960 阅读 · 0 评论 -
vue中使用tiny-mce的使用心得
首先安装两个组件npm install @tinymce/tinymce-vue -Snpm install tinymce -S安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到static目录下tinymce 默认是英文界面,所以还需要下载一个中文语言包然后将这个语言包放到static目录下然后在...原创 2020-02-28 03:12:41 · 2339 阅读 · 1 评论 -
vue中监听路由传过来的参数是否发生变化
// 首先第一次进入该页面mounted(){ this.articalType = this.$route.query.artical_type; this.getArticalByType();},...// 改变参数且不刷新页面watch:{ // 监听参数是否发生变化 $route: { handler() { ...原创 2020-02-27 02:03:20 · 1596 阅读 · 0 评论 -
Nuxt.js使用url进行路由传参
父页面通过<nuxt-link></nuxt-link>中 to 传参,使用字符串拼接的形式<li v-for="(item,index) in artical_type" :key="index"> <nuxt-link :to= "'typeDetail?artical_type=' + index " > ...原创 2020-02-27 02:00:06 · 1583 阅读 · 0 评论 -
Vue+ElementUI打包之后,为什么字体图标找不到
找到 build目录 下面的 utils.js 修改如下内容if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' //新增这行 })...原创 2020-02-26 17:46:51 · 708 阅读 · 4 评论 -
Vue兄弟组件之间的传值
Vue父子组件之间的传值我们会了之后,兄弟组件怎么传值呢第一种思路是 子传父,父传子第二种思路是 建立一个中转站这里主要说第二种思路首先新建一个js文件bus.js,我这里建在了assets下bus.js里面写出如下代码import Vue from 'Vue'export default new Vue;然...原创 2020-02-21 18:04:58 · 355 阅读 · 0 评论 -
Nuxt+Vuex初体验
小呀嘛小二郎,背着书包上学堂。。。今天一个困扰了我一周时间的问题终于被我解决了,值得庆祝在Nuxt中使用Vuex实现数据存储首先:在store目录下新建一个index.js文件需要有两个组件(index || demo)[组件名自定]一、在store目录下新建一个index.js文件index.js内容如下//定义数据export const sta...原创 2019-12-22 16:58:41 · 192 阅读 · 0 评论 -
Vue+Vuex初体验
首先:安装vuexnpm install vuex -S需要有两个组件(HelloWord.vue 和 HelloDemo.vue)[组件自定义]注册路由注册store测试一、需要有两个路由HelloWorld.vue如下<template> <div class="hello"> <h2>{{this....原创 2019-12-21 00:07:56 · 112 阅读 · 0 评论 -
使用Vue项目还要Python2.7环境吗
最近从GitHub上克隆了一个Vue的后台模板,项目README里面写的直接npm install,然后npm run dev就可以启动,可是我npm install之后报错,大概错误信息是没有安装python2.7环境Can't find Python executable "python", you can set the PYTHON env variable此时,你只需要执行...原创 2019-12-11 09:36:28 · 8271 阅读 · 2 评论 -
Vue父子组件传值
父组件代码:<template> <div class="my_index"> <!-- 文章详情 --> <artical-detail v-if="isShow" @getShow="getShow" :detail_title='detail_t...原创 2019-11-08 15:18:06 · 478 阅读 · 0 评论 -
Vue动态设置Dom元素宽高
需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的<template> <div class="slider"> <h1>Hamy</h1> </div></template><script>...原创 2019-11-04 11:15:53 · 5647 阅读 · 0 评论 -
axios使用get方法给后端传值,登录功能的实现
前端使用vue实现页面,使用axios进行前后端交互后端使用node.js提供接口数据库使用navicat for mysql前端代码:(组件中使用axios前后端交互)import axios from 'axios'export default{ name:'myAdmin', data(){ return{ use...原创 2019-10-21 17:22:07 · 2078 阅读 · 0 评论 -
Vue项目如何部署到服务器,Vue-cli3.x及以上版本如何部署
打开项目的config--->index.js,改动如下两处代码build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist')...原创 2019-07-28 23:25:48 · 27923 阅读 · 4 评论 -
Vue项目开发前的准备工作,node的安装,vue-cli的安装
一、安装node 1-点击这里进入node官网下载 2- 3-下载完成是这样的 4-双击打开进行安装,一路next,安装完成是这样5-打开cmd进入安装node的文件夹,输入node –v,回车,出现版本号说明node安装成功二、vue-cli的安装 进入cmd找到刚才安装node的文...原创 2019-04-30 17:15:06 · 337 阅读 · 0 评论 -
Vue中怎样使用swiper组件?
我用的VSCode编译器,首先打开终端,进入项目(我是在13-vue文件夹下面的elem中使用)D:\study\web\13-vue\elem> cnpm install vue-awesome-swiper --save然后在main.js中引用并使用import VueAwesomeSwiper from 'vue-awesome-swiper'import 'sw...原创 2019-06-12 09:09:36 · 3217 阅读 · 0 评论