The project is developed based on Vue3.0, using View UI Plus (https://www.iviewui.com/view-ui-plus/guide/introduce), VForm3 (https://www.vform666.com/) and Element Plus (https://element-plus.gitee.io/zh-CN/) component.
The project structure is as follows:
project structure
The main.js file contains usage declarations for the relevant components:
import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
app.use(ViewUIPlus) //全局注册ViewUIPlus
import ElementPlus from 'element-plus' //引入element-plus库
import VForm3 from 'vform3-builds' //引入VForm3库
app.use(ElementPlus) //全局注册element-plus
import 'element-plus/dist/index.css' //引入element-plus样式
import 'vform3-builds/dist/designer.style.css' //引入VForm3样式
app.use(VForm3) //全局注册VForm3
app.mount('#app')
The components of View UI Plus and VForm3 are used in the App.vue file:
<template>
<div>
<Form :label-width="80" style="margin-top: 10px">
<FormItem label="名称">
<Input></Input>
</FormItem>
<FormItem label="备注">
<Input></Input>
</FormItem>
</Form>
<div>
<v-form-designer></v-form-designer>
</div>
</div>
</template>
<script>
export default {};
</script>
<style></style>
Since the VForm3 component only supports Element Plus, the project must introduce the Element Plus component. When the build is executed to package the project, chunk-vendors.js occupies a very large volume, which affects the page loading speed. For example, in the following packaging, chunk-vendors.js packaging occupies more than 3M.
chunk-vendors.js packaging
How can I remove the project's dependence on Element Plus? The project only depends on View UI Plus and VForm3.
There are two known solutions:
The open source community has released a vform version that supports iview design 4.x. You can consider downgrading the Vue used in the project to Vue2.0, and downgrading View UI Plus to iview design 4.x.
Modify the vform version that the open source community supports iview design 4.x to support Vue3.0 and View UI Plus
I wonder which of these two methods is better? Or do you have any new suggestions?
Related
I'm using Quasar in my VueJs project. When I use the quasar its sass or CSS files override my current design. So I just wanted to import only styles for those features that I use for example if I'm using a button in quasar so I should import the styles related to buttons only. I know this can be achieved with tree shaking but I don't know how to use that.
I used Quasar button in my main file
<q-btn flat style="color: #FF0080" label="Submit" />
And to get the desired result i need to use one of these in app.js file
import 'quasar/src/css/index.sass'
or
import 'quasar/dist/quasar.css'
But when i do so it overrides other styles as well in my project.
I am using Meteor with React and Semantic-ui-react. I needed a toast function so I wanted to change to Fomantic UI. Everything related is loaded by NPM.
I removed semantic-ui-css and added fomantic-ui-css.
I removed the
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" /> from the head.
I changed all import 'semantic-ui-css/semantic.min.css'; to import 'fomantic-ui-css/semantic.css';
When I try to execute a
$('body')
.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'bottom'
})
;
I get TypeError: $(...).toast is not a function
I can't find anything on it over various searches through SO and repository issues.
Thanks for any help you can give!!
Phil
You basically need to import the semantic.js file, which will add the functionality to your jquery instances:
import 'fomantic-ui-css/semantic.js'
import 'fomantic-ui-css/semantic.css'
However, there is no need to import the .min.* minified files, because Meteor will use a js and css minifier when you build your app for production / deployment later.
I am creating a multi-page application using ReactJS and I want different styles for different pages, especially the logo position.
This is my App.js file
import React from 'react';
import Login from './user/Login';
import Auth from './user/Auth';
import Home from './user/Home';
import ResetPassword from './user/ResetPassword';
import './App.css';
const App=()=>{
//ROUTING
}
export default App;
The last imported file always overwrites the styling properties of the entire app. I need to change the position of the logo in each page accordingly and also other things. How do I add different css properties for each page?
You can use or module css (for this you have to do changes in webpack).
https://programmingwithmosh.com/react/css-modules-react/
Also you can use package styled components https://www.styled-components.com/
In this case, you have unique styles for all components.
Create a folder structure as below. And import their own css files. If you are using sass use unique class names. For the 3rd party components, you may need using "!important" in the css files.
common/
Avatar.js
Avatar.css
feed/
index.js
Feed.js
Feed.css
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
and you can read this : https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
I am playing around with https://reactjs.net/ , and want to setup an application inside my existing ASP.NET MVC application.
I have made a couple of simple React applications using the "default installation template" inside Visual Studio, but not based on ReactJS.net and where the content is only a subpage.
However, if I take the tutorial template used as examples:
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
There are no importing React like: import * as React from 'react'; , which I am used to.
So my question is: why not? And when are you supposed to import React?
Because import React from 'react'; is required when you are trying to import npm packages. Reactjs.Net doesn't use npm dependency and you're required to put the CDNs in your view using <script src="">. Basically, you're importing React automatically when you use the CDNs
I want to publish a ui library using react. But I'm confuse about how to deal with styles.
For example, if I write code in a project.I will using webpack && babel to build my code, and it will create a *.css file.
import React from 'react';
import './index.less';
export default function() {
return (
<div>
123
</div>
)
}
But, if I just write react compoents, I will use babel to compile my code.There is not css-loader to deail with *.less file. And after compiling, there is requre('./index.less') in the code, but it can't find file. So if I still want to write my code like above, how can I to publish this comonents with *.css.
Have you looked into available options there are around styling components in React? Because there are a lot of options here and it comes down to what you prefer. Just a quick google search will give you many options.
My personal favorite package to use is the styled-components one.