目录

1、项目准备

1.1、项目初始化

1.2、elementPlus按需引入

注：使用cnpm安装elementplus及两个插件，会报错：vue+element-plus报错TypeError: Cannot read properties of null (reading 'isCE ') ，修改：

测试：

1.3、定制主题与配置scss导入

测试：

1.4、路由设计

1.4.1、一级路由设计

1.4.2、二级路由设计

---

1、项目准备

1.1、项目初始化

• 创建项目，就不说了
• 创建文件夹：
• 静态资源准备：这个其实就是你的项目中的图片（放在assets文件夹）呀，样式文件（放在styles文件夹）呀~【公司里，照片都会有UI设计师提供给你；样式的话，主要是针对公共样式，你在写项目的时候，关于css这块，我就不多说了】

备注：我这里项目是安装了sass-loader的，命令：

cnpm install sass-loader -D
cnpm install node-sass -D

---

1.2、elementPlus按需引入

• 安装elementPlus的自动导入插件

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
# 这里最好使用npm，否则可能会报错

• 配置vue.config.js文件，没有则需要创建这个文件

// vue.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = { 
  outputDir: './build',
  // 和webpapck属性完全一致，最后会进行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    
    //配置webpack自动按需引入element-plus，
    plugins: [
      //按需引入element-plus
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),

    ],
  },
 
}

注：使用cnpm安装elementplus及两个插件，会报错：vue+element-plus报错TypeError: Cannot read properties of null (reading 'isCE ') ，修改：

        卸载重装，使用npm

测试：

在App.vue中：

<template>
  <el-button type="primary">Primary</el-button>
</template>

成功：

---

1.3、定制主题与配置scss导入

        这里其实就是，修改原本的elementplus的一些样式，以及咱们项目中其他的一些样式设置：

步骤一： elementplus样式修改：在上面创建的styles文件夹中，创建一个element文件夹，在这创建一个index.scss文件，内容如下：

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #dfb5b5,
    ),
    'success': (
      // 成功色
      'base': #a21dc7,
    ),
    'warning': (
      // 警告色
      'base': #b3ab98,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #9ccf44,
    ),
  )
);
@use "element-plus/theme-chalk/src/index.scss" as *;

  步骤二： 项目样式设置：在styles文件夹下，创建一个var.scss文件，内容如下：

:root {  
    --xtx-color: #27ba9b;  
}

步骤三: 最后这两个文件，都需要在main.js文件中，引入，如下：

import '@/styles/var.scss'; 
import '@/styles/element/index.scss'; 

测试：

App.vue内容如下：

<template>
  <el-button type="primary">Primary</el-button>
  <div>你好帅</div>
</template>



<style lang="scss" scoped>
div{
  color: var(--xtx-color);
}
</style>

成功：

---

1.4、路由设计

        路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由

1.4.1、一级路由设计

步骤一：创建一级路由组件

Layout/index.vue：

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

Login/index.vue：

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

步骤二：修改路由

修改router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:'/',
      component:Layout      
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

export default router

步骤三：设置一级路由页面渲染入口

App.vue:

<template>
  <el-button type="primary">Primary</el-button>
  <div>你好帅</div>
  <RouterView />
</template>



<style lang="scss" scoped>
div{
  color: var(--xtx-color);
}
</style>

1.4.2、二级路由设计

各个文件修改如下：

Home/index.vue：

<template>
<div>
  我是home
</div>
</template>

Category/index.vue：

<template>
    <div>
         我是分类
    </div> 
</template>

重构router/index.js：

// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // path和component对应关系的位置
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: 'category',
          component: Category
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

export default router

重构Layout/index.vue：

<template>
  <div>
    我是首页
    <!--二级路由出口-->
    <RouterView />
  </div>
</template>

效果：