仿写新蜂商城项目（一）搭建Vue项目

1. 创建项目

安装脚手架Vue CLI，使用vue create copying-newbee-mall-vue创建项目

2. 引入官方路由vue-router

（1）在项目根目录下，在终端输入以下两条命令来下载 vue-router3.x

npm uninstall vue-router
npm install vue-router@3

也可以使用cnpm

（2）在 src 文件夹下，创建一个router文件夹，并在该文件夹下新建一个index.js文件，用来配置路由

./src/router/index.js文件

// 引入Vue
import Vue from vue
// 引入官方路由，因为项目是Vue2，vue-router要使用3.x
import VueRouter from vue-router
// Vue.use()通过全局方法使用第三方库插件，使用vue-router
Vue.use(VueRouter)

// 定义路由对象
const routes =[
    // 这里写页面的路由对象
]

// 创建路由实例，并传递routes配置
const router = new VueRouter({
          
   
    // 暂时使用默认的hash模式
    mode:hash,
    routes
})

// 如果未导出为一个模块，在main.js中导入需要写成import router from ./router/index.js
// 使用ES6语法，将文件导出为一个模块,在main.js中导入仅需写成import router from ./router
export default router

（3）在 src 文件夹下的main.js文件中，通过全局方法Vue.use()使用vue-router

./src/main.js文件

import Vue from vue
import App from ./App.vue
// 引入vue-router
import router from ./router


Vue.config.productionTip = false

new Vue({
          
   
  // 为Vue实例配置路由
  router,
  render: h => h(App),
}).$mount(#app)

3. 创建第一个页面，运行项目

（1）修改 App.vue页面，保留最基本的内容。使用Vue路由内置组件router-view ，当你的路由path与访问的地址相符时，会将指定的组件替换该 router-view

./src/App.vue文件

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

<script>
export default {
          
   
  name: App,
}
</script>

<style>
</style>

（2）创建第一个页面 Home.vue

在src文件夹下，创建一个views文件夹，并新建一个Home.vue，作为首页

./src/views/Home.vue文件

<template>
  <div>
    首页
  </div>
</template>

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

<style scoped>
</style>

如果出现以下报错： 修改项目根目录下的vue.config.js文件，添加红框中的代码

（3）添加第一个页面Home.vue的路由对象

./src/router/index.js文件

// 定义路由对象
const routes =[
    {
          
   
        path:/,
        // 将根路径重定向到首页，即默认打开首页，跳转至/home页面
        redirect:/home
    },
    {
          
   
        path:/home,
        name:Home,
        // 路由懒加载，只加载点击的那个模块，按需去加载路由响应信息，而且一个页面加载后，再次访问不会重复加载
        component: () => import(../views/Home.vue),
    }
]

（4）使用npm run serve运行项目，打开红框中的地址 成功运行项目

结尾