vue实战开发

vue开发推荐使用

组件库

工具库 ⭐️

  • axios：基于Promise的网络请求库，在浏览器端使用XMLHttpRequests与服务器的交互，处理网络请求与响应。
  • scss：css预处理器
  • 其他：loadsh、moment、day.js、bignumber.js/number-precision

项目规范

github提交文本规范

1
2
//例如
feat: complete homepage v0.1

vue踩坑

element-plus icon的坑

描述：官网没有提供使用的方法，图标不显示，解决方案如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//引入图标库
import * as ElIconModules from "@element-plus/icons-vue";

//vue实例
const app = createApp(App);

const transElIconName = (iconName) => {
  return "i" + iconName.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
};

//全局注册element plus图标库
for (let iconName in ElIconModules) {
  app.component(transElIconName(iconName), ElIconModules[iconName]);
}

element input框重写focus时的样式

描述：官方提供的默认主题如何修改的问题，比如：input框focus时的样式修改，目前的解决方法只是针对一个官方提供组件的内部样式的修改。后续会去研究一下如何全局覆盖新的主题，解决方案如下

1
2
3
4
5
6
7
8
9
10
11
12
/*首先先找element库中有没有提供样式的修改方案，比如el-menu就有*/

/*但是el-input没有就需要自己找到官方写好的样式手动更改，注意设置css作用域，不然就全局都的其他用到该组件的地方就会一起修改*/

/*修改input focus时的样式，改变 box-shadow*/
.el-input__wrapper {

}

.el-input__wrapper.is-focus{
    
}

动态引入图片后路径报错的问题

描述如下

1
<img :src="`../assets/blogPhotos/${name}.jpg`" alt="" />

img

解决方案

  • 在src下创建工具类,将以下函数放入
  • 然后引入后在模板中或者ref中使用
1
2
3
4
5
6
7
8
9
//src/util/pub-use.js
// 获取assets静态资源 
const getAssetsFile = (url: string) => { 
    return new URL(`../assets/images/${url}`, import.meta.url).href 
}
export { getAssetsFile }
//setup下
import { getAssetsFile } from "../../utils/pub-use.js";
<img :src="getAssetsFile('/home/home_icon.png')" />

自动导入的插件（import）

描述：引入自动import依赖包 or 引入自动import组件的依赖包(组件名必须和文件名一致才能自动import，否则失败)

1
2
3
npm install -D unplugin-vue-components unplugin-auto-import
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";

按需自动导入element组件库的插件

vite-config.js配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//...import
//引入自动import依赖包
import AutoImport from "unplugin-auto-import/vite";
//引入自动import组件(组件名必须和文件名一致才能自动import，否则失败)
import Components from "unplugin-vue-components/vite";
//element解析器
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  //注册全局插件
  plugins: [
    //...,
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});