vue3杂记 - 技术栈

vue3杂记

nece0012026-01-12 19:06

环境配置（使用vite创建的项目）

使用哪种环境，是由package.json中的命令脚本中的 --mode 选项决定的。

1.在项目根目录添加.env文件，如：

.env # 这个文件名默认是用于开发环境，npm run dev 时会加载
.env.test # 测试环境
.env.prod # 生产环境

文件内容示例：

复制代码

VITE_API_URL = http://localhost:8081
VITE_ACCESSKEY = 123456
MY_PASSWORD = 123456 # 这一个不会被加载

环境变量名必须以"VITE_"开头的才会被加载。

2.修改package.json，定义要运行的命令：

复制代码

{
  
  "scripts": {
    "dev": "vite",
    "test": "vite --mode test", # 指定model是test，则会加载.env.test
    "build:prod": "vue-tsc -b && vite build --mode prod", # 指定model为prod，则会加载.env.prod
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
}

控制台中运行命令：

npm run dev # 将加载.env文件
npm run test # 将加载.env.test文件
npm run build # 将加载.env文件进行打包
npm run build:prod # 将加载.env.prod文件进行打包

3.代码中使用：

复制代码

const apiBaseUrl = import.meta.env.VITE_API_URL

常用的插件安装

创建vue3项目：npm create vue@latest
安装路由插件：npm i vue-router
pinia集中状态(数据)管理：npm install pinia
pinia持久化组件：npm install pinia-plugin-persistedstate
安装 uuid 或 nanoid 生成ID：npm install nanoid
安装axios：npm install axios
安装 element plus ： npm i element-plus
安装图标：npm install @element-plus/icons-vue

使用@定义为src目录：

1.在文件中添加（添加了vue3运行时才能识别）：

复制代码

import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

2.在文件tsconfig.app.json中添加（添加了vscode才能识别路径）：

复制代码

"compilerOptions": {

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }

  }