vue-cli搭建移动端项目

项目开发

1. 搭建项目框架

1. 脚手架vue-cli生成

vue create mobile-xiongmao-app

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

2. 按模块创建目录结构

   mobile-xiongmao-app
       -|src
          -|main.js   //程序入口
          -|permission.js // 全局导航守卫,统一登录身认证
          -|App.vue   // 根页面
          -|views     //页面
          -|compontents  //通用组件
          -|Layout   //页面布局 
          -|api  //网络接口
          -|assets
              -|images  //图片
              -|styles  //样式
          -|utils  //工具
          -|router   //路由
             -|index.js
          -|store    //vuex存储
             -|modules
             -|getters.js
             -|index.js 
          -|common
          -|fonticon
               
       package.json
       vue.config.js
   

3. 封装公共模块代码

   utils
      request.js 网络请求工具模块
   api
      user.js 网络接口模块
      product.js
      categery.js
   compontents
      共公组件
   assets
      styles
         公共样式
   main.js
      引入公共UI组件