小白学习Vue3之管理系统模板搭建（一）——创建项目&导入基本配置

项目搭建

本次项目使用vite进行搭建
vite官网：vite

和 Vue cli 的效果一样，vite 也是一个构建 vue 项目的脚手架工具。

比起 Vue cli，vite 的热更新速度更快，打包构建速度更快。因为它默认安装的插件很少，所以需要自己额外配置。

前提安装node环境

创建项目

npm 6.x

npm init vite@latest vue3-zhifou --template vue

npm 7+

npm init vite@latest vue3-zhifou -- --template vue

安装依赖

npm install

启动

npm run dev

##

初始化项目

修改App.vue，删除默认的Helloworld组件

配置导入

安装Element-Plus

element-plus官网： element-plus

npm install element-plus --save

在main.js配置Element-plus

导入element-plus组件

import ElementPlus from 'element-plus'

导入element-plus样式

import 'element-plus/dist/index.css'

注册element-plus插件

app.use(ElementPlus)

安装配置图标库

因为 Element UI 提供的图标比较少，这里推荐安装第三方的图标库：font-awesome。
font-awesome官网：font-awesome

npm i font-awesome -S

在main.js配置font-awesome

import 'font-awesome/css/font-awesome.min.css'

安装配置 Echarts

ECharts 是一款由百度团队开源的基于 JavaScript 的数据可视化图表库。
官网：ECharts

npm i echarts -S

在main.js配置Echarts

// 全局引入 echarts
import * as echarts from 'echarts'
// 将 echarts 挂载到 Vue 上
app.config.globalProperties.$echarts = echarts;