Vite2构建Vue3项目

环境：node.js 版本>=12.0.0; npm 6.x。

注：每做一步，都要查看有木有错，或是否有达到预期效果。

1. 搭建

npm init @vitejs/app vite-vue-demo --template vue
cd vite-vue-demo
npm i
npm run dev

 2. 配置 vite.config.js

import { defineConfig } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";

// defineConfig有代码提示
export default defineConfig({
    resolve: {
        alias: { // 别名
            "@": path.resolve(__dirname, "src"),
            "styles": path.resolve(__dirname, "src/styles"),
            "views": path.resolve(__dirname, "src/views"),
            "comps": path.resolve(__dirname, "src/components"),
            "plugins": path.resolve(__dirname, "src/plugins"),
            "utils": path.resolve(__dirname, "src/utils"),
        }
    },
    plugins: [vue()]
});

3. 样式管理

npm i sass -D

src目录下新建styles/index.scss，作为全局样式的出口文件，在main.js中导入。

import { createApp } from "vue";
import App from "./App.vue";

// 全局样式导入
import 'styles/index.scss'

createApp(App).mount("#app");

在App.vue中所书写的样式和重置样式就可以放在index.scss文件中了。

另外，引入element ui库时会涉及到样式覆置；有全局样式时，则在styles目录下新建element-ui.scss，在index.scss中引入。

@import './element-ui.scss'

4. element ui库

npm i element3 -S

一般在上线项目中不建议全局引入。 

/**
* main.js中全局引入element3
*/
import { createApp } from "vue";
import App from "./App.vue";

import element3 from 'element3';
import 'element3/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(element3);
app.mount("#app");

建议按需引入▲。

/**
* src目录下，plugins/element3.js
*/
import { ElButton, input } from 'element3'
import 'element3/lib/theme-chalk/button.css'
import 'element3/lib/theme-chalk/input.css'

export default function(app){
    app.use(ElButton)
    app.use(input)
}

/**
* main.js导入element3
*/
import element3 from '@/plugins/element3.js';

app.use(element3);

5. 路由 router

npm i vue-router@4 -S

/**
* src目录下，router/index.js
* v4.x写法（看官方文档）
*/
import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        path: "/",
        // 动态导入的模块
        component: () => import("views/home.vue"),
    },
];

// 工厂函数创建router实例
const router = createRouter({
	history: createWebHistory(),
    routes,
});

export default router;

 另外，src目录下新建views/home.vue，内容随意。

  注：路由数组导入的组件不能省略.vue后缀。

/**
* main.js导入router
*/
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index"; // 这里的router为插件

const app = createApp(App);
app.use(router);
app.mount("#app");

接着，App.vue可以删减成这个样子了。

6. vuex4

npm i vuex@4 -S

/**
* src目录下，store/index.js
*/
import { createStore } from 'vuex';

export default createStore({
    state: {
        counter: 0,
    },
    mutations: {
        add(state){
            state.counter++;
        }
    }
});

/**
* main.js导入store/index.js
*/
import store from './store/index';

app.use(store);

7. mock模拟后台数据

npm i mockjs -S
npm i vite-plugin-mock -D

/**
* vite.config.js
*/
import vue from "@vitejs/plugin-vue";
import path from "path";
import { viteMockServe } from 'vite-plugin-mock';

export default ({ command }) => {
  let proMock = true

  return {
    resolve: {
      alias: { // 别名
        "@": path.resolve(__dirname, "src"),
        "styles": path.resolve(__dirname, "src/styles"),
        "views": path.resolve(__dirname, "src/views"),
        "comps": path.resolve(__dirname, "src/components"),
        "plugins": path.resolve(__dirname, "src/plugins"),
        "utils": path.resolve(__dirname, "src/utils"),
      }
    },
    plugins: [
      vue(),

      viteMockServe({
        // default
        mockPath: 'mock',
        // localEnabled: command === 'serve',
        // prodEnabled: command !== 'serve' && prodMock,
        // injectCode: `
        //   import { setupProdMockServer } from './mockProdServer';
        //   setupProdMockServer();
        // `,
      }),

      // 如若报错 Unrestricted file system access to
      // serve: {
      //  fs: {
      //      strict: false
      //  }
      }
    ]
  }
};

/**
* 项目目录下，mock/test.js
*/
export default [
    {
        url: "/api/get",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "success",
                data: { name: "vben" }
            }
        }
    },
];

8. axios

npm i axios -S

/**
* src目录下，utils/request.js
* 这里只作简单配置
* 在这个文件中可根据后台返回的状态作出相应的处理
*/
import axios from "axios";

const service = axios.create({
    baseURL: "",
    timeout: 5000
});

service.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) => {
        console.log(error);
    }
);

service.interceptors.response.use(
    (response) => {
        const res = response.data;
        return res;
    },
    (error) => {
        console.log(error);
    }
);

export default service;

/**
* src目录下，apis/index.js
* 统一管理
*/
import $axios from "utils/request";

export const getUsers = () => {
    return $axios("/api/get");
}

ps：文中步骤或描述若有错误之处，烦请留言指正。