- 博客(19)
- 收藏
- 关注
RSS订阅原创 关于样式穿透
* ::v-deep() vue3新增 css/less/sass通用样式穿透 *//* :deep() vue3新增 css/less/sass通用样式穿透 *//* ::v-deep css/less/sass通用样式穿透 *//* /deep/ css/less/sass通用样式穿透 */父组件选择器 >>> 子组件选择器 { 子组件样式 }::v-deep 子组件选择器 { 子组件样式 }::v-deep(子组件选择器){ 子组件样式 }/deep/ 子组件选择器 { 子组件样式 }
2023-06-29 16:55:12
105
1
原创 webpack基础用法
(4), 如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli。(4)在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。把a.js , b.js, 和 c.js中的代码打包到一起,写入x.js中。
2023-06-29 16:54:19
84
1
原创 vuex状态管理
4, 在main.js中导入store/index.js状态管理仓库, 帮把它添加到vue根组件中。2, 在/src目录下新建文件 /src/store/index.js 导入vuex。-- state在映射到计算属性中之后,当作计算属性来用 -->-- state在映射到计算属性中之后,当作计算属性来用 -->3, 在/src/store/index.js中创建管理仓库, 并导出。// 使用映射函数把状态数据state映射到计算属性中。// 使用映射函数把状态数据state映射到计算属性中。
2023-06-29 16:52:53
95
1
原创 vue中使用axios
3, 在任意组件中使用axios(添加$用于和组件内字段区分)2, 在组件的script标签中导入axios。2, 在main.js中导入并设置Vue原型。1, 在vue项目中下载安装axios模块。1, 在vue项目中下载安装axios模块。3, 在当前组件的函数发起ajax请求。局部使用(在某一个组件中用)全局使用(在任意组件中用)
2023-06-29 16:52:11
102
1
原创 vue项目配置代理
此文件基于vue脚手架5.0实现, 把以下代码替换项目中vue.config.js的内容, 修改代理target即可。// 在vue.config.js中的devServer.proxy字段设置代理服务器。// 这个文件是服务器的配置文件, 所以这个文件的修改需要重启项目生效。lintOnSave: true, // 在保存时校验格式。publicPath: '/', // 启动页地址。outputDir: 'dist', // 打包的目录。服务端设置的一些功能。
2023-06-29 16:51:28
44
1
原创 Vue 项目打包app
8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。
2023-06-29 16:45:13
97
1
原创 vue项目配置代理
此文件基于vue脚手架5.0实现, 把以下代码替换项目中vue.config.js的内容, 修改代理target即可。// 在vue.config.js中的devServer.proxy字段设置代理服务器。// 这个文件是服务器的配置文件, 所以这个文件的修改需要重启项目生效。lintOnSave: true, // 在保存时校验格式。publicPath: '/', // 启动页地址。outputDir: 'dist', // 打包的目录。服务端设置的一些功能。
2023-06-25 22:24:43
131
原创 vue单文件语法糖
语法糖: 语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。// 使用defineProps自定义属性,接收父组件传值, 新版本无需导入,直接用。// 从路由模块中导入路由组合式API函数, 调用函数即可获取路由数据。4, 在setup/语法糖中使用组件路由守卫。//在setup/语法糖中调用路由守卫。
2023-06-25 21:46:13
35
原创 vue3.x,4.x5.x脚手架搭建项目
参考文档: https://www.cnblogs.com/wisewrong/p/9740173.html。在vue/cli5.x之后, 项目搭建时,vue.config.js会自动创建, 结构如下。以上是vue/cli 3.x/4.x的写法, 手动创建vue.config.js。host: 'localhost', // 主页地址。publicPath:'/', // 启动页地址。outputDir: 'dist', // 打包的目录。publicPath: '/', // 启动页地址。
2023-06-25 21:45:41
56
原创 Vue 3 图片懒加载
3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可。2, 在main.js入口文件中引入图片懒加载模块。1, 安装图片懒加载模块。
2023-06-25 21:44:48
274
原创 下载安装vant组件库
官网:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/移动端组件库参考: https://www.jianshu.com/p/c3c671787d1d。在根目录的babel.config.js文件中添加plugins字段。最后, 在组件中直接复制官方文档中的组件代码即可显示。然后在组件中直接复制官方文档中的组件代码即可显示。导入所有组件: 在main.js中添加如下代码即可。在mian.js中按需导入需要用到的组件。按需导入组件(推荐)
2023-06-25 21:42:14
708
原创 vue1.x2.x脚手架搭建项目
4, vue3.x/4.x/5.x项目框架 vue create project-name 初始化 npm run serve 启动。src文件夹，是存储项目源代码的文件夹（类似express项目中的bin），所有前端的代码文件都存储在src中。static文件夹，是存储静态资源文件的静态文件夹(类似于express项目中的public)在vue项目根目录下，index.html就是项目的首页，其他文件是项目的各种配置文件。2,创建项目文件夹,并在这个文件夹下打开命令行。
2023-06-25 21:41:36
28
原创 less 和sass使用
2:使用Vscode 安装 Easy less 插件 写好less文件之后 ctrl +s 保存 就可以直接编译成css 文件 然后在html文件中引入即可。缺点:这种方式是在客户端把less文件编译成css文件,如果less文件体量比较大,会影响页面渲染速度。3.1全局安装 less npm i less -g。1:直接引入less文件,再引入js文件把less编译成css。官网:https://lesscss.com.cn/官网:https://www.sass.hk/
2023-06-25 21:41:15
41
原创 vite构建vue3项目
---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------
2023-06-25 21:41:02
184
原创 element UI 组件库
PC端组件库参考: https://www.jianshu.com/p/669d3e41dca6。element 官网 https://element.eleme.cn/#/zh-CN。在balbel.config.js文件中添加plugins字段。下载安装插件 babel-plugin-component。完整引入: 在main.js文件中引入如下三句代码。在main.js中按需导入需要的组件。在组件中直接使用组件标签即可。注意: 有几个特殊的使用如下。1, 下载安装组件库。
2023-06-25 21:40:39
123
原创 在 vite + create-vue + vue3 + ts 项目中使用element-plus步骤
1, 安装环境版本要求(此处环境): node: V18.12 npm: V8.12 cnpm: V9.0 yarn: V1.22.19 (或者用yarn安装依赖)2, 按需引入配置后,组件无需再手动引入,会在根目录生成components.d.ts文件,会在此文件中自动引入页面中使用到的组件。4, element-plus 官方在网络差的情况下, 会被路由定向到404页, 一般刷新几下即可恢复。3, icon图标组件组件单独下载安装@element-plus/icons-vue并引入。
2023-06-25 21:39:54
81
原创 vue-router、路由 及路由传值
前三种(url拼接传值,友好url传值,query对象传值)的方式,都会把数据拼接到url路径上,刷新页面不会丢失,但是由于url长度有限制(不同浏览器对url的长度限制不同),数据量不能太大。// < router - link :to = "'/main/'+msg" > 主页</router - link >// { path: "/main", component: MainCom,name:"吴亦凡"},// name:"吴亦凡",//命名路由可通过路由名跳转。
2023-05-30 17:19:29
144
1
原创 webpack安装
(4), 如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli。(4)在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。把a.js , b.js, 和 c.js中的代码打包到一起,写入x.js中。
2023-05-25 10:30:58
128
1
原创 前端技术概括
5.为其他的元素添加连接<img src="https://h5static.kuwo.cn/www/kw-www/img/logo.7bf8751.png" alt="">html标签是HTML文档的跟标签,包裹了HTML文档中所有的内容, lang 就是language的简称,就是语言的意思 en 表示英文 告诉浏览器这个网页是英文网页。meta是浏览器的元信息标签,内部包含了一些向浏览器提供的编码规则,charset就是字符集的意思,uft-8叫做万国码,作用就是使浏览器支持多国语言编码。
2023-04-02 20:27:14
33
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人