pc 端项目 vue3 vite pinia less element-plus icons unocss mock

项目很基础,适合学习练手,基于 vite vue3 ,集成 element-plus pinia vue-router less 全局 less 导入在线 icons 自动导入组件自动引入
这也是我第一次搭建vue3的项目,边搭建边记录,发现vue3-vite现在很简单,比以前vue2-webpack项目简单多了,很多东西官网文档写得很详细.
没用 ts. ts 对习惯 vue2 的选手很不友好后面会单独出一个带 ts 的.
文章最后有项目地址.可能文章写的不够详细,不看项目源码无法一步一步搭建起来.

本地环境

node 16.14.0  
vite 5.1.6  
pinia 2.1.6
vue 3.4.21
vue-router 4.3.0
less 4.2.0

创建项目

这是 vite 官网 cn.vitejs.dev/guide/

cnpm init vite@latest   // 选择vue js
cd 刚刚建的项目
npm install
npm run dev

修改端口和本地代理文件环境变量配置

vite.config.js 修改

export default defineConfig({}) 为
export default defineConfig(()=>{
    // 自己的其他逻辑代码
    return{}
    })

新建 .env .env.local .env.production 文件里面配置环境变量变量必须以 VITE_ 开头
defineConfig 方法里面 server 引入环境变量和本地代理

环境变量的使用*

www.jianshu.com/p/015eaa0b4…

其他地方引用：import.meta.env
import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)

配置 @别名

juejin.cn/post/720365…

修改 vite.config.js
import path from "path";
添加resolve.alias

配置路由 vue-router 路由懒加载路由守卫

blog.csdn.net/qq_39861930…

pnpm add vue-router -S
删除自带的 vue 页面代码
新建views/home/index.vue  views/pageB/index.vue 两个页面
修改App.vue
新建router/index.js 静态路由文件
 router/permission.js // 路由守卫文件
 在mian.js 引入router

router/index.js
main.js

引入 less 和全局 less 文件

blog.csdn.net/RogerQianpe…

pnpm add less -D

新建一个less文件
修改 vite.config.js
在retrun{} 里面添加

vite.config.js 的return{}

使用 pinia

这里参考 jspang 的博客,原博客地址不见了。
这是 pinia 官网 pinia.web3doc.top/getting-sta…

pnpm add pinia -S
新建store/index.js store/fenStore/js
main.js 引入 pinia
components 下新建 Birthday CountButton Getter
在pageB页面引入上面3个组件

main.js 第5行注释了是因为后面配置自动引入

element-plus

这是官网 element-plus.org/zh-CN/guide…

pnpm add element-plus -D
在main.js 引入就行
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
app.use(ElementPlus);

自动引入插件

自动引入 npm 包 js 代码使用

pnpm add unplugin-auto-import -D
修改 vite.config.js
import AutoImport from "unplugin-auto-import/vite";
在plugins 里面加入AutoImport

自动引入组件

pnpm add unplugin-vue-components -D
修改 vite.config.js
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; // element-plus 按需引入 自动导入
在plugins 加入Components

unocss

这是官网 unocss.dev/integration…

pnpm add unocss -D
修改 vite.config.js
import UnoCSS from 'unocss/vite'
在plugins 加入UnoCSS
新建uno.config.js 文件
main.js 加入 import "virtual:uno.css";

图标 icons

blog.csdn.net/o_u_c_h/art…

pnpm add @unocss/preset-icons @iconify-json/twemoji -D
修改 uno.config.js 的 presets下面的 presetIcons

axios

pnpm add axios -S
新建utils/http.js api/index.js

css 前缀 postcss

暂时没做,vue3 项目对老浏览器不用兼容

px-to-rem

移动端需要

postcss-px-to-viewport

暂时没做,移动端需要

大屏 autofit

暂时没做,大屏需要

项目地址

gitee.com/ldoll/vue3-…
我也在业余时间写了其他版本的前端框架，需要可看我gitee主页
vueui5--vue2-postcss-mockjs-ie10
react17-webpack4-react-router5-mobx
vite3-react18-router6-antd4-mobx6

基础框架vue3 vite pinia less element-plus icons unocss mock