乐趣区

关于vue.js:智汀家庭云开发指南Web项目架构

这里次要讲下我的项目的构造和技术架构,不便咱们疾速开始开发

1. 我的项目架构

【1】我的项目技术架构

  • 本我的项目次要采纳 vue + webpack + vant
  • 我的项目次要用 vue-cli3 脚手架进行初始化,而后依据我的项目需要进行构造上的调整

vuejs 个性

  • vuejs 体积小
  • 学习成本低
  • 能疾速提交开发效率
  • vuejs 的生态欠缺

webpack 个性

  • 模块化
  • 按需加载
  • 丰盛的插件
  • 丰盛的配置

vant 个性

  • 提供 60 多个高质量组件,笼罩挪动端各类场景
  • 性能极佳,组件均匀体积不到 1kb(min+gzip)
  • 单元测试覆盖率 90%+,提供稳定性保障
  • 欠缺的中英文文档和示例
  • 反对 Vue 2 & Vue 3
  • 反对按需引入
  • 反对主题定制
  • 反对国际化
  • 反对 TypeScript
  • 反对 SSR

【2】我的项目构造

│  .browserslistrc 
│  .editorconfig
│  .eslintrc.js          // eslint 配置文件
│  .gitignore            // git 提交疏忽配置
│  babel.config.js       // babel 配置文件
│  package-lock.json     // 依赖缓存文件
│  package.json          // package 配置文件
│  postcss.config.js     // postcss 独立配置文件
│  README.md             // 阐明文件
│  vue.config.js         // webpack 相干配置文件
├──public                // 动态资源文件
├──plugins               // 插件汇合
└─src
├─api
│   ├──http.js       // api 申请文件,每个 api 申请都在这里
│   ├──instance.js   // api 申请总入口,在这里能够做申请的对立解决
├─assets             // 资源文件夹
│
├─lang               // 多语言文件夹
│
├─bus                // 全局 vue bus
│
├─components         // 通用组件库
│
├─router.js          // 路由文件
│
├─store.js           // store 相干
│
├─App.vue           // 程序入口 vue 文件
│
├─main.js           // 程序入口文件
│
├─utils              // 相干工具的办法汇合
│
└─views              // 页面文件

【3】示例:hello word

怎么增加一个 hello word 的页面?

步骤 1: 在 views 文件夹新建一个 hello-world 的文件夹,而后在 hello-world 文件夹下新建一个 index.vue 的文件,index.vue 的文件内容为

步骤 2: 建完页面文件后,咱们须要在 router.js 路由文件配置 hello-world 页面的路由

步骤 3: 我想在 hello-world 页面上增加一张图片怎么办?咱们能够把咱们的图片资源丢到 assets 目录下,而后用相对路径引入就能够了
例:要引入名为 hello.png 的图片

步骤 4: 我要用专用组件库的组件怎么办?咱们能够在 components 目录下引入要应用的组件
例:

步骤 5: 如果咱们须要接口数据,咱们能够在 api 文件夹下的 http.js 减少咱们的接口

步骤 6: 在浏览器输出 localhost:8080/#/hello-world 就能够看到咱们的 hello 页面了

退出移动版