目录
vue3 搭建项目模板 之 初始化项目
创建vue项目 ( js 版本)
npm create vite
npm i // 初始化 项目
prettier的安装配置使用
- package.json之中
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.3",
"vite": "^2.9.9",
"prettier":"^2.2.1"
}
- 目录下新增 .prettierrc 文件
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 120,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false,
"htmlWhitespaceSensitivity": "ignore"
}
- 安装一下包
npm i
vite.config.js 配置 ( 相关环境设置)
- 本地打包配置
- 打包后 部署到本地服务器 查看打包后的效果
import vue from '@vitejs/plugin-vue'
// import path, { resolve } from 'path'
export default ({
command,
mode
}) => {
// console.log("command, mode", command, mode); // 在终端之中 log输出的 command, mode serve development
return {
base: "./", // 打包后的跟路径 - ./ 加.是为为了避免打包后 出现白屏的效果 ( 不推荐写法 )
// 开发环境的 相关配置
server: {
host: '0.0.0.0',
port: 5006, // 类型: number 指定服务器端口;
open: false, // 类型: boolean | string在服务器启动时自动在浏览器中打开应用程序;
},
// preview 状态下的端口相关设置 package.json配置这边 脚步指令 "preview": "vite preview"
// 执行 npm run build指令后打包生成dist 然后运行 npm run preview 在本地起项目 查看打包后的效果 (把dist部署到 本地的服务器上)
preview: {
port: 5006,
host: '0.0.0.0',
strictPort: true
},
plugins: [
vue({})
]
}
}
vite多环境配置
为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码
- .env.serve-dev 开发环境
# 定义环境必须以 VITE_APP_ 开头 开发环境
VITE_APP_ENV = 'dev'
# VITE_APP_BASE_URL = 'https://github.jzfai.top/micro-service-api'
# 需要在package.json文件配置脚步指令 "dev": "vite --mode serve-dev --host",
VITE_APP_BASE_URL = 'dev'
- .env.serve-test 测试环境
#The defined variable must start with VITE_APP_
VITE_APP_ENV = 'test'
# VITE_APP_BASE_URL = 'http://localhost:20156/api'
VITE_APP_BASE_URL = 'test'
- .env.build-test
VITE_APP_ENV = 'test'
#自动获取地址推荐
#VITE_APP_BASE_URL = '/micro-service-api'
VITE_APP_BASE_URL = 'https://github.jzfai.top/micro-service-api'
- .env.build
VITE_APP_ENV = 'prod'
# The defined variable must start with VITE_APP_
VITE_APP_BASE_URL = 'https://github.jzfai.top/micro-service-api'
- package.json 配置
"scripts": {
"dev": "vite --mode serve-dev --host",
"test": "vite --mode serve-test --host",
"build:test": "vite build --mode build-test",
"build": "vite build --mode build",
"preview": "npm run build && vite preview "
},
自动导入插件 ( 基础 )
- package.json
"devDependencies": {
"unplugin-auto-import":"~0.5.11"
}
- 安装依赖
npm i
- 配置
- AutoImport 相关里面都需要手输入,才会自动生成
anto-import.d.ts文件
- AutoImport 相关里面都需要手输入,才会自动生成
import vue from '@vitejs/plugin-vue'
// 引入 自动化引入插件
import AutoImport from "unplugin-auto-import/vite"
export default ({
command,
mode
}) => {
return {
plugins: [
vue({}),
AutoImport({
imports:['vue'],
dts:'src/auto-import.d.ts'
})
]
}
}
- 作用
import { ref } from 'vue' // 原本都需要手动导入 有了自动化导入插件后,则不需要导入,即可使用 ref等
自动引入插件 使用hooks
- hooks / global / useCommon.js ( 定义hooks )
import {
onMounted
} from "vue"
export const useCommonExample = () => {
onMounted(() => {
console.log("导出了useCommonExample");
})
}
// 方便使用的 导出
export const useCommon = useCommonExample
// 默认的导出
export default useCommonExample()
- vite.config.js 配置hooks 的自动挂载
import vue from '@vitejs/plugin-vue'
import path, {
resolve
} from 'path'
// 引入 自动化引入插件
import AutoImport from "unplugin-auto-import/vite"
export default ({
command,
mode
}) => {
return {
base: "./", // 打包后的跟路径 - ./ 加.是为为了避免打包后 出现白屏的效果 ( 不推荐写法 )
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
}
},
plugins: [
vue({}),
AutoImport({
imports: ['vue', {
// 类似于 import { useCommon } from '@/hooks/global/useCommon'
'@/hooks/global/useCommon': ['useCommon']
}],
dts: 'src/auto-import.d.ts'
})
]
}
}
- 使用 hooks App.vue
<template>
<div></div>
</template>
<script setup>
useCommon() // 最后 log打印 导出了useCommonExample
</script>
<style>
</style>
自动引入插件 生成 eslintrc-auto-import.json文件 ( eslint相关的东西)
plugins: [
vue({}),
AutoImport({
imports: ['vue', {
// 类似于 import { useCommon } from '@/hooks/global/useCommon'
'@/hooks/global/useCommon': ['useCommon']
}],
eslintrc: {
enabled: true, // Default `false`
filepath: './.eslintrc-auto-import.json', // 生成eslint自动导入的文件 `./.eslintrc-auto-import.json`
globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
},
dts: 'src/auto-import.d.ts'
})
]