基于[email protected]的移动webapp项目搭建

基于[email protected]的移动webapp项目搭建

1. 执行vue create app-name创建一个项目

2. 进入到项目目录，如果没有安装router，就执行npm install vue-router -S安装vue-router并写入依赖

3. 清除无用的文件，让src目录保持最简单的一个main.js和App.vue即可

4. 创建一个名为views的目录, 在里面分别创建Home.vue,Mall.vue,Cart.vue,Mine.vue这四个页面级的视图组件

5. 创建一个名为router的目录，分别创建index.js和routes.js

   // src/router/routes.js
      
   // 非页面级别的组件，一般不需要做成异步组件
   import SqFooter from '@/components/SqFooter'
   // 以下为页面级别的组件，需要做成异步组件
   const Home = () => import('@/views/Home')
   const Mall = () => import('@/views/Mall')
   const Cart = () => import('@/views/Cart')
   const Mine = () => import('@/views/Mine')
   // 导出的配置项
   export default [
     // 根目录访问，直接重定向到/home
     {
       path: '/',
       redirect: '/home',
       meta: {
         isTabItem: false // 由于tabbar的数据和routes的数据是共享的，但是又不是全部的routes数据，所以需要加一个标记来确定该路由是否需要显示在tabbar
       }
     },
     // 首页的组件和路由
     {
       path: '/home', // 访问的路径
       name: 'home', // 路由的名字
       components: {
         default: Home, // 默认的router-view
         footer: SqFooter // 带有name="footer"属性的router-view
       },
       meta: {
         isTabItem: true, 
         title: '首页', // 用于显示在tabbar上的文字
         icon: '' // tabbar的icon，注意这里unicode,渲染的时候需要使用v-html，而不是插值表达式
       }
     },
     {
       path: '/mall',
       name: 'mall',
       components: {
         default: Mall,
         footer: SqFooter
       },
       meta: {
         isTabItem: true,
         title: '商城',
         icon: ''
       }
     },
     {
       path: '/cart',
       name: 'cart',
       components: {
         default: Cart,
         footer: SqFooter
       },
       meta: {
         isTabItem: true,
         title: '购物车',
         icon: ''
       }
     },
     {
       path: '/mine',
       name: 'mine',
       components: {
         default: Mine,
         footer: SqFooter
       },
       meta: {
         isTabItem: true,
         title: '我的',
         icon: ''
       }
     }
   ]
   

   // src/router/index.js
   import Vue from 'vue'
   import VueRouter from 'vue-router'
      
   import routes from './routes'
      
   Vue.use(VueRouter)
      
   export default new VueRouter({
     routes
   })
   

6. 开始你的布局。在App.vue里，把头部、主体和底部的布局先写好, 样式什么样，就自已定, 注意在写布局的时候，最好加入css-reset

7. 下一步可以在头部直接加入一个组件，在主体部分加入router-view， 在底部也加一个带有命名的router-view

接下来就是实际业务逻辑的开发，以及后面还要讲的一些ajax的配置和vuex状态管理