vue3开发相关工具

vue3开发相关工具：

1.安装 Piana 持久化插件
官网文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

2.iconfont-阿里巴巴矢量图标库使用组件：
https://www.iconfont.cn/

3.Vite 官网：https://cn.vitejs.dev/
4.Vite 官方中文文档：https://cn.vitejs.dev/

5.Vue 官网：https://vuejs.org/
6.Vue 官方文档：https://cn.vuejs.org/guide/introduction.html

7.Element Plus 官网：https://element-plus.org/

8.Tailwind CSS 官网：https://tailwindcss.com/

9.Tailwind CSS 中文文档 (73zls.com)：https://tailwind.docs.73zls.com/docs/responsive-design

10.NPM 官网：https://www.npmjs.com/

vue3开发相关：

0.规划文件夹：
apis
assets/images
styles

1. vite.config.js - 项目的配置文件 基于vite的配置
2. package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite
3. main.js - 入口文件 createApp函数创建应用实例
4. app.vue - 根组件 SFC单文件组件 script - template - style
5. index.html - 单页入口 提供id为app的挂载点
   6.apis:api接口文件夹
   7.composables 组合函数文件夹
   8.directives 全局指令文件夹
   9.style 全局样式文件夹
   10.utils 工具函数文件夹
   npm vite vue@latest
   pnpm install
   npm run dev
   npm run build

2.导入自动联想提示
3.导入element-plus 组件https://element-plus.org/zh-CN/component/button.html
通用型组件（模板提供）安装--配置引用-测试
业务定制化组件（手写）
3.1安装依赖组件2个：
pnpm install element-plus --save
pnpm install -D unplugin-vue-components unplugin-auto-import
3.2在vit.config.js配置 element 自动导入解析器
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})

3.3在app.vue页面测试
<template>
<div>
<el-button type="primary" >Primary</el-button>
<el-button type="success" disabled>Success</el-button>
<el-button type="info" disabled>Info</el-button>
<el-button type="warning" disabled>Warning</el-button>
<el-button type="danger" disabled>Danger</el-button>
</div>
</template>

4.定制scss变量替换方案
4.1安装scss: pnpm i sass -D
4.2定制样式文件styles/element/indes.scss styles/var.scss
4.3对elementplus样式进行覆盖,配置vite.congfig.js
Components({
//resolvers: [ElementPlusResolver()],
// 1. 配置elementPlus采用sass样式配色系统
resolvers: [ ElementPlusResolver({ importStyle: "sass" })],
}),

 css: {
preprocessorOptions: {
  scss: {
    // 2. 自动导入定制化样式文件进行样式覆盖
    additionalData: `
      @use "@/styles/element/index.scss" as *;
      @use "@/styles/var.scss" as *;
    `,
  }
}

}

index.scss:
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
// 主色
'base': #27ba9b,
),
'success': (
// 成功色
'base': #1dc779,
),
'warning': (
// 警告色
'base': #ffb302,
),
'danger': (
// 危险色
'base': #e26237,
),
'error': (
// 错误色
'base': #cf4444,
),
)
);

var.scss:
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

5.axios 配置
5.1 安装axios: pnpm i axios
5.2 http.js-->
stores/userStore.js--> api/user.js,api/cart.js
stores/cartStore.js
6.路由：
一级路由
二级路由