使用vite搭建vue3、typeScript项目的具体步骤:
1.使用npm:npm create vite@latest
2.使用yarn:yarn create vite
3.使用pnpm:pnpm create vite
直接创建middleground-login为项目名称
1.运行:npm create vite@latest middleground-login -- --template vue
其中
2.选择vue —— vue-ts
3.按照提示进行操作:
①cd 项目名
②npm install
③npm run dev
4.完成项目创建,运行效果:
1.①配置tsconfig.json
添加配置@,通过@代表src
"paths": {
"@/*": [
"./src/*"
]
},
import { defineConfig, ConfigEnv, UserConfigExport, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default (({ command, mode }: ConfigEnv): UserConfigExport => {
// 环境变量
let env = loadEnv(mode, process.cwd())
// 是否为生产环境
let isProduction = mode === 'production'
return defineConfig({
base: env.VITE_BASE,
plugins: [
vue(),
],
css: {},
resolve: {
alias: {
'@': '/src'
}
},
server: {
// host设置为true才可以使用network的形式,以ip访问项目
host: true,
// 端口号
port: 8080,
// 自动打开浏览器
open: false,
// 跨域设置允许
cors: true,
// 如果端口已占用直接退出
strictPort: true,
// 接口代理
proxy: {
'/workwxht': {
target: 'http://192.168.1.101:9001',
// 允许跨域
changeOrigin: true,
// 重写地址
rewrite: (path) => path.replace('/workwxht/', '/')
}
}
},
build: {
brotliSize: false,
// 消除打包大小超过500kb警告
chunkSizeWarningLimit: 500,
// 在生产环境移除console.log
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
},
},
assetsDir: 'static/assets',
// 静态资源打包到dist下的不同目录
rollupOptions: {
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
// 静态资源分拆打包
manualChunks(id: any) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
},
},
},
define: {
'process.env': { ...env, isProduction }
}
})
})
// export default defineConfig({
// plugins: [vue()]
// })
2.安装vue-router配置路由:
npm i vue-router -S
配置路由:
createWebHistory 可以理解为history模式,路径不带#
createWebHashHistory可以理解为hash模式,路径带#
import {
createRouter, createWebHistory
} from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{
name: 'ceshi',
path: '/ceshi',
component: () => import("@/views/ceshi/index.vue"),
meta: {
title: '测试'
}
}
]
})
export default router;
修改App.vue,编辑路由出口
<template>
<!-- 测试 -->
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
</template>
在main.ts中配置路由
import { createApp } from 'vue'
import App from './App.vue'
// 路由
import $router from './router'
// createApp(App).mount('#app')
const app = createApp(App)
app.use($router)
app.mount('#app')
此时,通过对应的路由即可访问页面。
1.引入
element-plus:npm install element-plus --save
设置成官方推荐的自动引入方式:
安装unplugin-vue-components
和 unplugin-auto-import
这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
2.在vite.config.ts中配置自动导入:
// 自动导入引用
import AutoImport from "unplugin-auto-import/vite"
// 自动导入组件
import Components from 'unplugin-vue-components/vite'
// element plus
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
plugins: [
vue(),
AutoImport({
dts: './src/auto-imports.d.ts',
imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
// Generate corresponding .eslintrc-auto-import.json file.
// eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
eslintrc: {
// Default `false`
enabled: true,
// Default `./.eslintrc-auto-import.json`
filepath: './.eslintrc-auto-import.json',
// Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
globalsPropValue: true,
},
resolvers: [ElementPlusResolver()],
}),
Components({
dts: './src/components.d.ts',
// imports 指定组件所在位置,默认为 src/components
dirs: ['src/components/'],
resolvers: [ElementPlusResolver()],
}),
],
配置完成之后,可以直接在页面使用:
<template>
<el-button>Defaultel-button>
template>
1.安装axios:
npm i axios -S 或 yarn add axios -S
2.安装sass:
npm i sass -S 或 yarn add sass -S
3.安装pinia:
npm i pinia-S 或 yarn add pinia -S
4.安装Autoprefixer
自动添加前缀
yarn add autoprefixer -D
yarn add postcss-flexbugs-fixes -D
在vite.config.ts文件中添加配置:
import Autoprefixer from 'autoprefixer'
import PostcssFlexbugsFixes from 'postcss-flexbugs-fixes'
export default defineConfig({
...
...
css: {
postcss: {
plugins: [
Autoprefixer({
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8',
'> 1%'
],
grid: true
}),
PostcssFlexbugsFixes()
],
}
},
...
...
})
5.安装vconsole便于移动端调试:
npm i vconsole -S 或 yarn add vconsole -S
在main.ts文件中加上如下配置:
// 调试
import VConsole from 'vconsole'
let vConsole = new VConsole();
export default vConsole;
1.打包不成功:提示 Property 'code' does not exist on type '{}'
解决办法:打开package.json文件,将"build": "vue-tsc --noEmit && vite build"
改为:build": "vite build"
即可。
2.打包报错: terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.
解决办法:安装terser
npm i terser --legacy-peer-deps 或 yarn add terser --legacy-peer-deps