前言
此次项目搭建选用 Vue3+Vite,并使用 pnpm 管理依赖包,本文将从下载到项目创建记录项目全过程。
一、项目搭建
1、使用 npm 下载 pnpm ,使用 pnpm,依赖包将被存放在一个统一的位置,因此可以节省大量的硬盘空间以及提高安装速度。
npm install -g pnpm
(Tips:mac 需前面加上 sudo)
sudo npm install -g pnpm
2、使用 vite 创建项目,以前都是用 webpack、vue-cli等打包工具,但是项目量级变大之后的打包速度不尽人意,因此选用 vite 大幅提升了开发服务器启动时间。
pnpm create vite
后续跟随步骤选择 vue3 和 ts 即可。
3、项目创建完毕,打开项目试运行。
cd projectName
pnpm install
pnpm run dev
4、引入插件 element-plus ,选用 element-plus 作为页面主题 UI 是因为其简洁优雅的界面样式及用户体验回馈。项目使用官方推荐的自动导入所需插件,步骤如下:
1)安装 element-plus
pnpm install element-plus
2)安装unplugin-vue-components
和 unplugin-auto-import
这两款插件
pnpm install -D unplugin-vue-components unplugin-auto-import
3)然后把下列代码插入到你的 Vite
的配置文件中
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
(Tips:饿了么官方框架模板,可作参考,点击预览项目效果)
5、项目选用 less 作为 css 扩展语言
pnpm install less less-loader --save-dev
6、下载 VueUse 插件库,很好用,不懂 vue 的 YYX 也有推荐,后续的网页开灯关灯效果也有用到。
pnpm i @vueuse/core
pnpm i @vueuse/components
7、安装 axios ,发送网络请求
pnpm install axios
8、安装 vue-router ,路由
pnpm install vue-router --save
9、安装 pinia ,与 vuex 相比最大特点可能就是少了 mutations ,这是一个很棒的改变,省去了很多冗长的操作。
pnpm install pinia
至此一个 vue3 + vite 的项目就初步搭建完毕。
(Tips:可在 package.json 中加上 --open 让项目可在打包后自动打开网页)
以下为项目后续文章,此项目将持续更新至完结:
二、公司后台管理系统:项目结构整理
三、后台管理系统页面布局基本结构
四、Pinia 的安装及其基本使用
前端小技巧(solve)
前端 VSCode 常用插件库
更多推荐
公司后台管理系统搭建(Vue3+Vite+Element Plus+TypeScript+Pinia)
发布评论