使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架

使用vue3 + vite + elementPlus搭建一个项目脚手架

这篇文章就教大家如何使用vue3+vite+ts+element-plus搭建一个项目，步骤详细，献给不爱看文档的诸位，希望这篇文章能帮到你们

环境

• node环境，vite需要node版本>=12.0.0;node官网(https://nodejs.org/zh-cn/download/)，node环境的安装和配置就不做追叙了，自己看着整。
• vue版本，我这边装的是@vue/cli 5.0.8 版本；同样的vue的安装不多做缀叙。

vite3新特性简单介绍

1. 模板变更，使用vite创建的vue模板主题与vite官网保持一致，logo也从vue换成了vite，主题也支持亮色和暗色模式
2. import.meta.glob API，import.meta.globAPI可以动态的导入文件，在Vite3中允许import.meta.glob被重写，了解更多可以去翻阅官网
3. 兼容性做了调整，最低支持node14.18+
4. 优化，Vite3修复了400+issuse，减少了体积，冷启动得到优化
5. WebSocket连接策略，Vite内置了一套更加完善的WebSocket连接策略，它能够自动满足更多场景的HMR需求
6. cli的更新，现在执行vite3命令进行启动项目时，终端的界面展示和之前的不同，默认的端口号也从之前的3000变成了5173
7. 修复一些已知的问题…

这里只是简单做个描述，更多更详细请自己去看官方文档，我们这篇文章重点不在这，而且别人总结的不一定就是最适合自己的也不一定就是正确的，那我们继续往下走搭建起来

搭建项目

使用命令行进行操作：

npm init vite@latest <project-name>
framework 选择 vue
variant 选择 vue-ts
cd <project-name>
npm i
npm run dev

或者使用yarn的

yarn create vite@latest <project-name>
cd <project-name>
yarn
yarn dev

这里我使用npm init vite@latest 的方式搭建项目

选择项目框架，这里我选择的vue

这里我选择的是typeScript

然后根据提示的步骤依次执行命令

然后就启动起来了，得到如下的页面

这样就可以写代码做需求了吗？当然还不行，你还需要下载引入项目需要的依赖vue-router，vuex，axios，element-plus等等的依赖，并且根据自己项目实际情况修改一下配置文件。

配置文件

我们按照上面步骤创建完项目会发现根目录下有个vite.config.ts文件，其实就相当于@vue-cli项目中的vue.config.js文件。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// @ts-ignore
import path from 'path';

const pathResolve = (pathStr:String) => {
  // @ts-ignore
  return path.resolve(__dirname, pathStr);
}

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [vue()],
  server: {
    host: '0.0.0.0', // 本地启动的地址
    port: 3000, // 服务端口号
    proxy: { // 代理配置
      '/api/': {
        target: 'http:xxx.xxx.xx.x',
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
  },
  resolve: {
    alias: {
      '@': pathResolve('./src'),
    }
  },
  build: {
    sourcemap: false,
    minify: 'esbuild', // 构建时的压缩方式
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]',
      }
    }
  }
})

在根目录下会有一个tsconfig.json文件，tsconfig.json文件是 TypeScript 编译器的配置文件，TypeScript 编译器可以根据它的规则来对代码进行编译。

{
  "compilerOptions": {
    "target": "ESNext", // 指定ECMAScript的目标版本：'ES3'(默认),'ES5','ES2015','ES2016','ES2017','ES2018','ES2019','ES2020'或者'ESNEXT'
    "useDefineForClassFields": true, // 此标志用作迁移到即将推出的类字段标准版本的一部分，默认：false
    "module": "ESNext", // 指定模块代码生成:'none','commonjs','amd','system','umd','es2015','es2020',或'ESNext'
    "moduleResolution": "Node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入，node或classic
    "strict": true, // 是否启用所有严格的类型检查
    "jsx": "preserve", // 指定 jsx 格式
    "sourceMap": true, // 生成目标文件的sourceMap文件
    "resolveJsonModule": true, // 是否解析 JSON 模块，默认：false
    "isolatedModules": true, // 是否将每个文件转换为单独的模块，默认：false
    "esModuleInterop": true, // 通过为所有导入创建名称空间对象，实现CommonJS和ES模块之间的互操作性
    "allowJs": true, // 允许编译器编译JS，JSX文件
    "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
    "lib": ["ESNext", "DOM"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array"
    "skipLibCheck": true, // 跳过声明文件的类型检查
    // "types": ["element-plus/global"] // 加载的声明文件包
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], // 指定被编译文件所在目录，** 表示任意目录， * 表示任意文件
  "references": [{ "path": "./tsconfig.node.json" }] // 项目引用，是 TS 3.0 中的一项新功能，它允许将 TS 程序组织成更小的部分
}

安装Element Plus

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus

完整引入（不推荐）

在main.ts文件中引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

按需引入

element-plus官方贴心的推出了自动导入，我们需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

# 选择一个你喜欢的包管理器

# NPM
$ npm install -D unplugin-vue-components unplugin-auto-import
# Yarn
$ yarn add -D unplugin-vue-components unplugin-auto-import
# pnpm
$ pnpm install unplugin-vue-components unplugin-auto-import

装好之后再回到vite.config.ts文件中，添加图中代码

知道你们不爱看图敲代码

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

这样我们就可以直接在项目中直接使用element-plus的组件了


element-plus更多的组件使用请参考Element Plus官方文档

需要注意的是element-plus的icon使用

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

在页面中使用时需要先引入

本次内容就到此结束了，下一期我们就用这个架子二次封装一个后台管理系统的框架吧！