# VueTemplate **Repository Path**: adu7/vue-template ## Basic Information - **Project Name**: VueTemplate - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-12-22 - **Last Updated**: 2023-12-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # VUE开发文档 ## 新建仓库 https://gitee.com/ git clone ## 初始化新建项目 ``` npm init vite@latest ``` ## 配置 ### @路径 > tsconfig.json ``` "baseUrl": ".", "paths": { "@/*": ["src/*"], }, ``` > vite.config.ts ``` resolve: { alias: { '@': '/src', }, }, ``` #### @ 使用示例 ``` 路由 { path: '/options', name: 'Options', component: () => import("@/views/options/index.vue") } 组件 const Table = defineAsyncComponent(() => import('@/components/a.vue')); ``` ### 开发环境端口号 > vite.config.ts ``` server: { host: '0.0.0.0', port: 8889, // proxy: { // '/api': { // target: 'http://192.168.2.202:8889/api', // ws: true, // changeOrigin: true, // }, // }, }, ``` ### 暴露本机地址 > package.json ``` "scripts": { "dev": "vite --force", "build": "vue-tsc && vite build", "preview": "vite preview" }, ``` ## 引入 ``` npm install vue-router@4 npm install element-plus --save npm install -D scss npm install -D sass ``` ### router ``` npm install vue-router@4 ``` > src 目录新建router文件夹，新建 index.ts文件 > index.ts ``` import {createRouter,createWebHistory,RouteRecordRaw} from 'vue-router' const routes: Array = [ { path: '/', redirect: '/aaa' }, { path: '/aaa', name: 'AAA', component: () => import("@/views/aaa/index.vue") } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` > main.tx ``` import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` ### element-plus > npm install element-plus --save > main.ts ``` import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' import router from './router/index' const app = createApp(App) app.use(router) app.use(ElementPlus) app.mount('#app') ``` ### scss > npm install -D scss > 新建theme文件夹新建index.scss入口文件 > index.scss ``` @import 'element-plus/dist/index.css'; @import 'common/ccc.scss'; @import 'ddd.scss'; ``` ### pinia > npm install pinia > 新建stores文件夹新建index.ts ``` import { createPinia } from 'pinia'; // 创建 const pinia = createPinia(); // 导出 export default pinia; ``` #### pinia 使用示例 > stores文件夹下新建 userInfo 文件 ``` import { defineStore } from 'pinia'; /** * 用户信息 * @methods setUserInfos 设置用户信息 */ export const useUserInfo = defineStore('userInfo', { state: () => ({ userInfos: { code: '1001', name: 'admin' }, }), actions: { }, }); ``` > 模版中使用 ``` ``` # elementUI ## 国际化 > app.vue 设置 ``` ```