vue项目总结

项目总结

1.搭建项目

1.创建项目 vue create 项目名称
1.1创建手动选择

• babel:将es6转化为es5
• typescript: es的超级 (和Java像）
• progressive Web App (PwA) Support: 缓存很多东西，有推送通知
• Router: 路由
• vuex:
• css pre-processors：css预处理器
• linter / formatter: 代码规范
• util testing :单元测试
• e2e testing : 集成测试

1.2选择项目（）最简单

• bable

1.3选择（第一个）

2.新项目划分目录结构

• assets(资源)
  • img(图片)
  • css(css)
• components
  • common（公共组件，多个项目共同组件）
  • content（与业务相关的内容）
• views（视图）
  • home(主页)
  • category
  • …
• router(路由)
• store（状态管理）
• network（网络相关）
• common（公共js）
  • mixin.js
  • utils.js
  • const.js

2.1 引用两个CSS文件，放入当下位置

2.2在vue.config.js 下起别名，可让后期补位路径烦恼。

module.exports={
  configureWebpack:{
    resolve:{
      alias:{
        'assets':'@/assets',
        'common':'@/common',
        'components':'@/components',
        'network':'@/network',
        'views':'@/views'
      }
    }
  }
}

2.3 从vue-cli 2.x中复制 .editorconfig
2.4项目的模块划分，tarbar -->路由映射关系

2.获取数据

2.1函数调用
函数调用 ->压入函数栈（保存函数调用过程中的所有变量）
函数调用结束 ->弹出函数栈（释放函数所有的变量）