vue2.0 项目搭建 和路由创建

1.vue create shop  #创建项目
2.cd shop  #进入项目
3.npm run serve #启动项目
4.项目运行: http://localhost:8080
5.cnpm i vue-router --save

---------------------------------------------

vue模板处理

  src
  assets   #清空
  componnets  #清空
  App.vue            #只留vue模板
  main.js            #入口文件

------------------------------------------------

1.asstes/css/reset.css 重置样式css

2.assest/js/rem.js 移动端rem转化的js
3.main.js 引入css

// 1.引入重置样式
import './assets/css/reset.css'
// 2.引入rem.js
import './assets/js/rem'

4 移动端安装vscode移动端px 转rem插件

5 设置->搜索px to rem->将16修改为100即可 使用快捷键: alt+z 将px转为Rem即可

目录结构

    src
    assest                #静态资源文件   eg:CSS js img  font等等
  componnets        #公共全局组件
  pages                    #一级路由组件
  views                    #二级路由组件
  router                #路由配置规则
  store                    #状态管理  
  request                #请求层  实现后端Api接口  
  utils                    #工具类
  App.vue                #根组件
  main.js                #入口文件

一级路由规则配置

创建组件:pages/LoginLogin.vue pages/Index/Index.vue

1.router/index.js

// 1.引入路由
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 引入组件
import Login from '../pages/Login/Login.vue'
import Index from '../pages/Index/Index.vue'

// 路由配置规则
const routes = [
    {
        path:'/login',
        component:Login,
    },
    {
        path:'/index',
        component:Index,
    },
    {
        path:'*',//*任何不存在的路径
        redirect:'/login',
    }
]


// 得到router路由对象
/**
 * 接受一个参数:Object
*/
export default new VueRouter({
    routes
})

2.main.js

import router from './router'


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3.App.vue

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

<script>
export default {

}
</script>

<style>

</style>

二级路由规则配置

1.创建组件 views : Home Cate Cart Mine

2.配置二级路由规则router/index.js

// 引入二级组件
import Home from '../views/Home/Home.vue'
import Cate from '../views/Cate/Cate.vue'
import Cart from '../views/Cart/Cart.vue'
import Mine from '../views/Mine/Mine.vue'

 // 布局组件
    {
        path:'/index',
        component:Index,
        // 配置二级路由规则
        children:[
            {
                path:'home',//  访问/index/home
                component:Home
            },
            {
                path:'cate',//  访问/index/cate
                component:Cate
            },
            {
                path:'cart',//  访问/index/cart
                component:Cart
            },
            {
                path:'mine',//  访问/index/mine
                component:Mine
            },
            {
                path:'',
                redirect:'/index/home',//重定向
            }
        ]
    },

3.设置二级路由出口:在布局组件中

Index/Index.vue
 <!-- 设置二级路由出口 -->
 <router-view></router-view>