使用vite构建和下载

首先创建一个空文件夹

1
yarn create vite

选择构建vue项目，并为其项目根目录命名
初始化后，安装相关依赖

1
2
yarn
npm install

Vuex

1
2
yarn add vuex
npm install vuex --save

vue-router

1
2
yarn add vue-router
npm install vue-router --save

axios

1
2
yarn add axios
npm install axios --save

sass

1
2
yarn add sass sass-loader -dev
npm install sass sass-loader -dev --save

element-plus

1
2
yarn add element-plus
npm install element-plus --save
文件资源管理

在src下创建views文件夹

1
mkdir -p src/view

在src下创建store/index.js文件及其相关文件

Linux:

1
mkdir -p src/store && touch src/store/index.js && touch src/store/getters.js && touch src/store/states.js && touch src/store/mutations.js && touch src/store/actions.js

windows: 

1
2
3
4
5
6
mkdir src\store ; 
cd . > src\store\index.js;
cd . > src\store\getters.js;
cd . > src\store\states.js;
cd . > src\store\mutations.js;
cd . > src\store\actions.js;

在src下创建router文件夹

Linux:

1
mkdir -p src/router && touch src/router/index.js

windows:

1
mkdir src\router ; cd . > src\router\index.js

在src下创建http文件

Linux:

1
mkdir -p src/http && touch src/http/index.js

windows:

1
mkdir src\http ; cd . > src\http\index.js

在src下创建styles文件夹并且创建variables.scss文件

Linux:

1
mkdir -p src/styles && touch src/styles/variable.scss

windows:

1
mkdir src\styles ; cd . > src\styles\variable.scss

通用工具函数（utils）和共享代码(shared)文件夹

Linux:

1
mkdir -p src/utils && mkdir -p src/shared

windows:

1
mkdir src\utils ; mkdir src\shared

创建jsconfig.json或tsconfig.json给开发工具读，放在根目录下

Linux:

1
2
touch jsconfig.json
touch tsconfig.json

windows:

1
2
cd . > jsconfig.json
cd . > tsconfig.json
vite-vue\jsconfig.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "compilerOptions": {
        // "module": "commonjs",
        // "target": "es5",
        // "sourceMap": true,
        "paths": {
            "@/*": ["./src/*"]
        },
        "baseUrl": "."
    },
    "exclude": [
        "node_modules"
    ]
}
挂载和配置
vite-vue\vite.config.js
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import appConfig from "./src/config"
import {resolve} from 'path';
// import vuePlugin from '@vitejs/plugin-vue';
// import vueJsx from '@vitejs/plugin-vue-jsx';
// import vueSetupExtend from 'vite-plugin-vue-setup-extend';
// import { createHtmlPlugin } from 'vite-plugin-html'

// 拼接路径
const pathResolve = (dir) => {
    return resolve(__dirname, '.', dir);
};

