Vue 3 + Typescript + Vite

(摸鱼试试新的好玩的,仅框架搭建)

• 项目地址

升级 node 版本到最新稳定版(Vite 构建工具 Node.js 版本>= 12.0.0)

• 个人使用的第二种,需要的时候自己切换版本，本身Node.js 版本>= 12.0.0可跳过
• 方法一:nvm install stable使用 nvm 安装最新稳定版 Node.js
• 方法二:
  • github 搜索 Kenshin/gnvm,下载 gnvm.exe 放在 nodejs 文件夹(找不到就 cmd 命令行窗口输入where node会出现 nodejs 路径)下,gnvm update latest,等待更新(下载慢需要多等一会儿)
  • gnvm ls查看当前安装的所有 Node 版本
  • gnvm use 版本号切换到指定版本
  • npm -g install npm 升级 npm

Vite 初始化项目

• npm init @vitejs/app vite-vue3-test 初始化 vite 项目选择 vue 继续选择 vue-ts
• 使用模板初始化 Vite + Vue3 + TypeScript 项目
  • npm6+npm init @vitejs/app vite-vue3-starter --template vue-ts
  • npm7+npm init @vitejs/app vite-vue3-starter -- --template vue-ts
• cd vite-vue3-test进入项目目录npm i安装依赖
• 配置vite.config.ts文件,设置@指向 src 目录(tsconfig.json也需加)、服务启动端口、打包路径、代理、全局scss变量等

      export default defineConfig(({ mode }: UserConfig): UserConfig => {
      return {
          plugins: [
              vue(),
              styleImport({
                  // 注意 styleImport 这个名字不能改
                  libs: [
                      {
                          libraryName: 'element-plus',
                          esModule: true,
                          ensureStyleFile: true,
                          resolveStyle: (name) => {
                              name = name.slice(3);
                              return `element-plus/packages/theme-chalk/src/${name}.scss`;
                          },
                          resolveComponent: (name) => {
                              return `element-plus/lib/${name}`;
                          },
                      },
                  ],
              }),
              vitePluginImport([
                  {
                      libraryName: 'element-plus',
                      libraryDirectory: 'es',
                      style(name) {
                          return `element-plus/lib/theme-chalk/${name}.css`;
                      },
                      ignoreStyles: [],
                  },
              ]),
          ],
          resolve: {
              alias: {
                  '@': resolve(__dirname, 'src'),
              },
          },
  
          // css预设配置
          css: {
              preprocessorOptions: {
                  scss: {
                      // 注意：全局变量,只能写相对路径,全局scss变量
                      additionalData: "@import'./src/styles/variable.scss';",
                  },
              },
          },
  
          base: './', // 设置打包路径
          server: {
              port: 8090, // 设置服务启动端口号
              open: true, // 设置服务启动时是否自动打开浏览器
              cors: true, // 允许跨域
              https: false, // 是否开启 https
              // 设置代理，根据项目实际情况配置
              // proxy: {
              //   '/api': {
              //     target: 'http://xxx.xxx.xxx.xxx:8000',
              //     changeOrigin: true,
              //     secure: false,
              //     rewrite: (path) => path.replace('/api/', '/')
              //   }
              // }
          },
          optimizeDeps: {
              include: [
                  'element-plus',
                  'element-plus/lib/locale/lang/zh-cn',
                  'dayjs/locale/zh-cn',
              ],
          },
          build: {
              // 压缩
              minify: 'esbuild',
              assetsDir: '',
              outDir: `./dist`,
          },
      };
  });
  

• 安装支持 Vue3 的路由工具npm i vue-router@4,创建 src/router/index.ts 文件设置基础路由并在 main.ts 下挂载路由

  import router from './router/index';
  createApp(App).use(router).mount('#app');
  

• npm i vuex@next集成状态管理工具 Vuex,创建 src/store/index.ts 文件并在 main.ts 文件中挂载 Vuex 配置

  import store from './store/index';
  createApp(App).use(router).use(store).mount('#app');
  

