赞
踩
Vite当前仅适用于Vue3.x。这也意味着您不能使用尚未与Vue 3兼容的库,并且vite构建工具要求node 版本在 16+ 以上 node -v 查看当前版本 低于16 可使用 nvm 进行版本管理。
1:脚手架安装
pnpm install -g vite@latest
2:项目初始化
- pnpm init vite@latest
-
- Ok to proceed? (y) y
-
- // 输入 y 继续
-
- Project name:
-
- 输入一个项目文件夹名称
-
- ? Select a framework: » - Use arrow-keys. Return to submit.
- vanilla
- > vue
- react
- preact
- lit
- svelte
-
- 选择vue 创建完成
3.1:安装 element-plus 组件及图标库按需引入
-
- pnpm i element-plus
-
- pnpm i unplugin-vue-components -D
-
- pnpm i unplugin-element-plus -D
-
- pnpm i @element-plus/icons-vue
-
- pnpm i unplugin-auto-import -D
3.2:vite.config.js 配置
- // element plus按需导入
- import AutoImport from 'unplugin-auto-import/vite';
- import Components from 'unplugin-vue-components/vite';
- import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
- import Icons from "unplugin-icons/vite"
- import IconsResolver from "unplugin-icons/resolver"
-
-
- // 文件内加入
-
- plugins: [
- vue(),
- AutoImport({
- resolvers: [
- ElementPlusResolver(),
- IconsResolver({
- prefix: 'Icon'
- })
- ],
- }),
- Components({
- resolvers: [
- ElementPlusResolver(),
- IconsResolver({
- enabledCollections: ['ep']
- })
- ],
- }),
- Icons({
- autoInstall: true
- })
- ],
4.1:安装 vue-i18n
- pnpm install vue-i18n
-
- pnpm i --save-dev @intlify/vite-plugin-vue-i18n
4.2 语言配置
- src/common/i18n/config/zh.js
-
- export default{
- message: {
- username: '用户名',
- password: '密码',
- login: '登录',
- captcha: '验证码',
- forgetPassword: '忘记密码?',
- loginTip: '当前登录结果随机。验证码随便填',
- editpassword: '修改密码',
- logout: '退出登录',
- errMsg: {
- inputRequired: '请输入{cont}',
- selectRequired: '请选择{cont}'
- }
- },
- }
-
- src/common/i18n/config/en.js
-
- export default{
- message: {
- username: 'User Name',
- password: 'Password',
- login: 'Login',
- captcha: 'Captcha',
- forgetPassword: 'Forget Password?',
- loginTip: 'The login result is random. Just fill in the captcha',
- editpassword: 'Edit Password',
- logout: 'Logout',
- errMsg: {
- inputRequired: 'Please Input {cont}',
- selectRequired: 'Please Select {cont}'
- }
- },
- }
-
- src/common/i18n/index.js
-
- import { createI18n } from 'vue-i18n'; //引入vue-i18n组件
- import zhCn from './config/zh';
- import en from './config/en';
- const messages = {
- zhCn,
- en
- }
- let defaultLang = sessionStorage.getItem('lang') || 'zhCn';
- const i18n = createI18n({
- fallbackLocale: defaultLang,//预设语言环境
- globalInjection:true,
- legacy: false, // you must specify 'legacy: false' option
- locale: defaultLang,//默认显示的语言
- messages,//本地化的语言环境信息。
- });
-
- export default i18n
-
-
-
- 组件方法
-
- <template>
- <div>
- <el-dropdown @command="handleClick">
- <el-button type="primary">
- VUE国际化
- </el-button>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item command="en">英文</el-dropdown-item>
- <el-dropdown-item command="zhCn">中文</el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
- </template>
-
- <script>
- import { defineComponent } from "vue";
- import { useI18n } from 'vue-i18n';
- export default defineComponent({
- setup() {
- const { locale } = useI18n();
- const handleClick = (value) => {
- locale.value = value;
- sessionStorage.setItem('lang',value);
- }
- return {
- handleClick
- };
- },
- });
- </script>
- <style scoped>
- .example-showcase .el-dropdown + .el-dropdown {
- margin-left: 15px;
- }
- .example-showcase .el-dropdown-link {
- cursor: pointer;
- color: var(--el-color-primary);
- display: flex;
- align-items: center;
- }
- </style>
4.3:mian.js
- import i18n from './common/i18n/index';
-
-
- app.use(i18n);
4.4:vite.config.js
- import path from 'path';
- // plugins 下面新增
-
-
- vueI18n({
- include: path.resolve(__dirname, './path/to/src/locales/**')
- }),
-
- alias: {
- 'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
- },
5.1:vuex 安装
- pnpm i vuex@next -S
-
- pnpm i vuex-persistedstate
5.2 配置
- src/store/modules/user.js
-
- const user = {
- namespaced: true,
- state: {
- userInfo: null
- },
- mutations: {
- logout (state) {
- // 清理账号数据
- state.userInfo = null
- localStorage.clear()
- sessionStorage.clear()
- },
- setUserInfo (state, info) {
- state.userInfo = info
- }
- }
- }
-
- export default user
-
-
-
- src/store/store.js
-
-
- import { createStore } from "vuex";
- import createPersistedstate from "vuex-persistedstate";
- import user from './modules/user'
-
- export default createStore({
- modules: {
- user ,
- },
- plugins: [
- //默认是存储在localStorage中
- createPersistedstate({
- // key: 存储数据的键名
- key: "longStore",
- //paths:存储state中的那些数据
- paths: ["lang"],
- }),
- ],
- });
5.3:mian.js
- import store from "./store/store";
-
- app.use(store);
6.1:安装vue-router
pnpm install vue-router@4 -S
6.2:配置 (注:因最近较忙未配置动态路由及路由权限配置,后续补上)
- src/router/static-routes.js
-
-
-
- // 1.路由出口在App.vue
- const singleRoutes = [
- {
- // 设置初始页面
- path: '',
- redirect: '/home',
- meta: {
- requireAuth: true
- }
- },
- ]
-
- /**
- * 路由出口在main.vue,包括了菜单项和非菜单页面
- * 若该页面属于菜单页面,需要添加type: 'menu'属性
- */
- const staticTree = [
- {
- path: '/main',
- name: 'main-home',
- title: '首页',
- icon: 'ios-paper',
- type: 'menu',
- component: () => import('./../views/lang/index.vue'),
- }
- ]
- const staticMenuList = staticTree
- const staticMainRoutes = staticTree
-
- // 汇总所有的路由
- const staticRoutes = [...staticMainRoutes, ...singleRoutes]
-
- export { staticRoutes, staticMenuList, staticTree }
-
-
- src/router/router.js
-
-
- import {
- createRouter,
- createWebHashHistory,
- // createWebHistory,
- } from 'vue-router';
-
- import { staticRoutes } from './static-routes.js'
-
- export default createRouter({
- history: createWebHashHistory(),
- routes: [...staticRoutes]
- })
-
6.3:mian.js
- import router from './router/router';
-
- app.use(router);
7.1:安装less
pnpm i less-loader less -D
7.2:配置 vite.config.js
- css: {
- preprocessorOptions: {
- less: {
- modifyVars: {
- hack: `true; @import (reference) "${path.resolve("src/assets/less/app.less")}";`,
- },
- javascriptEnabled: true,
- },
- },
- },
8:配置项目别名
- defineConfig({
- resolve:{
- //设置路径别名
- alias: {
- '@': path.resolve(__dirname, './src'),
- // '*': path.resolve('')
- },
- },
- ....
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。