这是我的第一篇掘金博客，开启掘金写作之路。

初始化项目

node版本: v16.13.1
npm版本: 8.1.2

选择一个文件目录，执行下边这个命令即可快速创建一个名称为vue-three-admin的Vue3项目

npm init vite@latest vue-three-admin -- --template vue

此处可能会提示是否install create-vite@latest,输入y
进入到对应的目录，执行以下命令install,启动项目

yarn
yarn dev

等待控制台输出 ready in x m,访问http://127.0.0.1:3000出现Hello Vue 3 + Vite代表项目初始化成功,效果如下

企业微信截图_16408610698830.png

设置项目编码规范

使用vscode打开项目,并去插件市场中寻找 Prettier - Code formatter 插件和Vue Language Features (Volar)插件并安装
在package.json文件里的devDependencies配置中添加"prettier": "^2.5.1"(这里最后会贴出所有的package.json)
在项目根文件下添加.prettierrc文件,内容如下

{
    "printWidth": 100,
    "tabWidth": 2,
    "useTabs": false,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none",
    "bracketSpacing": true
}

printWidth:超过这个值会换行;tabWidth:缩进字节数;useTabs:缩进不使用tab,使用空格;singleQuote:使用单引号代替双引号; semi:句尾不添加分号;trailingComma:在对象或数组最后一个元素后面不加逗号;bracketSpacing:在对象，数组括号与文字之间加空格 "{ foo: bar }" 这里可以按照个人喜好设置,其他的配置项我都使用的默认配置,如果想要了解其他的配置项,建议百度一下 4. 停止项目,执行yarn下载依赖,在VsCode中选择使用Prettier默认格式化,运行自动格式化快捷键,此时就是按照Prettier来格式化的(建议设置VsCode默认保存时自动格式化)

TS和sass引入

ts:不多解释,用就完事了
sass:css预处理
sass-loader:sass load

在package.json文件里的devDependencies配置中添加

"sass": "^1.45.0",
"sass-loader": "^8.0.2",
"typescript": "~4.5.4"

在根目录下添加文件tsconfig.json内容如下

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "isolatedModules": false,
        "jsx": "preserve",
        "importHelpers": true,
        "strict": true,
        "skipLibCheck": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "noImplicitAny": false,
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ],
        "types": [
            "vite/client"
        ]
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx",
        "src/main.ts"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

将main.js改为main.ts,修改index.html里的main.js为main.ts,此时会在import App处报错.解决的方法是在src下新建 shims.d.ts文件,内容如下

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare global {
  interface ImportMeta {
    env: Record<string, unknown>
  }
}

将vite.config.js改为vite.config.ts,内容如下

import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default ({ mode }) => {
  return {
    plugins: [vue()]
  }
}

执行yarn下载依赖
将所有的<script setup></script> 添加lang="ts"变为<script setup lang="ts"></script>

多环境模式

现在项目基本架子搭建的差不多了,在进行前端开发的时候,开发、测试、生产调用的接口往往是不同的,所以此处集成多环境模式

在根目录下创建 .env.dev文件和 .env.prod文件,分别代表开发、测试环境,文件内容如下,注意这里边的变量需要已VITE_开头

.env.dev

# dev环境
VITE_PROJECT_ENV = 'dev'
# 基本请求路径
VITE_BASE_API_URL = 'http://127.0.0.1:9999'

.env.prod

# prod环境
VITE_PROJECT_ENV = 'prod'
# 基本请求路径
VITE_BASE_API_URL = 'http://127.0.0.1:8080'

在package.json修改scripts里的dev命令为vite --force --mode dev,新建prod命令"prod": "vite --mode prod"
在App.vue中打印当前请求路径,在script中添加代码console.log(import.meta.env.VITE_BASE_API_URL)
执行yarn dev,控制台显示对应的基本请求路径
欢迎关注我的掘金账号:juejin.cn/user/261290…
欢迎star我的git项目:gitee.com/liangminghu…
下期预告:集成element-plus

Vue3+Vite+TypeScript多环境项目搭建

初始化项目

设置项目编码规范

TS和sass引入

多环境模式