乐意购项目前端开发 #1

一、创建vue项目

1. vue create 项目名

2. 运行项目

npm install
npm run dev

3.使用Git管理项目

创建远程仓库 leyigou

在项目文件终端执行以下代码

git init # git 初始化#这个要使用自己的仓库
git remote add origin git@gitee.com:xie-weijia/leyigou.git # 添加远程仓库地址
git branch -M main # 切换分支
git add . # 添加文件
git commit -m "init" # 提交
git push origin main # 推送到远程仓库

要是遇到这个错误

git@gitee.com: Permission denied (publickey).
fatal: Could not read from remote repository.Please make sure you have the correct access rights
and the repository exists.

就前往个人设置, 按步骤生成,添加公钥即可

二、引入ElementPlus

npm install element-plus --save

配置按需导入

先安装插件

npm install -D unplugin-vue-components unplugin-auto-import

把下列代码插入到 vue.config.js 配置文件中,就可以实现自动按需导入

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = {configureWebpack: {resolve: {alias: {components: '@/components'}},//配置webpack自动按需引入element-plus，plugins: [AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]}
};

如果出现 AutoImport is not a function 这个错误, 可能是版本不匹配, 可以在终端输入

 npm install unplugin-auto-import@0.16.1

还是不行的话,再输入

npm install unplugin-vue-components@0.25.2

测试是否生效

将App.vue中template的内容换成

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

运行项目, 看格式有没有发生变化

三、自定义ElementPlus主题

安装sass

npm install sass -D
npm install sass-loader -D

准备样式文件

新建文件 style/element/index.scss

/* 重写你想要重写的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': (// 主色'base': #ffd000,),'success': (// 成功色'base': #f9d11e,),'warning': (// 警告色'base': #ff9204,),'danger': (// 危险色'base': #f34309,),'error': (// 错误色'base': #d44040,),)
)