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

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的文件内容为

// 模板模块<template><div>hello word</div></template>// 逻辑模块<script></script>// 款式模块<style scoped></styple>

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

// 引入页面文件import HelloWorld from './views/hello-world/index.vue'// 配置路由文件export default new Router({  mode: 'hash',  base: process.env.BASE_URL,  routes: [    {      path: '/hello-world',      name: 'device',      component: HelloWorld    }  ]})

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

<template>    <div>        <img src=".././img/hello.png" />        <p>hello word</p>    </div></template>

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

// 模板模块<template>    <div>        <HelloComponent/>        <img src=".././img/hello.png" />        <p>hello word</p>    </div></template>// 引入组件<script>import HelloComponent from '@/components/HelloComponent.vue'export default {    // 在页面注册组件    compoents: {        HelloComponent    }}</script>

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

/*** 申请列子*/export const example = params => http.g(  `${apiHeader}/examle`,  params)

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