目录
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 -D1.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>效果：
