(tips:这是主要步骤哈,写的比较简略,将复杂的东西简化为3大步)
1.安装node https://nodejs.org/en/download/
2.查看npm版本 npm -v
3.安装vue-cli => npm i vue-cli -g
在你搭建好vue环境后,接下来就是创建自己的项目
1.vue init webpack 项目名
2.安装依赖
3.npm run dev
4.配置sass
1 npm install node-sass --save-dev
2 npm install sass-loader --save-dev
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /.sass$/,
loaders: [‘style’, ‘css’, ‘sass’]
}
5.vs code 配置vue 模板文件 https://www.jianshu.com/p/34a5a4193892
6.重置样式
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:none; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
在main.js中引入//引入重置样式表
import ‘@/assets/css/reset.css’(自己也可以在网上搜唷)
1.https://www.iconfont.cn 打开网站选择自己需要的图标添加至项目
2.复制在线链接 在css 文件中 创建 iconfont.css文件
@font-face {
font-family: ‘iconfont’; /* project id 1043051 */
src: url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.eot’);
src: url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.eot?#iefix’) format(‘embedded-opentype’),
url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.woff2’) format(‘woff2’),
url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.woff’) format(‘woff’),
url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.ttf’) format(‘truetype’),
url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.svg#iconfont’) format(‘svg’);
}
i{
font-style: normal;
font-family: ‘iconfont’
}
.iconfont{
font-family:“iconfont” !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
3.在main.js中 引入
import ‘@/assets/css/iconfonts.css’
路由中 router下 index.js定义相关组件
import Vue from ‘vue’
import Router from ‘vue-router’
import Home from ‘@/view/home/Index’
import Find from ‘@/view/find/Find’
import Around from ‘@/view/around/Around’
import Aboutus from '@/view/aboutus/Aboutus’
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Find',
name: 'Find',
component: Find
},
{
path: '/Around',
name: 'Around',
component: Around
},
{
path: '/Aboutus',
name: 'Aboutus',
component: Aboutus
}
]
})
在导航组件中写逻辑
<template>
<div class="wrapper">
<ul class="nav container">
<li :class="{'on':$route.name == 'Home'}"><router-link to="/">首页</router-link></li>
<li :class="{'on':$route.name == 'Find'}"><router-link to="find"> 发现</router-link></li>
<li :class="{'on':$route.name == 'Aboutus'}"><router-link to="Aboutus">我的</router-link></li>
<li :class="{'on':$route.name == 'Around'}"><router-link to="Around">周边</router-link></li>
</ul>
</div>
</template>
<script>
export default { components:{},
props:{},
data(){
return { } },
watch:{},
computed:{},
methods:{},
created(){},
mounted(){}
}
</script>
<style lang="scss" scoped>
.wrapper{
.on{ background: #ff6600 }
.nav{
display: flex;
justify-content: space-around;
background: gray;
li{
width: 100%;
border:1px solid red;
text-align: center;
a{
display: inline-block;
width: 100%;
}
}
}
}
</style>
由于时间关系,后续补上 vuex 、axios、等方面的个人总结,希望能和大家共同进步!!
文章浏览阅读1w次,点赞4次,收藏12次。Android file类使用详解-SDcard_sdcard_print_file
文章浏览阅读1.2w次,点赞7次,收藏63次。用CMake来组织的工程中要用Qt首先要设置、找到Qt相关模块。主要是通过find_package这个CMake命令。但网上很多教程都过时了,或者不够清晰灵活。因为这部分很常用,所以特别用一篇文章把我们目前在生产环境中使用的方法给大家介绍下。设置Qt库路径Qt版本很多,我们的开发机上一般也装有多个不同版本的Qt。个人尝试性的项目一般用最新版的Qt,而真正发布的产品一般用的是LTS版本Qt(LTS:Long Term Support,长期支持版本,目前最新的LTS是5.9)。我们的方法是在系统中添_cmake测试代码中能定义qt类吗
文章浏览阅读2.2k次,点赞4次,收藏5次。Linux环境编译DCMTK源码,生成动态库文件和可执行文件_dicom动态库
文章浏览阅读416次。ERROR 1290 (HY000): The MySQL server is running with the –secure-file-priv option so it cannot execute this statement.对于上述错误,相信对于第一次执行 MySQL 数据导出操作的同学大都会遇见。至于为什么会遇到这个错误,原因很简单,那就是:我们不知道 MySQL 默认的_mysql 导出select 数据 --secure-file-priv
文章浏览阅读854次,点赞20次,收藏17次。状态压缩动态规划,就是我们俗称的状压DP,是利用计算机二进制的性质来描述状态的一种DP方式。一只小老鼠要把它们都吃掉,问至少要跑多少距离?输出一行一个实数,表示要跑的最少距离,保留。第一行有一个整数,表示奶酪的数量。行,每行两个实数,第。对于全部的测试点,保证。,两点之间的距离公式为。_p1433状态dp
文章浏览阅读5.8k次,点赞28次,收藏37次。编辑环境变量的path内容不展开问题自己在修改环境变量时将%…开头的变量上移到了顶部,而系统默认的则是以C:\...开头的环境变量。如下所示:将红色框内的环境变量后移置C:\...之后,点击确定后再打开path内容就可以展开了。开头的环境变量向后移,以。_系统变量path点击编辑不展开怎么办
文章浏览阅读1.2k次。Android系统默认的ProgressBar往往都不能满足实际开发需要,一般都会开发者自定义ProgressBar,一般有三种思路来完成。_android mprogress_horizontal
文章浏览阅读1.2w次。[b][size=medium]zookeeper的身份认证有4种方式[/size][/b](1)world: 它下面只有一个id, 叫anyone, world:anyone代表任何人,zookeeper中对所有人有权限的结点就是属于world:anyone的 (2)auth: 它不需要id, 只要是通过authentication的user都有权限(zookeeper支持通过ker..._zookeeper 权限信息放哪里
文章浏览阅读8.7k次,点赞2次,收藏8次。SpringMVC——核心技术:异常处理(@ExceptionHandler、@ControllerAdvice)_spring @exceptionhandler message
文章浏览阅读3.6k次。实验五 文件系统1 实验简介本实验要求在模拟的I/O系统之上开发一个简单的文件系统。用户通过create, open, read等命令与文件系统交互。文件系统把磁盘视为顺序编号的逻辑块序列,逻辑块的编号为0至L − 1。2 I/O系统实际物理磁盘的结构是多维的:有柱面、磁头、扇区等概念。I/O系统的任务是隐藏磁盘的结构细节,把磁盘以逻辑块的面目呈现给文件系统。逻辑块顺序编号,编号取值范围为..._i/o磁盘实验报告
文章浏览阅读1.8k次。目录1-数仓dwd事实层介绍2-数仓dwd层事实表设计原则3-数仓dwd层事实表设计规范4-建表示例1-数仓dwd事实层介绍明细粒度事实层以业务过程驱动建模,基于每个具体的业务过程特点,构建最细粒度的明细层事实表。您可以结合企业的数据使用特点,将明细事实表的某些重要维度属性字段做适当冗余,即宽表化处理。公共汇总粒度事实层(DWS)和明细粒度事实层(DWD)的事实表作为数据仓库维度建模的核心,需紧绕业务过程来设计。通过获取描述业务过程的度量来描述业务过程,包括引用的维度和与业务过程有关的度量。度量通常为_dwd层如何设计
文章浏览阅读1.5k次。一、前言很多小伙伴也都知道,最近一直在做 Ambari 集成自定义服务的教学笔记和视频。之前在准备 Ambari 环境的时候,考虑到有朋友会在 Ambari 安装部署时遇到问题,所以贴心的我呢,就在搭建 Ambari 环境的时候,把这个视频录制好了,总共时长共 87 分钟,将近1个半小时,附带移除 SmartSense 服务及 FAQ 。也提前介绍一下搭建好的 Ambari 相关版本信息:..._ambari2.7.3 hadoop 部署