Uikit with VueJS — Vue cli 3

安装 Vue-cli3这一节针对 vue-cli 3 的设置。如果你已经熟悉 vue-cli 3了，可以跳过直接去看添加 UIkit 的部分。如果你还在使用 vue-cli 2.0，首先需要卸载它。然后安装 vue-cli 3.0 。安装 vue-cli 3.0npm install -g @vue/cli# ORyarn 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# ornpm 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/assetsmkdir fonts images less复制 highlight.less 和 theme.less 到 less文件夹中。cd lesswget https://raw.githubusercontent.com/uikit/uikit-site/develop/less/highlight.lesswget 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 ../fontsUK=“https://getuikit.com"wget $UK/fonts/ProximaNova-Light-webfont.woff2wget $UK/fonts/ProximaNova-Light-webfont.woffwget $UK/fonts/ProximaNova-Reg-webfont.woff2wget $UK/fonts/ProximaNova-Reg-webfont.woffwget $UK/fonts/ProximaNova-Sbold-webfont.woff2wget $UK/fonts/ProximaNova-Sbold-webfont.woffwget $UK/fonts/montserrat-600.woff2wget $UK/fonts/montserrat-600.woffwget $UK/fonts/roboto-mono-regular.woff2wget $UK/fonts/roboto-mono-regular.wofftheme.less再往下，还有一行：url(”../images/section-background.svg”)同样，我们也获取它：cd ../imagesUK=“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/????