这里次要讲下我的项目的构造和技术架构，不便咱们疾速开始开发
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 页面了