VUE之项目搭建流程（电商项目为例）--- 未完待续

1. 场景

你为什么使用vue做本项目？

• 项目组5个人，4个会vue，1个会react
• 本项目开发有你们公司开发，维护是客户自己的团队维护，客户团队技术栈是vue
• 老板说，听说现在很多人都在用vue，那我们也用

…

2. 创建项目

// 建议使用 cnpm，如果要使用npm，请使用淘宝镜像源
npm config set registry https://registry.npm.taobao.org

// vue-cli --- vue2 脚手架 --- webpack3
cnpm / npm i vue-cli -g
vue init webpack myapp

// @vue/cli --- 推荐使用 vue3/4脚手架 --- webpack4以上
cnpm / npm i @vue/cli -g
vue create myapp / vue ui

// 安装@vue/cli，但是先用vue-cli的语法，安装向下兼容插件
cnpm / npm i @vue/cli-init -g
vue init webpack myapp

3. 构建项目

3.1 src 目录结构如下

src
	- api  -  封装数据请求
	- assets  -  资源文件夹
	- components  -  自定义组件
	- filters  -  自定义过滤器
	- lib  -  scss库
	- mixins  -  混入
	- router  -  路由  ---   动态加载路由实现权限管理
	- store  -  状态管理器 --- 管理状态 - 善于利用辅助函数
	- views  -  页面
	- App.vue  -  主页面  -  单文件组件（结构+表现+行为）
	- main.js  -  入口文件  -  可以引入国际化（i18n）、全局操作
	
vue.config.js  -  vue项目配置文件 --- 根目录

3.2 更改主页面的页面结构

// App.vue

<template>
  <div id="app">
    <div class="box">
      <header class="header"></header>
        <div class="content"></div>
    </div>
      <footer class="footer">
        <ul>
          <li>
            <span class="iconfont icon-shouye"></span>
            <p>首页</p>
          </li>
          <li>
            <span class="iconfont icon-dianzan"></span>
            <p>分类</p>
          </li>
          <li>
            <span class="iconfont icon-caidan"></span>
            <p>购物车</p>
          </li>
          <li>
            <span class="iconfont icon-wode"></span>
            <p>我的</p>
          </li>
        </ul>
      </footer>
  </div>
</template>

<script>
</script>

<style lang="scss">
// 导入重置样式库的scss文件，其内部导入了别的scss文件
@import '@/lib/reset.scss';
// 如果企业有自己的scss库，使用企业自己的，没有可以选用这个
// 查看lib/class.scss文件，内含各个函数的使用
// 1rem 100px
html, body, #app {
  @include rect(100%, 100%); // width: 100%; height: 100%
}
#app {
  @include flexbox(); // display: flex;的兼容写法
  @include flex-direction(column); // flex-direction: column;的兼容写法
  .box {
    @include flex(); // flex: 1;的兼容写法
    @include rect(100%, auto);
    @include flex-direction(column);
    .header {
      @include rect(100%, 0.44rem);
      @include background-color(#f66);
    }
    .content {
      @include flex();
      @include rect(100%, auto);
    }
  }
  .footer{
    @include rect(100%, 0.5rem);
    @include background-color(#efefef);
    ul{
      @include rect(100%, 100%);
      @include flexbox();
      li {
        @include flex();
        // 内部元素水平垂直居中
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items();
        span {
          @include font-size(0.24rem);
        }
        p {
          @include color(#333);
          @include font-size(0.12rem);
        }
      }
    }
  }
}
</style>

3.3 提取各个页面

删除views下原有文件

创建 views/Home.vue、views/Kind.vue、views/Cart.vue、views/User.vue，以首页为例

<template>
  <div class="box">
    <header class="header">首页</header>
    <div class="content">首页</div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style lang="scss">
</style>

3.4 提取底部组件

components/Footer.vue

<footer class="footer">
      <ul>
        <li>
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </li>
        <li>
          <span class="iconfont icon-dianzan"></span>
          <p>分类</p>
        </li>
        <li>
          <span class="iconfont icon-caidan"></span>
          <p>购物车</p>
        </li>
        <li>
          <span class="iconfont icon-wode"></span>
          <p>我的</p>
        </li>
      </ul>
    </footer>

3.5 App.vue 配置多视图路由 — 命名视图

<template>
  <div id="app">
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

3.6 配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Footer from '@/components/Footer.vue'

Vue.use(VueRouter)
// 路由的懒加载
const routes = [
  {
    // 重定向
    path: '/',
    redirect: '/home'
  },
  {
    path: '/',
    name: 'home', // 命名路由，可以用于声明式导航传参
    components: {
      default: () => import('@/views/Home.vue'),
      footer: Footer
    }
  },
  {
    path: '/kind',
    name: 'kind', // 命名路由，可以用于声明式导航传参
    components: {
      default: () => import('@/views/Kind.vue'),
      footer: Footer
    }
  },
  {
    path: '/cart',
    name: 'cart', // 命名路由，可以用于声明式导航传参
    components: {
      default: () => import('@/views/Cart.vue'),
      footer: Footer
    }
  },
  {
    path: '/user',
    name: 'user', // 命名路由，可以用于声明式导航传参
    components: {
      default: () => import('@/views/User.vue'),
      footer: Footer
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.7 点击底部切换路由

// 以首页为例
<!-- router-link 默认被渲染为a标签，使用tag标签生成需要的标签 -->
<router-link to="/home" tag="li">
  <span class="iconfont icon-shouye"></span>
  <p>首页</p>
</router-link>