vue2项目（一）

1. 在vue.config.js文件中关闭规则检查

  lintOnSave:false

2. 安装vue-router,vuex，less

npm i vue-router

npm i vuex

npm i -D less less-loader

3. 配置路由

(1)创建router文件夹，在里面创建index.js文件

import {createRouter,createWebHistory} from 'vue-router'

import Home from '../pages/Home.vue'
import Login from '../pages/Login.vue'
import Register from '../pages/Register.vue'
import Search from '../pages/Search.vue'

export default [
    {
        path:'/',
        component:Home,
    },
    {
        path:'/login',
        component:Login,
    },
    {
        path:'/register',
        component:Register,
    },
    {
        path:'/search',
        component:Search,
    },
]


 

（2）在main.js中引入路由

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

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

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

4. 分别初始化每一个组件

 Footer组件和Header组件记得在App中引入，注册。

5. 清除默认样式

在index.html中引入reset.css

<!-- 引入清除默认样式 -->
<link rel="stylesheet" href="./reset.css">