export default defineConfig(({command, mode, isSsrBuild, isPreview}) => {

    /* let rollupOptions = {
        output: {
            entryFileNames: `assets/[name].[hash].js`,
            chunkFileNames: `assets/[name].[hash].js`,
            assetFileNames: `assets/[name].[hash].[ext]`,
            compact: true,
            manualChunks: {
                vue: ['vue', 'vue-router', 'vux'],
                echarts: ['echarts'],
            },
        },
    };*/

    let alias = {
            '@': pathResolve('./src'),
            '@/views': pathResolve('./src/views'),
            '@/utils': pathResolve('./src/utils'),
            '@/config': pathResolve('./src/config'),
            '@/api': pathResolve('./src/api'),
            '@/store': pathResolve('./src/store'),
            '@/assets': pathResolve('./src/assets'),
            '@/components': pathResolve('./src/components'),
        /*
            '@/locales': pathResolve('./src/locales'),
            '@/mixins': pathResolve('./src/mixins'),
            'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
         */
    }

    let define = {
        'process.env.NODE_ENV': command === 'serve' ? '"development"' : '"production"',
    };
    let proxy = {
        '/api': {
            target: `${appConfig.API_URL_HTTP}`,
            changeOrigin: true, // 允许跨域
            rewrite: path => path.replace(`${appConfig.BASE_URL_HTTP}`, ''),
            // pathRewrite: { '^/api': '' },//将 /api 替换为空字符串
            secure: false,//禁用 HTTPS 安全性检查
            cookieDomainRewrite: '',//设置为空字符串可以确保代理请求中的 Cookie 在跨域时正确处理
        },
        '/socket': {//webSocket代理
            target: `${appConfig.API_URL_WS}`,
            ws: true,//开启ws, 如果是http代理此处可以不用设置
            changeOrigin: true,
            // pathRewrite: { '^/socket': '' }//奇了怪了，这个也不行
            rewrite: path => path.replace(`${appConfig.BASE_URL_WS}`, ''),

        },
    };
    let esbuild = {};
    // 其他配置项...
    let optimizeDeps = {
        //  include: ['jquery'],
    };
    return {
        // base: './', // index.html文件所在位置
        // root: './', // js导入的资源路径，src
        minify: true, // 是否压缩代码
        resolve: {
            alias,
        },
        define: define,
        server: {
            /** 是否开启 HTTPS */
            https: false,
            /** 设置 host: true 才可以使用 Network 的形式，以 IP 访问项目 */
            host: true, // host: "0.0.0.0"
            /** 端口号 设置了直接以这个端口代理前端了*/
            // port: 8080,
            /** 是否自动打开浏览器 */
            open: false,
            /** 跨域设置允许 */
            // cors: true,
            /** 端口被占用时，是否直接退出 */
            strictPort: false,
            // 代理
            proxy: proxy
        },
        build: {
            target: 'es2015', //  'es2015' ：生成 ES2015 语法的代码，vite默认。‘module’ ：适用于支持 ES 模块（ESM）的环境。
            minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser // 也是代码混淆
            manifest: false, // 是否产出maifest.json
            sourcemap: false, // 是否产出soucemap.json // 映射文件，用于将构建后的压缩代码映射回原始源代码，以便在调试过程中追踪错误和调试
            outDir: 'dist', // 产出目录，此处为默认
            chunkSizeWarningLimit: 2000,
            // rollupOptions, // 其他配置
        },
        esbuild,
        optimizeDeps,
        plugins: [
          /*  legacyPlugin({
                targets: ['defaults', 'Android > 39', 'Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15'],
                polyfills: ['es.promise.finally', 'es/map', 'es/set'],
                modernPolyfills: ['es.promise.finally'],
                renderLegacyChunks: true,
            }), vuePlugin(), vueJsx(), vueSetupExtend(), createHtmlPlugin({
                inject: {
                    data: {
                        title: appConfig.APP_TITLE,
                    },
                },
            }),*/
            vue()
        ],
     /*   css:
            {
            preprocessorOptions: {
                css: {
                    charset: false
                }
            },
        },
        json:
            {
            //是否支持从 .json 文件中进行按名导入
            namedExports: true,
            //若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好
            stringify: false
            },*/
        };
})

vite-vue\src\http\index.js
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
import axios from "axios";
const httptool = axios.create({
    // baseURL: 'http://127.0.0.1:8000/',
    baseURL: '/api',                    //请求的公共路径，即在使用的时候会自动加上的前缀，和vite.config.js的匹配使用httptool就直接连接后端如果还是需要别请求的服务器，这里改
    timeout: 1000,                          //最大请求超时时间，请求超过这个时间就报错
    headers: { 'X-Custom-Header': 'foobar' }  //预设的请求头，一般工作当中这里填写隐藏了客户端身份字段
});

