In a previous article: Semantic Element UI and the UI if conflict
We have seen a semantic ui element ui and does not conflict, so, if you can add two UI components on their sites, the more choices they can also reduce a work of UI. Since the element ui project during initialization is used, not in the description introduction step, then if the existing project, add semantic ui component of it?
ready
The first step: Submit your project code, so no installation is good, his own project and then mess ~
Step two: find semant ui official website: https://semantic-ui.com/introduction/getting-started.html
Installation Semantic UI
Of course the above obtained ha ~ nonsense, specifically incorporated see the following steps:
I project uses Vue: 2.4.2, node: v8.11.4
- Installation node.js
- Install Gulp： npm install -g gulp
- Install sementic ui:
npm install semantic-ui --save， failed to install
cd semantic/
gulp build
When installing sementic ui, using npm looks like there will be some small problems, this time you can delete node_modules, then there are problems too package.json module delete and re-add, try several times, specific solutions can be found
to install semantic ui an error
Successful installation friends ~
After then execute
cd Semantic /
GULP Build
Application of Semantic UI project
semantic been successfully installed, then we introduced in the project, use, how to view the results.
Here I used the global references, adding main.js in:
import '../semantic/dist/semantic.js'
import '../semantic/dist/semantic.css'
Then, casually looking for an interface using semantic ui component to see results like, for example, this time to add a button:
<button class="ui button">按钮 </button>
Screen display (Key button in the lower right corner):
Contrast official website provides button style:
Well, we're done, since you can use it with semantic ui and element ui ~
