你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

vue3——咸鱼仔

作者：你好赵伟 | 2024-02-18 12:22:48

踩

vue3——咸鱼仔

vue3——咸鱼仔

vue3——咸鱼仔

https://www.bilibili.com/video/BV1pq4y1c7oy/?p=7&spm_id_from=pageDriver&vd_source=15af266292056c5d92fb6aa45ac9c1d0

P1.前言【00:45】

P2.创建项目【02:09】

在这里插入图片描述

我的版本都有了,不需要安装

在这里插入图片描述

P3.代码格式化【01:37】

在这里插入图片描述

存在冲突, 新增两句话

在这里插入图片描述
‘indent’: 0,
‘space-before-function-paren’: 0

P4.commit规范【01:57】

P5.强制commit 【02:41】

P6.强制代码规范【01:03】

P7.按需导入elementplus 【02:58】https://element-plus.gitee.io/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8

https://element-plus.gitee.io/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8
在这里插入图片描述

在这里插入图片描述
npm install -D unplugin-vue-components unplugin-auto-import

再将上面的安装命令执行一遍

在这里插入图片描述

官网文档 cli.vuejs.org/zh/guide/webpack.html?#简单的配置方式

https://cli.vuejs.org/zh/guide/webpack.html?#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
在这里插入图片描述

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}
1
2
3
4
5
6
7
8

在这里插入图片描述

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

// module.exports = {
//   // ...
//   plugins: [
//     AutoImport({
//       resolvers: [ElementPlusResolver()],
//     }),
//     Components({
//       resolvers: [ElementPlusResolver()],
//     }),
//   ],
// }

// // vue.config.js
// module.exports = {
//   configureWebpack: {
//     plugins: [
//       new MyAwesomeWebpackPlugin()
//     ]
//   }
// }

module.exports = {
  configureWebpack:config => {
    config.plugins.push(AutoImport({
      resolvers:[ElementPlusResolver()],
    }))
    config.plugins.push(Components({
      resolvers:[ElementPlusResolver()],
    }))
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

测试 button

在这里插入图片描述

P8.vue3.2新特性【01:42】

新手推荐：关闭eslint语法检测，在.eslintrc.js文件中，注释掉 eslint:recommended。如图：

vue3 zyt推荐

在这里插入图片描述

https://blog.csdn.net/weixin_40157997/article/details/126993940
当项目并不存在build文件夹，即不属于vue脚手架工程，那请到根目录下 config文件夹下的index.js文件，将useEslint属性设置为false。

在这里插入图片描述

根标签目录下面包裹

css可以直接绑定 JS 变量

P9.初始化项目【02:47】

在这里插入图片描述

导入界面

在这里插入图片描述

vue 3 使用 setup

在这里插入图片描述

P10.登录页面静态【04:59】

格式化文档

在这里插入图片描述

表单

在这里插入图片描述

图标

在这里插入图片描述

样式 scss

在这里插入图片描述

按钮

在这里插入图片描述

P11.svg-icon 【07:48】

element-plus 报错

在这里插入图片描述

导入 icon

在这里插入图片描述

svgIcon 创建组件

在这里插入图片描述

https://blog.csdn.net/jiang_ziY/article/details/123953930

props 属性中定义数据
语法1 (数组)

props : [ ‘数据名1’ , ‘数据名2’ ]
语法2 (对象)
props : { 数据名: { 属性 …}}
对象语法定义数据时的三个可选属性
type : 数据类型(可选值 String / Array… 等)
default : 父组件不传值时的默认值
required : true 或 flase ( true 表示父组件必需传值)
在这里插入图片描述