记录下开发中遇到的低级错误，如template和background-color，css样式行尾加了分号
[ 2022-05-11 21:38:57 | 作者: admin ]
p.s. 这些拼写造成的问题，很难检查出来，调试过程浪费时间，手写代码容易手误，还是要多利用工具的自动提示功能。
1、组件不显示，检测到怀疑人生
最后发现是模板单词 template 误写成了 templete
2、一个vant组件背景色样式background-color始终无法自定义
检查了几遍官方文档，查csdn和cnblog，还去查了百毒就是没有头绪
无意中再加个 background 居然就成功改色了，想想不能够，仔细看了下原来是单词错误
background-color 写成了 backgroud-color
难怪浏览器调试里出现backgroud-color是未知属性（unknown property value），怎么也不会想到这么熟悉的单词能写错。
...
阅读全文…
1、组件不显示，检测到怀疑人生
最后发现是模板单词 template 误写成了 templete
2、一个vant组件背景色样式background-color始终无法自定义
检查了几遍官方文档，查csdn和cnblog，还去查了百毒就是没有头绪
无意中再加个 background 居然就成功改色了，想想不能够，仔细看了下原来是单词错误
background-color 写成了 backgroud-color
难怪浏览器调试里出现backgroud-color是未知属性（unknown property value），怎么也不会想到这么熟悉的单词能写错。
...
阅读全文…
Vue报错：Mixed spaces and tabs no-mixed-spaces-and-tabs 解决办法
[ 2022-05-11 17:20:12 | 作者: admin ]
package.json的eslintrcr配置项rules里，手动添加’no-mixed-spaces-and-tabs’，然后定义为0，关闭规则
“no-mixed-spaces-and-tabs”:0
vue3下面使用axios，涉及到的跨域问题2种解决方案
[ 2022-05-11 10:48:39 | 作者: admin ]
开发环境中因为使用node+vue调试，一般都会有跨域问题，前端放在node下 http://localhost:8080 ，而接口放在 http://localhost:2020/myapi。
浏览器不允许跨域访问，报Access-Control-Allow-Origin限制。
解决方法一
利用vue提供的反向代理，配置vue.config.js
阅读全文…
浏览器不允许跨域访问，报Access-Control-Allow-Origin限制。
解决方法一
利用vue提供的反向代理，配置vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer : {
proxy : {
'/proxyapi' : { //这里/proxyapi做识别用，url重写时会替换为空。同样axios的base_rul也需要配置为/proxyapi
target : 'http://localhost:2020',
...module.exports = defineConfig({
transpileDependencies: true,
devServer : {
proxy : {
'/proxyapi' : { //这里/proxyapi做识别用，url重写时会替换为空。同样axios的base_rul也需要配置为/proxyapi
target : 'http://localhost:2020',
阅读全文…
Vue3使用axios的教程
[ 2022-05-10 15:58:46 | 作者: admin ]
axios中文网站：axios-http.com/zh/
阅读全文…
vue3创建的项目中使用vant UI组件库toast轻提示
[ 2022-05-10 15:02:57 | 作者: admin ]
PS：在使用过程中发现个小细节，在main.js中use的时候写的是Toast（大写的），在组件中this.$Toast ( ) 是 获 取 不 到 的 ，得小写的this.$toast()
从vant中引入Toast，再createApp().use(Toast)，这是在项目中main.js内的代码，是全局引入的方式
文档中是直接使用
阅读全文…
从vant中引入Toast，再createApp().use(Toast)，这是在项目中main.js内的代码，是全局引入的方式
文档中是直接使用
Toast("弹出对话框"); //组件中提示错误
而在实际项目中，全局引入之后，在组件中直接使用Toast()是会报undefined的，找度娘帮忙之后发现，vue3里面是需要this.来获取的，即this.$toast(“弹出对话框”); //注意小写
...阅读全文…
Vue3 (@Vue/cli) 项目修改项目名的方法，目的就是重建 node_modules
[ 2022-05-09 16:32:30 | 作者: admin ]
一、直接修改目录名
1.删除 node_modules 文件夹
2.修改项目名称(项目文件夹名称)，并在package.json中修改对应的name
3.重新安装依赖 npm install
4.启动项目 npm run serve
二、新建一个项目，然后复制老的项目文件到新文件夹
1、vue create 新文件夹
2、cd 新文件夹 ，然后安装依赖的组件，如 vant、babel、less
3、把老的项目文件夹下的所有文件（除了node_modules），都复制到新项目文件夹下，并在package.json中修改对应的name
4、启动项目 npm run serve
1.删除 node_modules 文件夹
2.修改项目名称(项目文件夹名称)，并在package.json中修改对应的name
3.重新安装依赖 npm install
4.启动项目 npm run serve
二、新建一个项目，然后复制老的项目文件到新文件夹
1、vue create 新文件夹
2、cd 新文件夹 ，然后安装依赖的组件，如 vant、babel、less
3、把老的项目文件夹下的所有文件（除了node_modules），都复制到新项目文件夹下，并在package.json中修改对应的name
4、启动项目 npm run serve
vue3中vant ui框架按需加载的配置方法
[ 2022-05-08 22:49:18 | 作者: admin ]
1、务必先下载安装vant组件，不要忘记
2、下载按需加载的插件babel
3、babel.config.js 中配置
4、main.js 文件中加载需要的vant组件成员[code][/code]...
阅读全文…
cnpm i vant -S
2、下载按需加载的插件babel
cnpm i babel-plugin-import -D
3、babel.config.js 中配置
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true
},
'vant'
]
]
}
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true
},
'vant'
]
]
}
4、main.js 文件中加载需要的vant组件成员[code][/code]...
阅读全文…
win7下面安装node.js、cnpm、vue3
[ 2022-05-08 16:02:17 | 作者: admin ]
一、win7下面安装 node.js
win7下面的node.js最高可以安装node.js 13，不过node13没有办法安装vue3，所以只能选择node12，
亲测可以安装node.js 12.22.8 https://nodejs.org/download/release/v12.22.8/
二、win7下面安装 vue3
阅读全文…
win7下面的node.js最高可以安装node.js 13，不过node13没有办法安装vue3，所以只能选择node12，
亲测可以安装node.js 12.22.8 https://nodejs.org/download/release/v12.22.8/
二、win7下面安装 vue3
npm install -g cnpm --registry=https://registry.npm.taobao.org //改为淘宝镜像 安装cnpm
cnpm install vue //安装vue
cnpm install -g @vue/cli //安装全局vue-cli脚手架 , vue3的脚手架
cnpm install -g webpack //若没有安装webpack，则先安装webpack
...cnpm install vue //安装vue
cnpm install -g @vue/cli //安装全局vue-cli脚手架 , vue3的脚手架
cnpm install -g webpack //若没有安装webpack，则先安装webpack
阅读全文…
