vue中引用vant,附带样式

1、首先 npm install babel-plugin-import 和 npm install vant 2、样式在项目中的  .babelrc 文件下 ["import", {"libraryName": "vant","libraryDirectory": "es","style": true}, "vant"]]  //vant样式引用 3、在main.js中 import { Button } from 'vant'   //引用vant组件库中可用组件 Vue.use(Button )  注册组件即可。 from:https://www.cnblogs.com/1rookie/p/12660684.html

移动端手写签名插件 vue

第一步

  第二步 main.js

  vue

  from:https://blog.csdn.net/XLL20001022/article/details/101548655

vue项目打包后css背景图路径不对的问题

问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了,显示不出背景图。如下两张图对比 图一:使用npm run dev命令访问   图二:使用npm run build命令打包之后,访问dist目录下的文件,出现的问题,背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg,而实际在dist目录下,图片路径是这样的,如下图   解决办法: 解决办法为:只需要在build/utils.js文件中添加如下一行代码即可。

添加位置为如下图:   然后重新执行 npm run build 命令,即可成功显示图片   from:https://www.cnblogs.com/libo0125ok/p/9361038.html

npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置

备注:<=> 意为等价于; 1、npm install <=> npm i --save   <=> -S --save-dev  <=> -D npm run start <=> npm start  // 对应"scripts"里的"start"命令 少敲几下键盘,何乐而不为 2、npm i --save-dev  <packname>   工程构建(开发时、“打包”时)依赖 ;例:xxx-cli , less-loader , babel-loader… 3、npm i --save <packname>  项目(运行时、发布到生产环境时)依赖;例:antd , element,react… 4、对应关系如下(至于我们啥时候用--save、啥时候用--save-dev 感觉是个规范问题,用反了项目一样可以跑起来(对于安装依赖正确时),但会给其他看你项目的人带来误解、可能会导致一些bug的出现,还有一些配置的错乱等) 5、使用 npm i 安装package.json里的依赖时,两部分的包都会pull下来 5-1、使用 --prod、 npm i --prod <=> npm i --production  // 仅会拉取dependencies中的依赖 5-2、设置NODE_DEV=production时            // 效果同上,仅会拉取dependencies中的依赖 (注意等号两边没空格) 5-2-1、命令行设置(注意不同环境时的"分割符") window => cmd :set NODE_ENV=production && xxxx mac      => shell  : NODE_ENV=production 空格 xxxx 5-2-2、package.json=>script命令中设置 彩蛋:在新建package.json文件时,我们可以使用npm init -y 快速创建(yes 表示一路默认创建,还有 -f 表示 force)   from:https://blog.csdn.net/jwl_willon/article/details/81054978

vue 安装遇到权限问题 解决

解决方案: npm config set user 0 npm config set unsafe-perm true   报错: Unable to save binary /var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor/linux-x64-64 : { Error: EACCES: permission denied, mkdir '/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor' at Object.mkdirSync (fs.js:753:3) at sync (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/mkdirp/index.js:71:13) at Function.sync (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/mkdirp/index.js:77:24) at checkAndDownloadBinary (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/scripts/install.js:114:11) at Object.<anonymous> (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/scripts/install.js:157:1) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) errno: -13, syscall: 'mkdir', code: 'EACCES', path: '/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor' } > node-sass@4.11.0 postinstall /var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass > node scripts/build.js ———————————————— 版权声明:本文为CSDN博主「T&amp;K」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/sinat_41780498/article/details/88737365

Vue watch 中 this 注意事项

在watch中使用this要注意,不能用箭头函数,否则会出错,例如:

  箭头函数要改为function的形式,如下:

    from:https://blog.csdn.net/liubangbo/article/details/115242420

html直接引用vue和element-ui的方法

代码如下所示:

效果如图: 总结 到此这篇关于html直接引用vue和element-ui的方法的文章就介绍到这了,更多相关html引用vue和element-ui内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!   from:https://www.jb51.net/web/743299.html

