(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、等方面的个人总结,希望能和大家共同进步!!
文章浏览阅读1.5w次,点赞35次,收藏385次。自己在网上找的开源项目,比较好分享给大家热门开源项目(包含小四轴、智能手环、光立方、智能车、防丢器等项目)号外!号外!(搞四轴,有这套就足够了!)科研级别的小四轴STM32F4芯片支持WIFI且android手机控制自适应控制就是牛掰!该飞机面向有科研和强烈学习意向的小伙伴们使用,如果只是想玩的话你肯定不会喜欢这套四轴的,主要设计思想是提供一个高性能的控制和姿态算法验证平台,因此..._本科毕业设计拿别人的开源代码修改
文章浏览阅读1w次,点赞2次,收藏26次。QQ 1274510382Wechat JNZ_aming商业联盟 QQ群538250800技术搞事 QQ群599020441解决方案 QQ群152889761加入我们 QQ群649347320共享学习 QQ群674240731纪年科技aming网络安全 ,深度学习,嵌入式,机器强化,生物智能,生命科学。叮叮叮:产品已上线 —>关注 官方-微信公众号——济南纪年信息科技有限公司民生项目:商城加盟/娱乐交友/创业商圈/外包兼职开发-项目发布/安全项目:态势感.._ruoyi java17
文章浏览阅读9k次,点赞2次,收藏3次。 当利用Console口为交换机设置好IP地址信息并启用HTTP服务后,即可通过支持JAVA的Web浏览器访问交换机,并可通过Web通过浏览器修 改交换机的各种参数并对交换机进行管理。事实上,通过Web界面,可以对交换机的许多重要参数进行修改和设置,并可实时查看交换机的运行状态。不过在利用 Web浏览器访问交换机之前,应当确认已经做好以下准备工作:·在用于管理的计算机中安装T..._思科交换机2960s有web配置吗
文章浏览阅读2.5w次,点赞2次,收藏6次。报错信息: [2018-09-09 20:33:12] ERROR - file: tracker_proto.c, line: 48, server: 127.0.0.1:22122, response status 2 != 0 [2018-09-09 20:33:12] ERROR - file: tracker_proto.c, line: 48, server: 127.0.0.1:..._error - file: tracker_proto.c, line: 48, server: 172.17.0.1:22122, response
文章浏览阅读3.9k次。使用matplotlib显示图片(《深度学习入门:基于Python的理论与实现》实践笔记)一、安装matplotlib库二、导入matplotlib.pyplot库和matplotlib.image库里的imread函数三、实例:显示图片一、安装matplotlib库在命令行使用下面的命令即可:pip install matplotlib二、导入matplotlib.pyplot库和matplotlib.image库里的imread函数在程序开头使用:import matplotlib.pyp_matplotlib展示图片
文章浏览阅读1.2k次。基本信息 用户单位:某应用软件研发企业 用户规模:100人以上 组织过程水平:中等 CMMI评审等级:无 Subversion使用时间:1年 客户需求 由于公司每次向新客户提交软件的时候都需要派出一个小规模的团队到客户现场进行一段时间的软件定制和维护。此外,老客户系统的重大升级和功能扩展也需要一个小团队在客户现场进行一段时间的开发。因此,异地开发的配置管理就是一_开发去客户现场的案例
文章浏览阅读3.2k次。一定时宽的语音信号,其能量的大小随时间有明显的变化。清音段能量比浊音段小得多。短时过零数也可用于语音信号分析中,发浊音时,其语音能量约集中于3kHz以下,而发清音时,多数能量出现在较高频率上。可认为浊音时具有较低的平均过零数,而清音时具有较高的平均过零数,故对一短时语音段计算其短时平均能量及短时平均过零数,就可以区分其中的清音段和浊音段,从而可判别句中清、浊音转变时刻,声母韵母的分界以及无声与有声的分界。这在语音识别中有重要意义。自己编写的matlab代码,对一段语音,取帧长为240个点,计算其平均能_matlab求语音信号短时过零率的函数
默认情况下,在Ubuntu上,sudo组的成员被授予sudo访问权限。如果您希望新创建的用户具有管理权限,需要将将用户添加到sudo组。命令将向你询问一系列的问题。密码是必需的,其他字段都是可选的。最后,输入Y确认信息是否正确。执行完上述步骤后需要重启ssh服务,否则新创建的用户连接服务器时会出现。
文章浏览阅读1.7k次。组织战略是组织实施各级项目管理,包括项目组合管理、项目集管理和项目管理的基础。只有从组织战略的高度来思考,思考各个层次项目管理在组织中的位置,才能够理解各级项目管理在组织战略实施中的作用。同时战略管理也为项目管理提供了具体的目标和依据,各级项目管理都需要与组织的战略保持一致。..._项目组织的具体形态的是战略管理层
文章浏览阅读1k次。目录基本统计量色彩空间变换亮度变换函数白平衡图像过曝的评价指标多视影像因曝光条件不一而导致色彩差异,人眼可以快速区分影像质量,如何利用图像信息辅助算法判断影像优劣。基本统计量灰度均值方差梯度均值方差梯度幅值直方图图像熵p·log(p)色彩空间变换RGB转单通道灰度图像 mean = 225.7 stddev = 47.5mean = 158.5 stddev = 33.2转灰度梯度域gradMean = -0.0008297 / -0.000157461gr_图像颜色质量评价
文章浏览阅读1.4k次。Simpson's rule for numerical integrationZ = SIMPS(Y) computes an approximation of the integral of Y via the Simpson's method (with unit spacing). To compute the integral for spacing different from one..._matlab利用幸普生计算积分
文章浏览阅读1.2w次,点赞28次,收藏61次。Hugging face 资源很不错,可是国内下载速度很慢,动则GB的大模型,下载很容易超时,经常下载不成功。很是影响玩AI的信心。经过多次测试,终于搞定了下载,即使超时也可以继续下载。真正实现下载无忧!究竟如何实现?且看本文分解。_huggingface_hub