项目思路
声明:本笔记内容是听完coderwhy的视频自行整理后的结果。
1. 划分目录结构(src)
-
assets资源(图片、css)
-
components(公共组件)>
common(不仅仅在当前项目里会用到的,完全共同)+content(业务相关公共组件) -
views(大的视图,如首页、分类、购物车等)>
home+category -
router(路由)
-
store(vuex)
-
network(网络相关)
-
common(公共js文件)>
const.js(公共常量)+ utils.js(公共方法)
css补充:
- :root 伪类->获取根元素html
- css定义变量 定义:–large-size:50px 使用:font-size:var(–large-size)
- tintColor整体背景颜色
项目文件补充:
- 路径别名:vuecli3中,在项目文件夹下创建vue.config.js文件
module.exports = {
configureWebpack: {
resolve: {
alias: {
'views': '@/views',
'components': '@/components',
'network': '@/network',
'common': '@/common',
'assets': '@/assets',
}
}
}
}
//router和store不用配置,因为可以this.$router获取
- 项目组统一风格文件:.editorconfig
2. 开发顺序
补充:
- dom里面使用别名需要src=“~assets/img/tabbar/category.svg” 在其前面加个波浪线~
- vue-router点击同一路由报错:调用方法时在后面加上.catch(err=>err)
- 整个项目里只有一个的组件,用id。其他用class。
- 网络请求时,首先,将网络请求单独封装request.js,然后每个组件的网络请求都单独封装一个js。
Home.vue就不用面向request.js开发,直接面向home.js开发。 - 不能直接监听组件的点击,如要监听组件的点击,需要
<back-top @click.native="backClick"/> //在click之后加上native修饰符
tabbar 补充:
- 写组件时,插槽内最好不要写属性,避免使用时属性被替换,建议在插槽外包一个div。
报错解决:
- 创建.vue文件,只要一写<template>标签,就在顶部报错
解决办法:打开vs code的settings,搜索"vetur.validation.template",把前面的勾去掉。