Vue项目笔记

项目开始

目录划分

• assets

  • image
  • css
    • normalize.css
    • base.css

• components

  • common -- 通用组件，与项目无关，别的项目也可以直接使用
  • content -- 公共组件，业务相关

• views -- 页面视图

• router

  • index.js

• store -- Vuex状态管理

• network

• common -- 公共的js文件

  • const.js
  • utils.js

css初始化

normalize.css

git 获取，初始化样式。第三方支持

base.css

自定义的全局样式

// 在 APP.vue 中引用
<style>
	@import './assets/css/base.css';
</style>

// base.css 文件
// :root 获取根元素
:root {
	// 定义变量 在css代码中通过 font-size: var(--font-size) 使用
	--color-text: #666;
    --color-tint: #ff8198; // 背景颜色
	--font-size: 14px;
}

// less sass 学习

配置路径别名

vue-cli2 在webpack的base.config.js中配置

vue-cli3 需要在根目录创建 vue.config.js 文件, 脚手架自动和公共配置合并

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '@': 'src', // 默认已经配置
                'assets': '@/assets',
                'common': '@/common',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views'
            }
        }
    }
}

.editorconfig 对前端开发的风格做统一约束 也添加到根目录下

业务开发

• 首先从项目的模块化开始

• 注意组件的抽取，分别。

吸顶效果

.dom{
    position: sticky; 
	top: 100px;
    background-color: #fff
}


// better-scoll

图片相关

注意用​ :key 来避免vue的复用算法造成的页面没有渲染的问题。​

数据处理

const arr = ['01','02','03','04'];
const total = ['a','b','c'];
// arr 与 total 合并
total.push(...arr);

flex布局

// 子元素需要有固定宽度
.goods_item {
    width: 48%; // 做适配
}
// 父元素
.goods {
    display: flex;
    flex-wrap; wrap; 
    justify-content: space-around;
    padding:2px; // 可以通过数据绑定，计算得出。
}