利用 vue-cli创建 一个·简易的商城首页 还有商品详细页 登入页面 后台页面 利用路由导航功能实现页面切换

好的，这是一个关于 Vue.js 的问题。我会尽力回答你。

首先，你需要安装 Vue CLI。可以使用以下命令全局安装：

npm install -g @vue/cli

然后，在命令行中使用以下命令创建一个新的 Vue 项目：

vue create my-project

在创建项目的过程中，你可以选择使用默认设置或手动配置。在这里，我将使用默认设置。

接下来，你可以在项目根目录下创建以下文件夹和文件：

src/
  assets/        // 存放静态资源文件
  components/    // 存放 Vue 组件
  views/         // 存放页面组件
  App.vue        // 根组件
  main.js        // 入口文件
  router.js      // 路由配置文件

现在，我们可以开始编写页面组件了。

在 `views/` 目录下创建以下文件：

Home.vue        // 商城首页
Product.vue     // 商品详细页
Login.vue       // 登录页面
Admin.vue       // 后台页面

在 `router.js` 中，我们可以配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Product from './views/Product.vue'
import Login from './views/Login.vue'
import Admin from './views/Admin.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/product/:id',
      name: 'product',
      component: Product
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/admin',
      name: 'admin',
      component: Admin
    }
  ]
})

现在，我们可以在 `App.vue` 中使用路由：

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

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

在 `Home.vue` 中，我们可以编写商城首页的代码：

<template>
  <div>
    <h1>商城首页</h1>
  </div>
</template>

在 `Product.vue` 中，我们可以编写商品详细页的代码：

<template>
  <div>
    <h1>商品详细页，ID为 {{ $route.params.id }}</h1>
  </div>
</template>

在 `Login.vue` 中，我们可以编写登录页面的代码：

<template>
  <div>
    <h1>登录页面</h1>
  </div>
</template>

在 `Admin.vue` 中，我们可以编写后台页面的代码：

<template>
  <div>
    <h1>后台页面</h1>
  </div>
</template>

现在，我们已经完成了页面组件的编写和路由的配置。最后，我们需要在 `main.js` 中引入路由，并挂载到 Vue 实例上：

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

Vue.config.productionTip = false

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

现在，你可以使用以下命令启动项目：

npm run serve

在浏览器中访问 `http://localhost:8080`，你应该可以看到商城首页。在地址栏中输入 `http://localhost:8080/product/123`，你应该可以看到 ID 为 123 的商品详细页。在地址栏中输入 `http://localhost:8080/login`，你应该可以看到登录页面。在地址栏中输入 `http://localhost:8080/admin`，你应该可以看到后台页面。

希望这个回答能够帮助到你。