vue3 搭建项目模板 之 初始化项目 （ 别名、hooks、自动引入）

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文件
  • 

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'
      })
    ]