// 添加请求拦截器
// httptool.interceptors.request.use(function (config) {
//     // Do something before request is sent
//     console.log('config')
//     console.log(config)
//     console.log("Http请求之前")
//     return config;
// }, function (error) {
//     // Do something with request error
//     console.log("Http请求错误")
//     return Promise.reject(error);
// });
//
// // 添加响应拦截器
// httptool.interceptors.response.use(function (response) {
//     // Any status code that lie within the range of 2xx cause this function to trigger
//     // Do something with response data
//     console.log('response')
//     console.log(response)
//     console.log("Http响应之前")
//     return response;
// }, function (error) {
//     // Any status codes that falls outside the range of 2xx cause this function to trigger
//     // Do something with response error
//     console.log("Http响应错误")
//     return Promise.reject(error);
// });

export default httptool;
vite-vue\src\router\index.js
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
import {createRouter, createWebHistory} from "vue-router";
const routes = [
    {
        path: "/",
        component: () => import('@/views/Index/Index.vue'),
        name: "Home",
        alias: ['/home', '/index', '/index.html'],//别名：实现多路径定向到一个组件
        meta: { title: "首页" },
        // children: [
        //     {
        //         path: 'info',
        //         component: () => import('@/views/xxx.vue'),
        //         name: 'xxx',
        //         meta: {title: '子路由'}

        //     },
        // ]
    }]
const router = createRouter({
    history: createWebHistory(),//路由的模式 不带#号的
    routes
})
// router.beforeEach(async (to, from, next) => {    // 前置路由
//     if(to.meta.title){//判断是否有标题
//         document.title = to.meta.title
//     }
//     return next();
// })
export default router
vite-vue\src\store\index.js
1
2
3
4
5
6
7
8
9
10
11
12
import Vuex from 'vuex'
import state from "./state.js";
import mutations from "./mutations.js";
import getters from "./getters.js";
import actions from "./actions.js";

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})
vite-vue\src\store\state.js
1
2
3
4
export default {
    // user: {},   // 用户
    // token:localStorage.token || sessionStorage.token ,  // 用户Token
}
vite-vue\src\store\mutations.js
1
2
3
4
5
6
7
8
export default {
    // setUser(state, user) {
    //     state.user = user
    // },
    // setToken(state, token) {
    //     state.token = token
    // }
}
vite-vue\src\store\actions.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import httptool from "../http";

export default {
    getUserAction(ctx, payload) {
        const {username, password} = payload;
        httptool.post('/authorizations/', {
            username: username,
            password: password
        }, {
            responseType: 'json',
            // withCredentials: true
        }).then((res) => {
            ctx.commit('setUser', res.data)//ctx下面存在一个commit方法
        })
    },
}

你可能会多使用modules多套一层，但是自己手动加了

最终挂载

vite-vue\src\main.js
1
2
3
4
5
6
7
8
9
10
11
12
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "./router/index.js";
import store from './store';
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')
一些准则

个人文件资源设计代码风格的一些设定

utils 文件夹通常用于存放与功能无关的通用工具函数，比如日期处理、字符串处理、HTTP 请求等。这些函数可以被项目中的多个组件或模块共享使用。

shared 文件夹通常用于存放与项目特定功能相关的共享代码，比如自定义的表单验证规则、数据处理逻辑等。这些代码在整个项目中需要重复使用，并且与项目的特定功能紧密相关。

assets一般静态资源文件的存储位置

static 打包之后assets会被处理到static有压缩的，如果不想被处理，可以先放在这里

快来参与讨论吧~

博客近期分类标签归档
笔记Vue学习笔记Django学习笔记MySQL学习笔记
社交友链留言板
更多关于本站GitHubGitee

本破站由 @BXZDYG 使用 Stellar 主题创建。
本博客部分素材来源于网络，如有侵权请联系1476341845@qq.com删除
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

本"页面"访问 次 | 👀总访问 次 | 总访客 人
全部都是博主用心学编写的啊！不是ai啊 只要保留原作者姓名并在基于原作创作的新作品适用同类型的许可协议，即可基于非商业目的对原作重新编排、改编或者再创作。