vite搭建vue3、typeScript项目
采用vite搭建vue3+ts+element-plus项目
使用vite搭建vue3、typeScript项目的具体步骤：
一、创建项目vite
1.逐步操作：
① 使用npm：npm create vite@latest
② 使用yarn：yarn create vite
③ 使用pnpm：pnpm create vite
2.直接创建middleground-login为项目名称
1.运行：npm create vite@latest middleground-login -- --template vue其中
2.选择vue —— vue-ts
3.按照提示进行操作：
①cd 项目名
②npm install
③npm run dev
3.安装指定vite版本
npm init vite@2.9.5 middleground-login
4.完成项目创建，运行效果：
二、细节配置
1.①配置tsconfig.json
添加配置@，通过@代表src
"paths": {
"@/*": [
"./src/*"
]
},
②同时在vite.config.ts文件中配置@：
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
1.配置路由：
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;
2.修改App.vue,编辑路由出口
<template>
<!-- 测试 -->
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
</template>
3.在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')
此时，通过对应的路由即可访问页面。
三、配置UI库
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>Default</el-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
如果显示网络连接有问题：
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz: connect ETIMEDOUT 104.16.24.34:443".
见：五、遇到的问题
在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
3.安装autoprefixer报错
解决办法：
1、先查看是否切换淘宝镜像：
①设置为淘宝镜像
npm config set registry https://registry.npm.taobao.org/
yarn config set registry https://registry.npm.taobao.org/
②查看当前镜像
npm get registry
yarn config get registry
2、淘宝镜像下还是不行的话，执行以下方法：
①删除项目下yarn.lock文件：
②重新安装依赖：
npm install
yarn install
③再次安装，就成功了
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献6条内容
所有评论(0)