《VUE电商项目PC前台》之二 目录设计及相关配置

src
 |——/api/         ajax相关请求
 |——/components/  非路由组件
 |——/pages/       路由组件
 |——/router/      路由器
 |——/store/       vuex相关
 |——/utils/       工具函数模块
 |——App.vue       应用组件
 |——main.js

相关配置

package.json : 全局规则配置文件

'rules': {
      'no-new': 'off'
    }

在js/vue文件中修改局部规则

/* eslint-disable no-new */
    new Vue({
      el: 'body',
      components: { App }
    })

vue.config.js: 关闭规则检查

// 关闭ESLint的规则
 	 lintOnSave: false,

引入vue-router

npm install -S vue-router

路由组件编码

1.pages/Home/index.vue  //首页组件

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

<script>
export default {
  name: 'Home',
  data () {
    return {}
  },
}
</script>

<style lang="less" scoped>

</style>

2.pages/Search/index.vue  //搜索页组件

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

<script>
export default {
  name: 'Search',
  data () {
    return {}
  },
}
</script>

<style lang="less" scoped>

</style>

3.pages/Register/index.vue  //注册页组件

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

<script>
export default {
  name: 'Register',
  data () {
    return {}
  },
}
</script>

<style  lang="less" scoped>

</style>

4.pages/Login/index.vue  //登录页组件

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

<script>
export default {
  name: 'Login',
  data () {
    return {}
  },
}
</script>

<style  lang="less" scoped>

配置路由器

router/routes.js  //配置路由

import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Register from '@/pages/Register'
import Login from '@/pages/Login'

/* 
所有静态路由配置的数组
*/
export default [
  {
    path: '/',
    component: Home
  },

  {
    path: '/search',
    component: Search
  },

  {
    path: '/register',
    component: Register
  },

  {
    path: '/login',
    component: Login
  }
]

router/index.js  //配置路由器

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

// 声明使用插件
Vue.use(VueRouter)

// 向外默认暴露路由器对象
export default new VueRouter({
  mode: 'history', // 没有#的模式
  routes, // 注册所有路由
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router, // 注册路由器
}).$mount('#app')

非路由组件配置

components/Header/index.vue  //头部组件

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

<script>
export default {
  name: 'Header',
  data () {
    return {}
  },
}
</script>

<style  lang="less" scoped>

</style>

components/Footer/index.vue  //底部组件

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

<script>
export default {
  name: 'Footer',
  data () {
    return {}
  },
}
</script>

<style  lang="less" scoped>

</style>

App.vue

<template>
  <div>
    <Header/>
    <router-view></router-view>  /* 路由组件展示区 */
    <Footer/>
  </div>
</template>

<script>
import Header from './components/Header'  //引入头部组件
import Footer from './components/Footer'  //引入底部组件

export default {
  name: 'App',

  components: {
    //组成头部组件和底部组件
    Header,
    Footer
  }
}
</script>

<style lang="less" scoped>

</style>

其他less/css不在此展示