VueCli3.x小白入门-组件CSS样式

米修在线 2023-01-13 01:57:08

课时名称	课时知识点
VueCli3.x小白入门-组件CSS样式	VueCli3.x小白入门-组件CSS样式

...全文

149 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

【资源介绍】课程设计基于Vue+Echart框智实现的慧城市大屏可视化系统源码+项目说明(含后台管理系统源码).tar 一、项目描述 - 一个基于 Vue、Datav、Echart 框架的 " **智慧城市大屏可视化项目** "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。 - 项目需要全屏展示（按 F11）。 - 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 **按需引入**。 - 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。 - 项目环境：Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题，请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16 或者 Node16.x。 - 请拉取 main 分支的代码，其余分支是开发分支。二、主要文件介绍 | 文件 | 作用/功能 | | ------------------- | --------------------------------------------------------------------- | | main.js | 主目录文件，引入 Echart/DataV 等文件 | | utils | 工具函数与 mixins 函数等 | | views/ index.vue | 项目主结构 | | views/其余文件 | 界面各个区域组件（按照位置来命名） | | assets | 静态资源目录，放置 logo 与背景图片 | | assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节 | | assets / index.scss | Index 界面的 CSS 文件 | | components/echart | 所有 echart 图表（按照位置来命名） | | common/... | 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改） | ## 三、使用介绍 ### 启动项目 `pnpm install` `pnpm run serve` ### 封装组件渲染图表所有的 ECharts 图表都是基于 `common/echart/index.vue` 封装组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了防抖函数来控制更新频率，节约浏览器性能。项目配置了默认的 ECharts 图表样式，文件地址：`common/echart/theme.json`。封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，也适用于小白学习入门进阶。当然也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或者热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。欢迎下载，沟通交流，互相学习，共同进步！

一、VueCli3.x小白入门-组件嵌套 1、父组件、子组件父组件App.vue,在跟组件中使用子组件。全局组件在main.js中进行注册，直接在main.js中进行组件引入就创建了全局组件局部组件如下：调用过程1、引入组件 2、注册组件 3、使用组件遍历对象，绑定key值 <template> <div id="app"> ...

一、VueCli3.x小白入门-组件CSS样式使用scoped属性，设置局部样式二、嵌套多个组件 demo 页面效果

1、VueCli3.x小白入门-安装脚手架工作中很少使用cdn的形式开发，一般都使用脚手架开发（1）安装node.js 参考网址https://nodejs.org/zh-cn/，下载当前发布版进行安装安装完成后执行 node -v npm -v npmjs.com有各式各样的插件脚手架的好处： 1、脚手架可以大大的提高开发效率； 2、可使用最主流的ecmascri...

vue-admin-template是在码云平台（gitee.com）上，搜索vue admin关键字，出来的结果中，相对说明算是比较多的开源代码，既有Demo的演示网站（https://panjiachen.gitee.io/vue-admin-template），也有系列教程帖子，不过作为一个仅在vue官网（https://cn.vuejs.org/）粗看了一遍教程的Vue小白，在下载了源码之后，即便是对照着admin的手把手系列教程，还是看的一头雾水，里面有太多的基础概念缺失，最终在慕课网，学习了vu

吴海洋的课程社区_NO_1

46

社区成员

229

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章