目录

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-plusAutoImport({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>

效果：