说说 vue 父子组件加载顺序

面试提问:说说 vue 父子组件加载顺序 这我知道答案 父 beforeCreate 父 created 父 beforeMount 子 beforeCreate 子 created 子 beforeMount 子 mounted 父 mounted 子组件若有 props 的话更新顺序是四步,若无的话两步不触发父亲的钩子。 父 beforeUpdate 子 beforeUpdate 子 updated 父 updated 父组件更新顺序是 父 beforeUpdate 子 deactivated 父 updated 销毁过程是 父 beforeDestroy 子 beforeDestroy 子 destroyed 父 destroyed 再问,如果有多个子组件呢?我不太能确定。 加载多个子元素 回头写了一个简单的vue视图,父调用子,以下代码复制可用。

  控制台打印结果如下

  能得出结论,第一个子元素在 beforeMount 后不会直接 mounted,而是进入下一个子元素的 beforCreate。   from:https://www.cnblogs.com/everlose/p/12538472.html

npm ERR! Unexpected end of JSON input while parsing near

You are trying to create a new angular, react, vue app, and you end up with an error message saying: npm ERR! Unexpected end of JSON input while parsing near There’s a high chance that your npm cache been damaged. Try:

  If you are a windows user, try deleting all files in this folder:

  Then…

  If that doesn’t work, try updating to the lastest (understand the risks)

  I hope this helps!   from:https://dev.to/rishiabee/npm-err-unexpected-end-of-json-input-while-parsing-near-743

Vue 魔法师 —— 将 API “类化”

前言 【类】和【接口】是 JavaScript 未来的方向,我们的 API 调用也将如此,朝着这个方向和业务模块同步分类、同步升级。本文讲的正是 —— Vue 魔法师,如何将 API “类化”? 万物皆模块,万物可归类。闲言少叙,直接正题。 分类 API 环境: Vue2+ 或 Vue3+ 咱这里直接 VueCLI 迅速快捷构建

得到如下目录

  然后新建文件 api.js 如下,

  基础类 API 我们先创建一个基础类如下:

  baseUrl:设置请求根路径; resource:来源; getUrl:获取链接函数,包含 baseUrl、resource、id; handleErrors:处理错误函数; 只读类 API 然后,我们再创建一个子类:包含 fetch、get 只读方法。

  fetch:获取数据; get:通过 id 获取数据; 写入类 API 接着,我们再创建一个包含可读写方法的子类:post、put、delete

  post:创建数据; put:更新数据; delete:删除数据; 继承 让我们看看两个简单的继承示例:

 

  【UsersApiService 类】继承了只读类 API —— ReadOnlyApiService,可以使用 fetch、get 两种方法。而 【PostsApiService 类】继承了读写类 API —— ModelApiService,可以使用 fetch、get、post、put、delete 五种方法。 我们也可以根据业务来写继承 API 类:

  导出 我们在 api.js 导出这些 API:

  分类 API 实践 在 Vue 项目中如何调用以上的 API 类?我们主要在 Vuex 和 components 中调用它: storePlugins 先创建一个 storePlugins.js:

  在 storePlugins.js 中引入 api.js:

  在 src/store/index.js 中引入该插件:

  mixins 创建 mixins.js 在如下位置:

  mixin.js:

  main.js 全局引入 mixins:

  调用 OK!现在你就可以在 store 和 components 中调用了,例如:

  示例 可本地调试~ components 中

  store 中

  结语 为什么要这么写? 本瓜以为:如果你的业务是按照这种类的方式有作区分,那么 API 也应该同步如此。一是思路清晰,跟着业务走;二是扩展性和复用性都更好;三是看起来就很高级……😀😀😀 普通

 

  高级

 

  本次就到这里,我是掘金安东尼,人不狠,话也多!公众号【掘金安东尼】。 点赞小手动一动,你我一起向前冲~ 再会~ 作者:掘金安东尼 链接:https://juejin.cn/post/6920422878500519950 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。