vue项目实战经验，相关库的安装【笔记】

前言

最近在系统学习vue3的项目实战，这里是对学习过程中的总结，包括一些库，框架的网站。

项目介绍

本项目基于Vue3 + ElementPlus + Vite实战开发商城后台管理系统，其中包括Vite的使用，Vue3全新的

node.js的搭建

1.node官网下载

https://nodejs.org/zh-cn/

2.npm 淘宝镜像安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v //查看版本号

vite项目搭建

1.vite官网和介绍

http://www.vitejs.net/
Vite 需要 Node.js 版本 >= 12.0.0。，通过

npm init vite@latest //查看版本号

2.创建vue3项目

#npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue
#npm 6.x
npm init vite@latest my-vue-app --template vue

再按要求勾选相关需要， npm run dev 运行。

Element Plus UI库引入

1. Element Plus网站

https://element-plus.gitee.io/zh-CN/
Element Plus 是用于vue3的element库，vue2是element-ui 注意一下

2.库安装

npm install element-plus --save

3.引入UI库文件

main.js文件

import {
   
    createApp } from 'vue'
import './style.css'
// 引入element依赖文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

windicss 框架

1.网站

https://windicss.org/

2.安装

npm i -D vite-plugin-windicss windicss

3.Vite 配置中添加插件 ，和Vite 入口文件中导入

vite.config.js 文件

import vue from '@vitejs/plugin-vue'
import {
   
    defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default defineConfig({
   
   
plugins: [
vue(),
WindiCSS()
],
})

main.js 文件

import {
   
    createApp } from 'vue'
import './style.css'
// 引入element依赖文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
// 引入windi.css
import 'virtual:windi.css'
app.mount('#app')

vue-router 路由

1.网站

https://router.vuejs.org/zh/

2.安装

npm install vue-router@4

全局配置

router/index.js 文件

//1. 导入vue-router相关函数
import {
   
    createRouter, createWebHashHistory } from "vue-router"
// 2.路由规则
const routes = [
{
   
   
path:"路由地址",
name:"路由名称",
component:组件名称
}
]
// 3.路由对象实例化
const router =