vue引入link_Vue实战项目-money记账器

最新推荐文章于 2024-05-17 09:54:47 发布

weixin_39782394

最新推荐文章于 2024-05-17 09:54:47 发布

阅读量440

点赞数

文章标签： vue引入link

一、money记账项目-Vue-项目搭建

1.利用@Vue/cli创建项目

vue create money（项目名称可更改）
cd money
yarn serve

这个项目的完整配置：

这时候我们就基于Vue创建出来了一个项目

项目目录说明：

插件推荐（vscode）：Vetur、VSCode Snippets（其他快捷键看插件说明）

在一个新建文件中输入：vbase+Tab可快速创建：

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

import alias：

ts/js可通过 @/目录名引入文件

css/scss可通过 ~@/目录名引入文件

例如：

ts/js：

import Types from '../components/Moneys/Types.vue';
//引入需要自己计算路径引入
import Types from '@/components/Moneys/Types.vue';
//@代表src目录，不用计算路径

css/scss：

@import "~@/assets/style/helper.scss";
@import "~@/assets/style/reset.scss";
//前面要加~@

这都是Vue配置好的，我们不需要自己配置

二、money记账项目-Vue-导航栏

先确定页面的url

#money 记账

#labels 标签

#statistics 统计

默认进入首页Money页面

添加一个404页面

在views中创建4个页面

在router.ts中配置路由

const routes:  = [
  {
    path: '/',
   redirect:'/money'
  },
  {
    path:'/money',
    component:Money
  },
  {
    path: '/labels',
    component: Labels
  },
  {
    path:'/statistics',
    component: Statistics
  },
  {
    path:'*',//*表示除了上面的路径，其他的全是404页面
    component:NotFound
  }
]

在app.vue设置路径和占位符

<router-link to="/money" >记账</router-link>
<router-link to="/labels" >标签</router-link>
<router-link to="/statistics" >统计</router-link>
<router-view />

这时候我们可以通过不同的路径来访问不同的页面了。但是我们有4个页面，并不是所有页面都需要这个导航栏Nav的，404页面就不需要导航栏。所以把导航栏Nav写在app组件中不妥，要把导航栏Nav组件做成全局组件，哪个页面需要，哪个页面就自己引用

在components中创建组件Nav

<template>
<div>
    <div id="nav">
        <router-link to="/money" 记账</router-link>
        <router-link to="/labels" 标签</router-link>
        <router-link to="/statistics" 统计</router-link>
    </div>
</div>
</template>

在main.ts中将其做成全局组件

import Nav from '@/components/Nav.vue'

Vue.component("Nav",Nav)

哪个页面需要直接引入<Nav />即可

这时候我们Money页面，Labels页面，Statistics页面里面有差不多相同的代码：

Money页面为例：

<div>
   <div >
      money
   </div>
   <Nav />
</div>

这时候就要想我与重复不共戴天，

所以我们需要在components再新建一个页面Layout：

<div>
   <div >
      <slot />//占位插槽
   </div>
   <Nav />
</div>

只需在三个页面中引入Layout组件，然后把内容传入插槽即可：

<Layout>
    <p>money</p>
</Layout>

引入Icon图标（svg-sprite-loader）

1.在Iconfont-阿里巴巴矢量图标库中寻找图标，下载为svg格式。

2.在assets中创建一个文件夹icon，把图标放进去（svg其实就是一个xml）

3.在Nav组件中引入图标：import x from ‘@assets/icon/label.svg’

这是会有报错，下面标有红线，这是我们根据报错搜索：typescript svg cannot find module

第一个就是复制代码

declare module "*.svg" {
  const content: any;
  export default content;
}

放入shims-vue.d.ts文件即可

4.将x打印出来，是一个路径，这不是我们想要的，我们想得到一个svg use的使用方法，这时候我们需要一个loader（svg-sprite-loader)

5.安装loader：yarn add --dev svg-sprite-loader

6.进行配置，在vue.config.js里面

const

7.组件引用：创建Icon组件：

8.Nav组件页面引用：

下面是css，自己做就可以了

9.更新meta viewport

public>index.html:

svg中的一个注意点：svg 自带 fill 问题

通过Vue（active-class="selected"）可以使选中的导航栏变色，但是svg文件里面path标签如果有fill属性（fill="red"),那么svg标签默认就是红色，不会因为Vue（active-class="selected"）变色，这时候我们需要加上一个loader（svgo-loader），写在loader（svg-sprite-loader)后面即可，当然要先安装loader：yarn add --dev svgo-loader

然后进行配置，在vue.config.js里面：

/* eslint-disable */

三、money记账项目-Vue-Money.vue组件

在Money.vue组件中写html+css，常规写法在写html+css中需要注意和学习的东西：

1.input,label写法：

5. 按钮字体样式不会继承

在reset.scss中加入

button, input{
  font: inherit;
}

6.字的下划线比字长

border-bottom: 1px solid;
padding: 0 4px;

7. 如果用了float

父元素一定要用clearfix

.clearfix::after{
  content:'';
  display: block;
  clear:both;
}

用scss的%,placeholder占位功能

// helper.scss
%clearfix{  //clearfix就是一个占位符,后面谁用他，谁就把他替换了
  &::after{
    content: '';
    clear: both;
    display: block;
  }
}
// 如何用
// money.vue
.buttons {
  @extend %clearfix;
}


//后面buttons调用他了，就相当于
buttons::after{
    content: '';
    clear: both;
    display: block;
}

8. 两层内阴影的写法

box-shadow: inset 0 -5px 5px -5px fade_out(black, 0.5),
inset 0 5px 5px -5px fade_out(black, 0.5);

9.模块化

坚持一个文件查过150行就执行模块化
把html scss剪切的单独.vue文件，引入的时候写
最后把相关文件放到一个文件夹

weixin_39782394

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue引入link_Vue实战项目-money记账器

一、money记账项目-Vue-项目搭建1.利用@Vue/cli创建项目vue create money（项目名称可更改）cd moneyyarn serve这个项目的完整配置：这时候我们就基于Vue创建出来了一个项目项目目录说明：插件推荐（vscode）：Vetur、VSCode Snippets（其他快捷键看插件说明）在一个新建文件中输入：vbase+Tab可快速创建：<template...
复制链接

扫一扫