VUE3@clli组件样式、全局组件、配置打包

组件样式：
<style scoped lang="less">

注册全局组件
import {createApp} from 'vue'

const app = createApp({})

app.componet(组件名，选项定义)

<template><div><h2>自定义组件</h2><p>{{ name }}</p><button @click="change">修改name</button><comp-b></comp-b></div>
</template><script>export default{data(){return{name:"huit"}},methods:{change(){this.name="juju"}}}
</script>
//这里所写的样式，默认是全局样式
//如何设置样式只针对当前组件scoped
<style scoped="scoped" lang="less">// 在外面编写独立的less文件，然后引进来// @import './componets.less'div{// 给div添加一个样式边框border: 1px solid green;h2{color:red;}p{background: blue;}}
</style>

全局组件：

main.js

import { createApp } from 'vue'
import App from './App.vue'
// import CompB from './components/CompB.vue'
import CompB from '@/components/CompB.vue'
// @相当于/src
// createApp(App).mount('#app')
const app=createApp(App)
//注册全局组件
app.component('CompB',CompB)app.mount('#app')

这样任意地方都可以引用组件CompB.vue文件。

重启服务器：

ctrl+c先停掉服务器，然后输入y

再次执行，就重新启动了：npm run serve

项目的配置文件和项目打包：

脚手架配置文件

Vue.config.js 是Vue脚手架@vue/cli的全局配置文件，是一个可选的配置文件，如果不在则使用默认的配置
，如果项目的根目录中存在这样一个文件，则项目运行时会自动加载。

项目打包
切换到项目的根目录，执行npm run build对项目进行打包构建操作，打包后生成的文件在项目的根目录下的dist文件夹中。

配置文件：vue.config.js

//导出内部的配置项
module.exports = {//这表示在测试服务器就是'http://localhost:8888/'，打包之后就是'http://localhost:8888//shop/'publicPath:process.env.NODE_ENV==='production' ? '/shop/' : '/',//项目访问基础url// publicPath:'/',//开发服务器的配置devServer:{port:8888,}
}

项目上线的时候需要把项目打包成静态资源。

输入命令：npm run build

检查一下：运行

运行没有问题！！！！！！！！！！

VUE3@clli组件样式、全局组件、配置打包相关推荐

Vue3（撩课学院）笔记02-创建组件，全局组件，局部组件，父子组件，组件标签化，组件的data数据共享，组件间通讯，props，父传子$ref，子传父$parent
1.创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上 &l ...
vue 循环递归组件_全局组件实现递归树，避免循环引用
概述目录分类展示会通常要用到树形结构.本例结合vue的父子组件,采用递归渲染,实现一个基于树的curd小demo 知识点父子组件递归渲染 class 样式对象写法,CSS伪元素 ::before ...
组件基础-全局组件//全局组件的简写
组件基础-全局组件 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
vue脚手架的安装、生命周期、文件导入格式、局部组件和全局组件、动态添加属性和方法、插槽、传值
----------------------------------- DOS命令进入dos: win+r 切换盘符: d: 查看: dir 打开文件夹: cd 文件夹的名字返回上一级目录 ...
Vue组件之全局组件与局部组件
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
VueJS组件之全局组件与局部组件
全局组件所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
引入antd组件样式_antd组件样式局部加载，用react-app-rewired插件应该怎么配置？...
package.json配置: { "name": "hawerblog", "version": "0.1.0", & ...
微信小程序五 npm 包、安装 vant组件、promise组件、全局数据共享、分包！！！、自定义 tabBar 案例
总结能够知道如何安装和配置 vant-weapp 组件库参考 Vant 的官方文档能够知道如何使用 MobX 实现全局数据共享安装包.创建 Store.参考官方文档进行使用能够知道如何对小程 ...
微信小程序3（WXSS模板样式和全局局部配置）
WXSS模板样式 WXSS模板样式-rpx rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位实现原理' 鉴于不同设备的屏幕大小不同,为了实现屏幕的自动适配,rp ...
vue 组件全局组件和局部组件component
1.全局组件 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...

VUE3@clli组件样式、全局组件、配置打包

VUE3@clli组件样式、全局组件、配置打包相关推荐

最新文章

热门文章