Vue-webpack-simple框架中的全局注册组件和本地注册组件

最新推荐文章于 2023-01-14 18:05:23 发布
最新推荐文章于 2023-01-14 18:05:23 发布
阅读量137 收藏
点赞数
分类专栏： # vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35653657/article/details/113851624
版权

目录结构

在这里插入图片描述

在components文件夹中创建一个.vue文件

在这里插入图片描述
注意:如果没有Vue Component选项,首先要去下载vue.js的插件
在这里插入图片描述
我在这里的栗子是创建了头部.vue,主体.vue,底部vue三个组件.
在这里插入图片描述

全局注册组件

在main全局注册

进入main.js,将其他默认的东西删除,然后全局注册
在这里插入图片描述

在App.vue中直接使用

删除默认的代码,然后直接使用
在这里插入图片描述

最终效果

进入项目根路径,进入cmd,启动
在这里插入图片描述
最终效果
在这里插入图片描述

本地注册组件

在App.vue中直接引入组件,然后再使用

在这里插入图片描述
最终效果与全局注册一样,但是就是只能在App.vue中使用,其他组件中不能使用.

Alan and fish
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-simple:订单系统vue2的简单实践
03-11
描述： 前端技术栈为vue全家桶（vuex + vue-router + vuelidate（简洁的校验库））+ webpack + fetch + bootstrap（初次接触vue并没有找类似元素之类的uiku）等，之前的技术栈spring-boot + mybatis + spring-mvc等，完成了一个10个页面的简单订单系统，前端模板vue官方提供的webpack模板（热部署，生产打包，单元测试等），主要完成了注册，登录，细化到按钮等级的权限控制，excel上传解析，表格查看展示等功能 前端 一个Vue.js + webpack项目 后端 项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:3333 npm run dev # build for production w
详解用vue-cli来搭建vue项目和webpack
12-12
vue init webpack-simple projectName 第三步：把文件切换到初始化的项目中 cd projectName 第四步：安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装，这样快很多 cnpm install 第五步：运行 npm run ...
使用 vue init webpack 或 vue init webpack-simple 创建vue工程后，使用ivew报错
wuww18stu的博客
04-15 722
使用 vue init webpack 或 vue init webpack-simple 创建vue工程后，使用ivew报错 安装iview npm install view-design --save 引入 ViewUI 一般在 webpack 入口页面 main.js 中如下配置： import Vue from 'vue'; import VueRouter from 'vue-rout...
初探 vue 插件开发
weixin_33738982的博客
09-18 114
开发一个 vue 插件，发布到npm并且，可以使用 npm 安装。 vue list 查看当前在线的模板信息步骤如下： 初始化项目 运行项目： npm install npm run dev 写插件在 src 文件夹下面建 lib 文件夹，用于存放插件。lib 文件夹下再建 toast.js 和 toast.vue 两个文件。整个项目目录如下所示： to...
webpack和webpack-simple中如何引入css文件
Tank_in_the_street的博客
06-06 5573
webpack和webpack-simple引入css样式文件
【Vue-CLI】Vue-CLI+webpack构建Vue项目
我的博客
11-09 4298
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli+实现的零配置原型开发。一个运行时依赖 ()，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面。Vue CLI 致力于将 Vue 生态中的工具基础标准化。
详解vue-router和vue-cli以及组件之间的传值
08-30
总结，Vue Router 负责页面路由，Vue CLI 提供了快速构建项目的框架，而组件间的通信则是 Vue.js 开发中的基础操作，通过 props、事件和第三方库可以灵活地处理组件间的数据流动。了解和熟练掌握这些知识对于开发 ...
安装vue-cli的简易过程
12-11
Vue CLI提供了多种模板，包括`webpack`、`webpack-simple`、`browserify`、`browserify-simple`和`simple`。其中，`webpack`是最常用的，因为它包含了完整的Webpack配置，适合复杂的项目开发。 在初始化过程中，Vue...
vue使用vue-cli快速创建工程
01-19
vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 -g代表全局安装。 i就是install的缩写。 其中webpack-simple代表模板的名称。vue-todos是...
在vue脚手架项目里面使用elementui
qq_35653657的博客
05-01 1065
1.通过脚手架创建一个项目 安装脚手架,点击链接 # 输入 npm run dev # 启动项目 ctrl+c 关闭服务 2.在vue脚手架项目中安装elementui 安装elementui依赖 npm i element-ui -S 使用elementui # 引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; # 在main.js中进行全局注册 Vue.use(Elem
defineProps、defineEmits、definExpose的用法
qq_35653657的博客
01-14 884
【代码】defineProps、defineEmits、definExpose的用法。
vue-webpack配置路由的方法
qq_35653657的博客
02-20 605
目录结构 前置条件 安装路由 vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目 录，输入下面命令。 npm install vue-router --save-dev 创建路由的vue组件 在view目录下创建一个需要路由的组件Login 安装路由 创建一个名为 src/router 的目录专门放置我们的路由配置代码，在 src/router 目录下创建一个名为 index.js 路由配置文件，代码如下： 配置路由 修改 main
SSM项目elementUi+pagination+paperhelper前后端分离实现数据分页
qq_35653657的博客
02-22 589
1.分页原理 任何的分页都是有五个部分组成: 记录的总条数 每页显示的记录条数 总页数 当前是第几页 当前页的所有记录 真假分页的区别 这个教程使用的是真分页 2.后端分页-pagehelper (1)我的后端代码目录结构 pagerhelper官方介绍 (2)第一步:引入pagerhelper依赖 版本锁定 <mapper.version>3.5.2</mapper.version> 依赖 <dependency> <groupId>c
vue-路由的使用方式
qq_35653657的博客
01-08 453
2.路由初试化 路由的三种模式: history, 指定路由的模式, 有,,三种模式,一般使用第一种和第三种模式路由的格式: 路由的使用代码: 创建路径,代码如下 代码截图: ,代码: 代码截图 代码: 5.页面跳转 一共有三种页面跳转方式,、、,后面两种跳转方式是无刷新跳转,代码如下: 6.不同页面的参数的传递和接收 方式1:通过地址栏传递参数 从页面传递参数到:代码: 代码: 方式2:通过路由动态传递参数 从页面传递参数到:页面代码 代码: 使用这种方式传递参数有一个缺陷就是不能直接访问list
Vue-父传子与子传父
qq_35653657的博客
02-18 324
目录结构 父传子 子传父 类似于将FCfn作为一个参数一样传递给给btnfn 子传父以事件发射的方式传递
Vuex的学习内容
qq_35653657的博客
01-12 226
在中定义state//创建数据仓库 export default createStore({//数据仓库的内容,名称不能乱写 state : {变量名 : 初始值 } })//创建数据仓库 export default createStore({//数据仓库的内容,名称不能乱写 state : {name : '马云' , company : '阿里巴巴' } })import {
使用vue-cli脚手架创建一个webpack-simple的vue框架项目
qq_35653657的博客
02-18 226
第一步:进入工程目录,打开cmd 第二步:选择你要创建的vue框架 输入vue list 第三步:创建一个webpack-simple的vue框架 创建框架结构 选择相关的配置 导入依赖 打开node.js服务器 部署成功
vue的抽离封装
qq_35653657的博客
01-11 223
vue3中的任何一个组合式的api都可以单独抽离出去在另一个文件中,最后只需要回归到setup()中即可.
vue-webpack 优化
最新发布
05-31
针对vue-webpack的优化，可以从以下几个方面入手： 1. 开启tree shaking：在webpack.config.js文件中开启optimization属性，设置为minimize: true和usedExports: true，可以在构建时去除未使用的模块，减小打包体积。 2. 开启gzip压缩：可以使用compression-webpack-plugin插件，将打包后的文件进行gzip压缩，减小文件大小，提高加载速度。 3. 使用CDN加速：将一些常用的库通过CDN加载，可以减小打包文件大小，加快加载速度。可以使用webpack-cdn-plugin插件实现。 4. 使用多线程构建：可以使用thread-loader和happy-pack插件，将loader和插件的执行分配到多个子进程中去执行，提高构建速度。 5. 按需加载：使用Vue Router的懒加载功能，将页面和组件按需加载，减小首页加载时间，提高用户体验。 6. 优化图片：使用url-loader和file-loader将小图片转换成base64编码，减少请求次数，提高加载速度。对于大图片，可以使用image-webpack-loader进行压缩。 以上是一些常见的vue-webpack优化方法，可以根据项目需求选择适合的优化策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值