安装 Vue-cli3
这一节针对 vue-cli 3 的设置。如果你已经熟悉 vue-cli 3了,可以跳过直接去看添加 UIkit 的部分。
如果你还在使用 vue-cli 2.0,首先需要卸载它。然后安装 vue-cli 3.0 。
安装 vue-cli 3.0
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看版本号:
vue --version
新建项目
cd
到你要创建项目的文件夹,然后:
vue ui
开启 vue-cli 3.0 的 GUI。它非常棒。
使用 Create 按钮新建项目。使用 Import 按钮导入已有项目。
现在可以选择你需要的功能,然后它们会自动安装并设置。Cli 3 magic ✨
我选择了所有的,除了 typescript。
等待 vue-cli 完成项目设置。
添加 UiKit
在 Dependencies
部分,点击右上角的按钮添加新的依赖。
搜索并选择 uikit
好了,现在安装好了 Uikit。
编辑 App.vue
编辑 src/App.vue
。必须添加 script
。
<script>
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
export default {
name: 'App',
};
</script>>
<style lang="less">
@import "../node_modules/uikit/src/less/uikit.less";
</style>
你的 src/App.js
应该类似这样:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<script>
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
export default {
name: 'App',
};
</script>>
<style lang="less">
@import "../node_modules/uikit/src/less/uikit.less";
</style>
编辑 HelloWorld.vue
替换src/components/HelloWorld.vue
中的 template标签。
我这里是从 UIkit 网站上复制的导航栏模板。https://getuikit.com/docs/nav...
<template>
<div class="hello">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</nav>
</div>
</template>
你的 src/components/HelloWorld.vue
文件现在应该类似这样。另外,删除 style
标签中的所有内容。
<template>
<div class="hello">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</nav>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
你可以删除style
标签里的内容,如果需要的话。我这里暂且留着它。
开启开发服务器
yarn serve
# or
npm run serve
你将看到类似这样的画面:
图中的 Home | About 和 Vue Logo 来自于 src/views/Home.vue
文件。
如果能看到 Uikit 的导航栏,说明你已经成功了。
添加 UiKit 样式
你大概注意到了,我们的开发页面上的样式并不和 Uikit 网站上的 demo 一样。我们来修改它。
打开 Uikit 网站的 Github 仓库: https://github.com/uikit/uiki...
在 less
文件夹下有两个文件,是我们说需要的。
在你的项目的 src/assets
文件夹中,创建三个新的文件夹。
cd src/assets
mkdir fonts images less
复制 highlight.less
和 theme.less
到 less
文件夹中。
cd less
wget https://raw.githubusercontent.com/uikit/uikit-site/develop/less/highlight.less
wget https://raw.githubusercontent.com/uikit/uikit-site/develop/less/theme.less
需要对theme.less
进行一些修改。
修改第一行 @import "../assets/uikit/src/less/uikit.theme.less
为:
@import "../../../node_modules/uikit/src/less/uikit.theme.less";
修改第二行
@import "highlight.less";
# to
@import "./highlight.less";
在theme.less
下面,还有一些引入的字体。获取它们:
cd ../fonts
UK="https://getuikit.com"
wget $UK/fonts/ProximaNova-Light-webfont.woff2
wget $UK/fonts/ProximaNova-Light-webfont.woff
wget $UK/fonts/ProximaNova-Reg-webfont.woff2
wget $UK/fonts/ProximaNova-Reg-webfont.woff
wget $UK/fonts/ProximaNova-Sbold-webfont.woff2
wget $UK/fonts/ProximaNova-Sbold-webfont.woff
wget $UK/fonts/montserrat-600.woff2
wget $UK/fonts/montserrat-600.woff
wget $UK/fonts/roboto-mono-regular.woff2
wget $UK/fonts/roboto-mono-regular.woff
theme.less
再往下,还有一行:
url("../images/section-background.svg")
同样,我们也获取它:
cd ../images
UK="https://getuikit.com"
wget $UK/images/section-background.svg
搞定!~
我们完成了所有设置。只需修改 App.js
中的样式部分引入我们的新文件。
<style lang="less">
@import "../node_modules/uikit/src/less/uikit.less";
@import "./assets/less/theme.less";
</style>
重启开发服务器。样式变得和 Uikit 网站上一样了:
注意:我把导航栏替换成了表格和一些其他组件。还移除了 vue 文件里自动生成的样式。
结论
你可以找到我的 Github 仓库,它是按此教程的流程创建的:https://github.com/zeroby0/vu...
DEMO 在这里:https://vue3-uikit.netlify.com/
?