为什么选择搭建Vue3时不使用Typescript?

在项目开发中，会经常碰到对定义变量类型很困难的小伙伴，哪怕在TS的项目中也会经常发现，使用的变量或者方法返回没有定义类型，基本也就是仅使用了TS的外壳，并没有使用TS的精华，所以搭建了一个JS语言的vue3版本脚手架，可以直接下载使用，

详细demo代码

1、首先是搭建一个vue3的框架，使用javascript语言

npm create vite

vite版本若是最新的版本，则要求node版本在18以上，所以使用的vite版本是^4.3.9

选择vue

选择javascript语言

cd vue3-demo
npm intall 或 yarn
npm run dev 或 yarn dev

2、项目中引入vue-router和pinia

2.1在src文件夹里新建router文件夹，并在里面新增index.js文件

import { createRouter, createWebHashHistory } from 'vue-router';
import indexRoute from './module';
const Router = createRouter({
  history: createWebHashHistory(),
  strict: true,
  routes: [...indexRoute],
  scrollBehavior: () => ({ left: 0, top: 0 }),
});
export default Router;

2.1.1 在router文件夹下新建module文件夹，并新建index.js文件

const indexRouters = [
  {
    path: '/login',
    name: 'login',
    component: () => import('/@/views/sys/login/login.vue'),
    meta: {
      title: '登录',
      keepAlive: false,
    },
  },
];

export default indexRouters;

2.2 在src文件夹里新建store文件夹，并在里面新增index.js文件

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const store = createPinia();
store.use(piniaPluginPersistedstate);

export default store;

2.2.1 在store文件夹下新建module文件夹，并新建index.js文件

import { defineStore } from 'pinia';
const useStoreOut = defineStore('user', {
    state: () => ({
        token: '',
      }),
    getters: {
        getLoginToken() {
          return this.token;
        },
    },
    actions: {
        setLoginToken(data) {
          this.token = data || '';
        },
    }
})
export default useStoreOut;

3、项目中按需引入ant-design-vue，同时引入less预编译器

  import('ant-design-vue/dist/antd.css');

    "less": "^4.1.3",
    "less-loader": "^11.1.3",
    "ant-design-vue": "^3.2.20",

4、配置vite.config.js,因为项目中使用了process.env.NODE_ENV所以在配置中配置了

    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    import { resolve } from 'path';
    import { loadEnv } from 'vite';
    export default defineConfig((mode, command) => {
      const env = loadEnv(mode.mode, process.cwd(), '');
      return {
          plugins: [vue()],
          root: process.cwd(),
          define: {
              'process.env': env,
              __INTLIFY_PROD_DEVTOOLS__: false,
              FEATURE_FLAG: true,
           },
           resolve: {
               alias: [
                  {
                    find: '/@', // 配置访问相对路径
                    replacement: resolve(__dirname, '/src'),
                  },
                ],
           },
           server: {
               host: '0.0.0.0', //  Listening on all local IPs
               port:'8080',
               proxy:{ // 本地项目需要请求线上接口，可以在此配置代理
                '/auth': {
                      target: 'https://example.com', //接口域名
                      changeOrigin: true, //是否跨域
                      rewrite: (path) => path.replace(/^\/auth/, ''),
                    },
               }
           },
            css: { // 本地要配置一些公共样式，可以在此公共引入
              preprocessorOptions: {
                less: {
                  additionalData: `
                      @import "${resolve(__dirname, '/@/assets/css/index.less')}";
                      @import "${resolve(__dirname, '/@/design/index.less')}";
                  `,
                  javascriptEnabled: true,
                },
              },
            },
      }
      
    })