vue-cli4创建项目的思路

项目思路

---

声明：本笔记内容是听完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"，把前面的勾去掉。