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">