vue3+vite@4+ts+elementplus创建项目详解

1、第一步创建项目cnpm init vite@4
2、设置vue3.2局域网可访问设置：
找到项目路径下的package.json目次下找到script对象下面添加一下代码：
       "serve": "vite --host 0.0.0.0"
启动项目下令不在是dev而是：cnpm run serve
 3、第二部：在vite.config.ts中添加以下代码设置：
 import { resolve } from 'path';
        export default defineConfig({
                server:{
                        open:true,
                        port:8088
                },
                resolve:{
                        alias:{
                                '@':path.resolve(__dirname,'src')
                        }
                },
                plugins:[vue()],
        })

4、安装vant设置与利用 cnpm i vant@next -S 安装完成开始设置 

5、 安装路由 cnpm install vue-router@latest 设置:在src目次下新建router目次，创建index.ts文件代码如下: 

2. import { createRouter, createWebHistory } from 'vue-router'
3. const router = createRouter({
4. history: createWebHistory(import.meta.env.BASE_URL),
5. routes: [
6.     {
7.      path:'/',
8.      name:'',
9.      component:Layout,
10.     }
11. ]
12. })
13. export default router

复制代码

注册路由组件：在main.ts文件中注册：
import router from './router'
app.use(router)

6、按需导入： 
cnpm install element-plus --save
cnpm install @element-plus/icons-vue
cnpm install -D unplugin-vue-components
cnpm install -D unplugin-auto-import
在vite.config.ts中修改一下代码：

2. import { defineConfig } from 'vite'
3. import AutoImport from 'unplugin-auto-import/vite'
4. import Components from 'unplugin-vue-components/vite'
5. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
6. export default defineConfig({
7. plugins: [
8.      vue(),
9.      // ...
10.      AutoImport({
11.          resolvers: [ElementPlusResolver()],
12.      }),
13.      Components({
14.          resolvers: [ElementPlusResolver()],
15.      }),
17. ],
18. })

复制代码

element-plus图标导入

2. <script lang="ts" setup>
3.      import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
4. </script>

复制代码

7、安装其他必备插件：        
        cnpm i js-md5 --save
        cnpm vue-cookies --save
 8、设置sass变量
        
        cnpm i axios -S 直接安装即可实用
        cnpm i sass sass-loader -D

2. import { defineConfig } from 'vite'
3. import vue from '@vitejs/plugin-vue'
4. import path from 'path'
5. import AutoImport from 'unplugin-auto-import/vite'
6. import Components from 'unplugin-vue-components/vite'
7. import {ElementPlusResolver} from "unplugin-vue-components/resolvers"
9. // https://vite.dev/config/
10. export default defineConfig({
11.   plugins: [
12.     vue(),
13.     AutoImport({resolvers:[ElementPlusResolver()]}),
14.     Components({resolvers:[ElementPlusResolver()]})
15.   ],
16.   server:{
17.     open:true,
18.     port:8001
19.   },
20.   resolve:{
21.     alias:{
22.       '@':path.resolve(__dirname,'src')
23.     }
24.   },
25.   css:{
26.     preprocessorOptions:{
27.       scss:{
28.         javascriptEnabled: true,
29.         additionalData:'@use "@/assets/style/index.scss" as *;'
30.         // additionalData:'@use "@/assets/style/index.scss";'
31.         // prependData:`@use "@/assets/style/index.scss" as *;`,
32.       }
33.     }
34.   },
35.   build:{
36.     chunkSizeWarningLimit:1500,
37.     rollupOptions:{
38.       output:{
39.         chunkFileNames:"static/js/[name]-[hash].js",
40.         entryFileNames:"static/js/[name]-[hash].js",
41.         assetFileNames:"static/[ext]/[name]-[hash].[ext]"
42.       }
43.     }
44.   }
46. })

复制代码

 9、设置全局proxy 在main.js中设置

2. // ----------------------------------axios请求全局配置--------------------------------------
3. import {RequestForm,RequestJson,RequestFile,baseURL} from './utils/axios/http.js';
4. const HttpForm = new RequestForm()
5. const HttpJson = new RequestJson()
6. const HttpFile = new RequestFile()
7. app.config.globalProperties.$HttpForm = HttpForm
8. app.config.globalProperties.$HttpJson = HttpJson
9. app.config.globalProperties.$HttpFile = HttpFile
10. app.config.globalProperties.$baseURL = baseURL
11. // ----------------------------------axios请求全局配置--------------------------------------
12. // ----------------------------------页面mate配置设置--------------------------------------
13. import setMeta from "./utils/SetMeta.js";
14. app.config.globalProperties.$setMeta = setMeta
15. // ----------------------------------页面mate配置设置--------------------------------------

复制代码

利用方式：

<div>{{$baseURL}}</div>