歌谣2024-前端学习技术记录0220

前言

基本要求

vue2+element2创建项目

项目名称 vue2element2project

知识点1 引入element2组件

main.js

import Vue from 'vue'
import App from './App.vue'
//引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

组件

<template>
  <div class="home">
    <el-button type="primary">我是歌谣</el-button>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  components: {},
};
</script>

运行结果

知识点2 建立三栏布局

贴出主体代码

<template>
  <div id="app">
    <div>
      <layout-header></layout-header>
      <div class="geyao-app-main">
        <layout-aside></layout-aside>
        <layout-main></layout-main>
      </div>
    </div>
    <!-- <router-view/> -->
  </div>
</template>
<script>
import LayoutMain from "../src/Layout/Main/index.vue";
import LayoutHeader from "../src/Layout/Header/index.vue";
import LayoutAside from "../src/Layout/Aside/index.vue";

export default {
  name: "HomeView",
  components: { LayoutMain, LayoutHeader, LayoutAside },
};
</script>

<style>
.geyao-app-main {
  display: flex;
}
</style>

运行结果

知识点2

Can‘t resolve ‘sass-loader‘

解决

npm install node-sass sass-loader

知识点3 依赖安装慢

sill idealTree buildDeps

解决

npm config set registry https://registry.npmmirror.com

知识点4 依赖不兼容

sass-loader@14.1.1: The engine “node” is incompatible with this module. Expected version “>= 18.12.0”. Got “17.9.1”

解决

升级node 版本

知识点5

组件全局引入和组件局部引入不可重复引入