安装

 一)创建项目

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) 请求

 npm install axios

 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