vue项目创建流程

A 创建项目

1vue create app

2选择：babel router(按需选择)

B 重置项目

1app.vue中重置

<template>
  <div></div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2router/index.js重置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes
})

export default router

3删除没用的文件夹（assets components views）

C 搭建项目

1 assets/css/reset.css（重置样式的css样式  ） 

 记得在main.js中引入 import "./assets/css/reset.css";

2 assets/js/rem.js（移动端 可以借助插件（px to rem））

      1.vscode安装px to rem

      2.打开左下角 设置图标-->设置-->搜索框：px to rem -->看到16 换成100

      3. alt+z 实现px 和rem互换

window.onload = function(){
    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    getRem(720,100)
};
window.onresize = function(){
    getRem(720,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}

记得在main.js中引入  import "./assets/js/rem" 

3 设置过滤器文件夹（创建filters文件夹）

4 组件

     -components 全局组件

     -pages 路由组件

               -login

                 -login.vue

5 数据交互request（创建request文件夹）

6工具类文件夹utils（创建utils文件夹）

D搭建一级路由

1pages下创建一级路由组件

login 登录

register 注册

index 大首页

list 商品列表

detail 详情

search 搜索

2配置路由视图（app.vue）

<div>
    <!-- 一级路由出口 -->
    <router-view></router-view>
  </div>

3路由规则（router/index.js） 

import register from "../pages/register/register.vue"
import login from "../pages/login/login.vue"
import index from "../pages/index/index.vue"
import list from "../pages/list/list.vue"
import detail from "../pages/detail/detail.vue"
import search from "../pages/search/search.vue"

const routes = [
  {
    path:"/register",
    component:register
  },
  {
    path:"/login",
    component:login
  },
  {
    path:"/index",
    component:index
  },
  {
    path:"/list",
    component:list
  },
  {
    path:"/detail",
    component:detail
  },
  {
    path:"/search",
    component:search
  },
  {
    path:"*",
    redirect: "/login"
  }
]

E绘制登录（login.vue）

<template>
  <div>
      <h3>登录</h3>
      <div>账号：<input type="text"></div>
      <div>密码：<input type="text"></div>
      <button>登录</button>

      <router-link to="/index">首页</router-link>
  </div>
</template>

 F二级路由（index.vue）

1pages下二级路由组件

home 首页

cate 分类

shop 购物车

mine 我的

2配置路由视图（index.vue）

<-- 二级路由视图 -->

    <router-view></router-view>

3配置二级路由规则（router/index.js）

import home from "../pages/home/home.vue"
import cate from "../pages/cate/cate.vue"
import shop from "../pages/shop/shop.vue"
import mine from "../pages/mine/mine.vue"



{
    path:"/index",
    component:index,
    // 二级路由规则
    children:[
      {
        path:"home",
        component:home
      },
      {
        path:"cate",
        component:cate
      },
      {
        path:"shop",
        component:shop
      },
      {
        path:"mine",
        component:mine
      },
    ]
  },

4实现底部选项卡切换（index.vue）（方法不唯一） 

<!-- 底部导航 -->
    <footer class="footer">
      <router-link to="/index/home">首页</router-link>
      <router-link to="/index/cate">分类</router-link>
      <router-link to="/index/shop">购物车</router-link>
      <router-link to="/index/mine">我的</router-link>
    </footer>

5底部实现高亮效果

 <footer class="footer">
        <!-- active-class 实现高亮效果 -->
      <router-link active-class="active" to="/index/home">首页</router-link>
      <router-link active-class="active" to="/index/cate">分类</router-link>
      <router-link active-class="active" to="/index/shop">购物车</router-link>
      <router-link active-class="active" to="/index/mine">我的</router-link>
    </footer>

G路由导航（home.vue）

分为两种

1  router-link（无法做判断）

2编程式导航（可以做有条件的判断）

this.$router.push(path)：添加新的历史记录
this.$router.replace(path)：用新的历史记录替换当前的历史记录
this.$router.go(-1) 返回
this.$router.go(0) 刷新

 H全局组件  （components）  main.js引入

I全局过滤器（filters） mian.js引入