一、money記賬項目-Vue-項目搭建
1.利用@Vue/cli建立項目- vue create money（項目名稱可更改）
- cd money
- yarn serve
這個項目的完整配置：
這時候我們就基于Vue建立出來了一個項目
項目目錄說明：
在一個建立檔案中輸入：vbase+Tab可快速建立：
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
ts/js可通過 @/目錄名 引入檔案
css/scss可通過 [email protected]/目錄名 引入檔案
例如：
ts/js：
import Types from '../components/Moneys/Types.vue';
//引入需要自己計算路徑引入
import Types from '@/components/Moneys/Types.vue';
//@代表src目錄，不用計算路徑
css/scss：
@import "[email protected]/assets/style/helper.scss";
@import "[email protected]/assets/style/reset.scss";
//前面要加[email protected]
這都是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 自帶 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寫法：推薦：
<label>
<span>備注</span>
<input type="text">
</label>
不推薦：
<label for="xxx"></label>
<input id = 'xxx' type="text">
// reset.scss
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color:inherit;
}
// app.vue
@import "[email protected]/assets/style/reset.scss";
- 建立helper.scss檔案（儲存變量），把變量都放到 helper.css 裡面。helper.css 這個檔案隻能放變量，函數和 mixin,最終會消失的東西
- 在 google 搜尋 "fonts.css" ，直接複制代碼，變量聲明前面用$
- 然後在App.vue中引用
// helper.scss
- 選擇器裡面
.tags {
> .current {
}
}
- 選擇器本身
.tags {
&.current {
}
}
5. 按鈕字型樣式不會繼承
- 在reset.scss中加入
button, input{
font: inherit;
}
border-bottom: 1px solid;
padding: 0 4px;
- 父元素一定要用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;
}
box-shadow: inset 0 -5px 5px -5px fade_out(black, 0.5),
inset 0 5px 5px -5px fade_out(black, 0.5);
- 堅持一個檔案查過150行就執行子產品化
- 把html scss剪切的單獨.vue檔案，引入的時候寫
- 最後把相關檔案放到一個檔案夾