Vue3+Vite+ts 从零开发前端 – 1 – 脚手架搭建

本文最后更新于 297 天前，如有失效请评论区留言。

前言

使用 vue-cli 还是 vite？

vue-cli 在 vue2 的时候构建比较多，针对 vue3，官方团队准们开发了对应的构建工具 vite，势必也是会稳定的支持，所以学习 vite 是必要的，至少知道怎么用

用 JavaScript 还是 TypeScript?

TypeScript 创建之初就是为了开发大型复杂项目的，JavaScript + 更多功能 = TypeScript

我们知道 JavaScript 是一种弱类型的，使用 var 声明变量，无法满足面向对象编程的需求，而 web 开发在现代互联中的地位越来越重要，就是说，责任变大了，但是能力跟不上，所以才诞生了 TypeScript

TypeScript 和 JavaScript 之间的唯一区别是 TypeScript 代码在执行之前被编译成 JavaScript

所以，学习 TypeScript 吧，学一个会两个，稳赚不赔

开发工具选啥

1、新手推荐使用 vscode，开发前端确实很不错的选择，更轻量简单，对 TypeScript 有着很好的内置支持。

2、习惯用 IDEA 系列工具的推荐用 webstorm，不过最好下载2023版本的，2023之前的版本不支持 Volar，开发 vue 项目可能因为无法识别文件类型出现各种错误提示，从 2023.2 版开始，WebStorm 和 Vue 插件内置了对 Vue 语言服务器的支持

初始化项目

vite 构建脚手架，参考官方文档 https://cn.vitejs.dev/guide

npm create vite@latest

最新版 create-vite@5.1.0

有的地方也使用 npm init vite-app 来构建，他两功能类似，官方的可以选择开发语言，所以还是按照官方的来构建项目

项目构建成功之后，进入到项目路径中，
执行下面的命令，安装依赖包

npm install

关于 TypeScript 使用 vue ，官方这里有更完整的说明可以参考 https://cn.vuejs.org/guide/typescript/overview.html

至此一个完整的 Vue 3 + TypeScript + Vite 的项目就创建好了

认识项目结构

package.json

Node.js 项目中使用的标准配置文件，它包含了项目的信息，依赖关系，脚本命令等

name：项目名称
version：项目版本号
description：项目描述
author：作者信息
scripts：项目的脚本命令，如启动项目，打包项目等
dependencies：项目依赖的 npm 包
devDependencies：项目开发时依赖的 npm 包

文件中的 dependencies 和 devDependencies 区别是什么呢？哪些应该放在 dependencies，哪些放在 devDependencies

{
  "name": "test",
  "private": true,
  "author": "test",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vueuse/core": "^10.7.2",
    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.2.1",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5",
    "naive-ui": "^2.37.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "autoprefixer": "^10.4.17",
    "less": "^4.2.0",
    "postcss": "^8.4.35",
    "typescript": "^5.2.2",
    "unocss": "^0.58.5",
    "unplugin-auto-import": "^0.17.5",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.8",
    "vite-plugin-svg-icons": "^2.0.1",
    "vue-tsc": "^1.8.25"
  }
}

上面是一个比较常见依赖的安装，常用的像状态管理 pinia、路由 vue-router、UI框架 naive-ui
等这些是核心依赖，即项目在运行时所依赖的包

devDependencies 这个用于列出在开发过程中所需要的包，像 css 编译相关的 postcss、less，vite 打包工具，还有一些项目使用了 eslint 工具等等，这些在项目开发构建的时候用到的依赖工具，而在运行时不需要的，统一放到 devDependencies 中，减少打包后的体积

tsconfig.json

tsconfig.json 是 TypeScript 编译器的配置文件，具体配置说明如下：

{  
  // TypeScript 编译器的选项  
  "compilerOptions": {  
    // 将代码编译为哪个版本的 ES 标准  
    "target": "ES2020",  
    // 使用 Object.defineProperty 定义 class 中的属性，而非使用 obj.key = value 的形式定义属性  
    "useDefineForClassFields": true,  
    // 使用 ES Module 格式打包编译后的文件  
    "module": "ESNext",  
    // 编译过程中需要引入的库文件的列表，告诉 typescript 编译器可以使用哪些功能  
    "lib": ["ES2020", "DOM", "DOM.Iterable"],  
    // 跳过对 .d.ts 文件的类型检查  
    "skipLibCheck": true,  

    /* Bundler mode */  
    // 模块解析策略,最早只支持两个值：classic 和 node    "moduleResolution": "bundler",  
    // 控制是否允许在 import 语句中导入 .ts 文件扩展名  
    "allowImportingTsExtensions": true,  
    // 防止 ts文件中引入json文件，会报如下红色波浪线  
    "resolveJsonModule": true,  
    // 隔离模块选项  
    "isolatedModules": true,  
    // 是否生成编译后的文件  
    "noEmit": true,  
    // 指定jsx代码用于的开发环境, preserve:生成代码中会保留JSX以供后续的转换操作使用(比如：Babel).另外,输出文件会带有.jsx扩展名  
    "jsx": "preserve",  

    /* Linting */  
    "strict": true,  
    "noUnusedLocals": true,  
    "noUnusedParameters": true,  
    "noFallthroughCasesInSwitch": true  
  },  
  // 指定要包含在编译中的文件或文件夹的匹配模式  
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],  
  // 引入其他文件  
  "references": [{ "path": "./tsconfig.node.json" }]  
}

