安装
一)创建项目
npm init vite@latest shop2 -- --template vue
二)vsocode插件
volar
Vue 3 Snippets
WindiCSS IntelliSense
三) 插件
1)elementplus
https://cn.element-plus.org/zh-CN/component/button
npm install element-plus --save
icon图标引入
npm install @element-plus/icons-vue
----------------
import { createApp } from 'vue' 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')
2)windi css
https://cn.windicss.org/guide/
npm i -D vite-plugin-windicss windicss
vite.config.js import WindiCSS from 'vite-plugin-windicss' export default { plugins: [ WindiCSS(), ], }
main.js
import 'virtual:windi.css'
3)vue-router
npm install vue-router@4
import { createWebHashHistory, createRouter } from 'vue-router' // import HomeView from './HomeView.vue' // import AboutView from './AboutView.vue' const routes = [ // { path: '/', component: HomeView }, // { path: '/about', component: AboutView }, ] const router = createRouter({ history: createWebHashHistory(), routes, }) export default router
4)别名设置
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import WindiCSS from 'vite-plugin-windicss' import path from 'path' // https://vite.dev/config/ export default defineConfig({ plugins: [vue(), WindiCSS()], resolve: { alias: { '~': path.resolve(__dirname, 'src'), }, }, })
5) 请求
6)vueuse使用cookie
vueuse
https://vueuse.org/
npm i @vueuse/integrations (universal-cookie依赖这个包
)
npm i universal-cookie@^7
<template>
<button class="btm ">Primary Button</button>
<div class="button-example">
<div class="button-row">
<el-button type="primary" @click="setUser">设置</el-button>
<el-button type="success" @click="getUser">获取</el-button>
<el-button type="danger" @click="delUser">删除</el-button>
</div>
</div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { useCookies
} from '@vueuse/integrations/useCookies'
const cookie = useCookies();
const user=cookie.get("user")
console.log(user)
const setUser=()=>{
cookie.set("user","张三")
}
const getUser=()=>{
console.log(cookie.get("user"))
}
const delUser=()=>{
cookie.remove("user")
}
</script>
7)vuex 状态管理
npm install vuex@next --save
页面整体进度条功能
https://ricostacruz.com/nprogress/
动态数字展示
npm i gsap
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save