vite+vue3+elementPlus+less+router+pinia+axios

1.创建项目

npm init vite@latest
1

2.按需引入elementplus

npm install element-plus --save
1

//按需引入

npm install -D unplugin-vue-components unplugin-auto-import
1

配置icon库

npm install @element-plus/icons-vue
1

//然后把下列代码插入到你的 Vite 的配置文件（vite.config.js）中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
// https://vitejs.dev/config/
 
//
export default defineConfig({
	resolve: {
		alias: {
			"@": resolve(__dirname, './src')
		}
	},
	css: {
		preprocessorOptions: {
			less: {
       				 math: "always", // 括号内才使用数学计算
        			globalVars: {
          				// 全局变量
          				mainColor: "red",
       				 },
    		  },
		},
	},
	plugins: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver()],
		}),
		Components({
			resolvers: [
				ElementPlusResolver(),
			],
		}),
	],
	// 配置前端服务地址和端口
	// server: {
	// 	port: 8991,
	// 	// 是否开启 https
	// 	https: false,
	// },
 
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3.引入less

npm install less
npm install less-loader
1
2

在 vite.config.js中配置

css: {
    preprocessorOptions: {
      less: {
        math: "always", // 括号内才使用数学计算
        globalVars: {
          // 全局变量
          mainColor: "red",
        },
      },
    },
  },

1
2
3
4
5
6
7
8
9
10
11
12

安装vue-router

npm install vue-router@4 --save
//安装最新的 npm i vue-router@next -S
1
2

安装完成后，在项目的入口文件中（通常是main.js）进行配置：

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')
1
2
3
4
5

router文件夹下创建index.js

import { createRouter,createWebHashHistory } from "vue-router";
import {customerRouters} from './customer'
import Home from '@/views/home/index.vue'
import HomeIndex from '@/views/home/home.vue'
 
//hash模式路由
const routes =[
    {
        path:'/',
        name:'home',
        component:Home,
        meta: {
            title: "首页"
        },
        redirect: "/home-index",
        children:[
            {
                path: "home-index",
                name: "home-index",
                component: HomeIndex,
                meta: {
                  title: "首页",
                }
            },
            customerRouters,
            
 
        ]
    },
    {
        path:'/login',
        name:'login',
        component:() => import('@/views/login/index.vue'),
        meta: {
            title: "登录"
        },
    }
]
const router = new createRouter({
    history: createWebHashHistory(), //vue3是用history控制路由模式，vue2是mode
    routes
  });
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

安装 axios

npm install axios --save
1

安装 pinia

npm install pinia
1

main.js中配置

import store from "./store";
createApp(App)
.use(router)
.mount('#app')
1
2
3
4

store文件夹下创建index.js

import { defineStore } from "pinia";
 
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const userStore = defineStore({
  // 用来存储全局数据
  id: "usestore",
  state: () => ({
    title: "hello world",
    name: "安安",
    age: 18,
    school: {
      name: "嗷嗷",
      age: 15,
      errs: "保安",
    },
  }),
  //   用来监视或者说是计算状态的变化的，有缓存的功能。
  getters: {},
  //   对state里数据变化的业务逻辑，就是修改state全局状态数据的。
  actions: {},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

---

pinia的持久化配置(用于把数据放在localStorage中)—另外增加的配置

npm i -S pinia-plugin-persist
1

使用
1、在src下创建store文件夹，并在其内创建index.js文件，文件内容如下

import { createPinia } from "pinia"
import piniaPluginPersist from "pinia-plugin-persist"
 
const store = createPinia()
store.use(piniaPluginPersist)
 
export default store
1
2
3
4
5
6
7

在store目录下创建一个新的js文件，比如info.js，写入以下内容（建议通过 actions 去修改 state，action 里可以直接通过 this 访问）

import { defineStore } from "pinia"
 
export const userStore = defineStore({
    id: "info", // id是唯一的，如果有多个文件，ID不能重复
    state: () => {
        return {
            userinfo: null,
            bank_type: 1, 
        }
    },
    actions: {
        setInfo(data) {
            this.userinfo = data
        },
        setBankType(data) {
            this.bank_type = data
        },
        // 用户退出，清除本地数据
        logout() {
            this.userinfo = null
            sessionStorage.clear()
            localStorage.clear()
        },
    },
    // 开启数据缓存，在 strategies 里自定义 key 值，并将存放位置由 sessionStorage 改为 localStorage
    // 默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化，如：paths: ['userinfo'] 替换key的位置
    persist: {
        enabled: true,
        strategies: [
            {
                key: "users",
                storage: localStorage,
            },
        ],
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

页面中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

按需自动引入样式 插件 vite-plugin-style-import

npm install vite-plugin-style-import --save-dev
npm i consola -D //不执行这个将报错
1
2

vite.config.js配置–正确配置

// 按需自动引入 elementplus 相关样式文件
import {
  createStyleImportPlugin,
  ElementPlusResolve
} from 'vite-plugin-style-import'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
    }),
  ],
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

vite.config.js配置—这个配置不要再用了，会报错这是因为2.0版本之后，取消了styleImport

// 按需自动引入 elementplus 相关样式文件
import styleImport from 'vite-plugin-style-import'
plugins: [
    styleImport({
      libs:[{
        libraryName:'element-plus',
        esModule:true,
        resolveStyle:(name)=>{
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }]
    })
  ],
1
2
3
4
5
6
7
8
9
10
11
12
13