这里主要说一下项目的结构和技术架构,方便我们快速上手开发1.项目架构[1]项目技术架构本项目主要使用vue+webpack+vant项目主要用vue初始化-cli3脚手架,然后根据项目需求进行结构调整vuejs特性vuejs体积小学习成本低可快速提交开发效率vuejs生态完善webpack特性模块化按需加载丰富插件丰富配置vant特性提供60多个高优质组件,覆盖各种移动场景性能优秀,平均组件大小小于1kb(min+gzip)单元测试覆盖率90%+,提供稳定性保障完善的中英文文档和示例支持Vue2&Vue3支持导入按需支持主题定制支持国际化支持TypeScript支持SSR[2]项目结构│.browserslistrc│.editorconfig│.eslintrc.js//eslint配置文件│.gitignore//gitcommit忽略配置│babel.config.js//babel配置文件│package-lock.json//依赖缓存文件│package.json//包配置文件│postcss.config.js//postcss独立配置文件│README.md//描述文件│vue.config.js//webpack相关配置文件├──public//static资源文件├──plugins//插件集合└─src├─api│├──http.js//api请求文件,每一个api请求都在这里│├──instance.js//api请求通用入口,给你可以统一处理请求├─assets//资源文件夹│├─lang//多语言文件夹│├─bus//全局vue总线│├─components//通用组件库│├─router.js//路由文件│├─store.js//商店相关│├─App.vue//程序入口vue文件│├─main.js//程序入口文件│├─utils//相关工具的方法集合│└─views//页面文件[3]示例:helloword如何添加一个helloword页面?第一步:在views文件夹下新建一个hello-world文件夹,然后在hello-world文件夹下新建index.vueindex.vue文件内容为第二步:创建好页面文件后,我们需要配置router.js路由文件中hello-world页面的路由第三步:我想在hello-world页面添加一张图片。管理?我们可以把我们的图片资源放到assets目录下,然后用相对路径导入。示例:导入名为hello.png的图片第四步:想使用公共组件库中的组件怎么办?我们可以在components目录下引入要用到的组件例子:第五步:如果我们需要接口数据,可以在api文件夹下的http.js中添加我们的接口第六步:在浏览器hello中输入localhost:8080/#/-world你可以看到我们的hellopage