tsconfig.node.json

关于为何使用两个 tsconfig 配置文件，stackoverflow 中解释如下 https://stackoverflow.com/questions/72027949/why-does-vite-create-two-typescript-config-files-tsconfig-json-and-tsconfig-nod

您需要两个不同的TS配置，因为该项目在执行TypeScript代码时使用了两个不同的环境：

您的应用程序（src文件夹）正在目标浏览器内运行
Vite本身，包括其配置，正在您计算机内的Node环境中运行，这是与浏览器完全不同的环境，具有不同的API和约束
因此，有两个针对这些环境的单独配置，以及由这些配置的include和exclude部分定义的两组源文件。然后有一个“主”配置tsconfig.json，它“统治它们所有”

而且，您可能不想删除tsconfig.node.json，但您可能可以将其重命名为类似tsconfig.vite.json的名称，以使其目的更加清晰。如果这样做，请确保相应更新“主”配置。

直接删掉 tsconfig.node.json 文件也是可以的

vite.config.ts

显然就是针对 Vite 项目的，用来配置构建选项和插件的配置文件

构建项目后，默认只有这么一个配置项 defineConfig，

import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  

// https://vitejs.dev/config/  
export default defineConfig({
  plugins: [vue()],
})

defineConfig是Vite提供的一个工具函数，不用 jsdoc 注解也可以获取类型提示，也是推荐使用的方式。

比如说 defineConfig 函数可以有 command, mode, isSsrBuild, isPreview参数，最重要的是这两个

command：值有 dev、serve 或 build，可以用来配置不同的选项，就是可以根据不同的环境设置不同的配置，例如用一个导出函数来分别配置，在开发环境下 command 的值为 serve
mode：用来加载配置文件

关于 vite 的详细的配置，参考官方文档 https://cn.vitejs.dev/config

下面我们添加一些项目中常用的一些配置

这是开源项目 vite-vue3-admin 中的配置，我们可以参考，看看通常一个基础项目需要哪些配置

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    plugins: createVitePlugins(env, command === 'build'),
    resolve: {
      // https://cn.vitejs.dev/config/#resolve-alias
      alias: {
        // 设置路径
        '~': path.resolve(__dirname, './'),
        // 设置别名
        '@': path.resolve(__dirname, './src')
      },
      // https://cn.vitejs.dev/config/#resolve-extensions
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    // vite 相关配置
    server: {
      port: 80,
      host: true,
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        }
      }
    },
    //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
    css: {

    }
  }
})

base

开发或生产环境服务的公共基础路径，一般来说就是我们的网站地址的根路径

resolve.alias

别名配置，用符号代替，简化路径的书写

plugins

插件配置，示例中用的是一个函数形式，其实就是把相关的配置都放在一起管理，可以借鉴，常用的插件有哪些呢？
unplugin-auto-import，自动导入模块
unplugin-vue-components，自动导入 Vue 组件
vite-plugin-svg-icons，将 svg 图标转换成组件的方式，方便引入使用

server：开发服务器选项

host=true, 表示监听所有地址，
port=80, 服务器端口
open=true, 开发服务器启动时，自动在浏览器中打开应用程序
proxy，自定义代理规则，这里一般是用来前后端交互时的配置，例如当访问到/dev-api，则向http://localhost:8080，changeOrigin表示开启跨域访问。rewrite就是根据规则替换路径
上述示例：http://localhost/dev-api/addUser，会被替换为 http://localhost:8080/addUser

css

这里一般是配置 css 的预处理器，常见就是处理 less、sass 这种动态样式，增强 css 的功能，现代前端都会用到
```
export default defineConfig({
css: {
preprocessorOptions: {
  scss: {
    additionalData: $injectedColor: orange;,
  },
  less: {
    math: 'parens-division',
  },
  style: {
    define: {
      $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
    },
  },
},
},
})
```

vite 内置的 css 处理器是 postcss，也是一种 css 预处理器，一般叫后置处理器，其实它能做很多事，非常强大，提供了各种插件，例如示例中使用字符处理插件 `postcssPlugin: 'internal:charset-removal'`，这个是在引入 sass 时，对编译时可能出现的字符问题进行处理

对于 postcss 的配置，也可以直接新建一个 `postcss.config.js` 来单独配置这块的选项，注意这里文件后缀是 js 文件

npm installl postcss@latest -D

module.exports = {
    plugins: {
        autoprefixer: {},
    },
};

安装 autoprefixer

npm install autoprefixer@latest -D

标签云

最新文章

前言

使用 vue-cli 还是 vite？

用 JavaScript 还是 TypeScript?

开发工具选啥

初始化项目

认识项目结构

package.json

tsconfig.json

tsconfig.node.json

vite.config.ts

base

resolve.alias

plugins

server：开发服务器选项

css

发送评论编辑评论

标签云

最新文章

前言

使用 vue-cli 还是 vite？

用 JavaScript 还是 TypeScript?

开发工具选啥

初始化项目

认识项目结构

package.json

tsconfig.json

tsconfig.node.json

vite.config.ts

base

resolve.alias

plugins

server：开发服务器选项

css

发送评论 编辑评论

推荐文章

发送评论编辑评论