使用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新特性简单介绍
- 模板变更,使用vite创建的vue模板主题与vite官网保持一致,logo也从vue换成了vite,主题也支持亮色和暗色模式
import.meta.glob API
,import.meta.globAPI
可以动态的导入文件,在Vite3中允许import.meta.glob
被重写,了解更多可以去翻阅官网- 兼容性做了调整,最低支持node14.18+
- 优化,Vite3修复了400+issuse,减少了体积,冷启动得到优化
WebSocket
连接策略,Vite内置了一套更加完善的WebSocket
连接策略,它能够自动满足更多场景的HMR
需求- cli的更新,现在执行vite3命令进行启动项目时,终端的界面展示和之前的不同,默认的端口号也从之前的3000变成了5173
- 修复一些已知的问题…
这里只是简单做个描述,更多更详细请自己去看官方文档,我们这篇文章重点不在这,而且别人总结的不一定就是最适合自己的也不一定就是正确的,那我们继续往下走搭建起来
搭建项目
使用命令行进行操作:
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
在页面中使用时需要先引入