• npm i element-plus安装支持 Vue3 的 UI 框架 Element Plus并在 main.ts 文件中挂载 Element Plus

  import ElementPlus from 'element-plus'
  import 'element-plus/lib/theme-chalk/index.css'
  createApp(App).use(router).use(store).use(ElementPlus).mount('#app');
  //如按需引入npm install vite-plugin-style-import -D 在vite.config.ts中配置并按需引入即可
  import {
      ElAlert,
      ElAside,
      ElAutocomplete,
      ElAvatar,
      ElBacktop,
      ElBadge,
      ElBreadcrumb,
      ElBreadcrumbItem,
      ElButton,
      ElButtonGroup,
      ElCalendar,
      ElCard,
      ElCarousel,
      ElCarouselItem,
      ElCascader,
      ElCascaderPanel,
      ElCheckbox,
      ElCheckboxButton,
      ElCheckboxGroup,
      ElCol,
      ElCollapse,
      ElCollapseItem,
      ElCollapseTransition,
      ElColorPicker,
      ElContainer,
      ElDatePicker,
      ElDialog,
      ElDivider,
      ElDrawer,
      ElDropdown,
      ElDropdownItem,
      ElDropdownMenu,
      ElFooter,
      ElForm,
      ElFormItem,
      ElHeader,
      ElIcon,
      ElImage,
      ElInput,
      ElInputNumber,
      ElLink,
      ElMain,
      ElMenu,
      ElMenuItem,
      ElMenuItemGroup,
      ElOption,
      ElOptionGroup,
      ElPageHeader,
      ElPagination,
      ElPopconfirm,
      ElPopover,
      ElPopper,
      ElProgress,
      ElRadio,
      ElRadioButton,
      ElRadioGroup,
      ElRate,
      ElRow,
      ElScrollbar,
      ElSelect,
      ElSlider,
      ElStep,
      ElSteps,
      ElSubmenu,
      ElSwitch,
      ElTabPane,
      ElTable,
      ElTableColumn,
      ElTabs,
      ElTag,
      ElTimePicker,
      ElTimeSelect,
      ElTimeline,
      ElTimelineItem,
      ElTooltip,
      ElTransfer,
      ElTree,
      ElUpload,
      ElInfiniteScroll,
      ElLoading,
      ElMessage,
      ElMessageBox,
      ElNotification,
  } from 'element-plus';
  
  const components = [
      ElAlert,
      ElAside,
      ElAutocomplete,
      ElAvatar,
      ElBacktop,
      ElBadge,
      ElBreadcrumb,
      ElBreadcrumbItem,
      ElButton,
      ElButtonGroup,
      ElCalendar,
      ElCard,
      ElCarousel,
      ElCarouselItem,
      ElCascader,
      ElCascaderPanel,
      ElCheckbox,
      ElCheckboxButton,
      ElCheckboxGroup,
      ElCol,
      ElCollapse,
      ElCollapseItem,
      ElCollapseTransition,
      ElColorPicker,
      ElContainer,
      ElDatePicker,
      ElDialog,
      ElDivider,
      ElDrawer,
      ElDropdown,
      ElDropdownItem,
      ElDropdownMenu,
      ElFooter,
      ElForm,
      ElFormItem,
      ElHeader,
      ElIcon,
      ElImage,
      ElInput,
      ElInputNumber,
      ElLink,
      ElMain,
      ElMenu,
      ElMenuItem,
      ElMenuItemGroup,
      ElOption,
      ElOptionGroup,
      ElPageHeader,
      ElPagination,
      ElPopconfirm,
      ElPopover,
      ElPopper,
      ElProgress,
      ElRadio,
      ElRadioButton,
      ElRadioGroup,
      ElRate,
      ElRow,
      ElScrollbar,
      ElSelect,
      ElSlider,
      ElStep,
      ElSteps,
      ElSubmenu,
      ElSwitch,
      ElTabPane,
      ElTable,
      ElTableColumn,
      ElTabs,
      ElTag,
      ElTimePicker,
      ElTimeSelect,
      ElTimeline,
      ElTimelineItem,
      ElTooltip,
      ElTransfer,
      ElTree,
      ElUpload,
  ];
  
  const plugins = [
      ElInfiniteScroll,
      ElLoading,
      ElMessage,
      ElMessageBox,
      ElNotification,
  ];
  const app = createApp(App);
  
  components.forEach((component) => {
      app.component(component.name, component);
  });
  
  plugins.forEach((plugin) => {
      app.use(plugin);
  });
  app.mount('#app');
  

• npm i axios集成 HTTP 工具 Axios,在 src 下创建 utils 目录来存储我们常用的工具函数,在utils下新建api/request.ts文件,配置Axios前置/后置拦截器
• npm i @types/lodash lodash 安装loadsh方便处理字符串、数组、对象,并在untils中单独封装补充自己常用的函数(underscore/ramda也可以,看个人代码习惯,更推荐ramda因为它几乎所有的函数都是自动柯里化的(原因),我把常用的lodash的和ramda里的方法挂载到原型链上封装然后自己发了个npm包装进去了npm i person-fun-tool,懒人快乐包get!)
• npm i dayjs 安装时间处理库并引入(moment也行就是有点大,看个人习惯)
• npm i bignumber.js安装精度计算库并引入用于数据计算处理
• 更多…
• 备注：这里因为做移动端的项目比较多，app用的ionic而vite暂不支持ionic所以未应用到实际项目，实际项目中若需要采用vue3写法可以尝试使用vue-demi升级现有项目，同时支持vue2，vue3也算是很香了