项目初始化--uniapp--vscode--vue3--ts

**项目初始化**

在本文中，我们将一步步地讲解如何使用 VSCode 和 Vue3 + TS 来初始化一个 UniApp项目。

### 步骤一：安装必要的依赖首先，我们需要安装必要的依赖包。我们将使用 npm 或 yarn 来管理我们的依赖。

bashnpm install -g @dcloudio/uni-cli

或者，如果你使用的是 yarn：

bashyarn global add @dcloudio/uni-cli

### 步骤二：创建新项目接下来，我们需要创建一个新的 UniApp项目。我们可以使用 `uni create` 命令来完成这一步。

bashuni create my-app --template vue3-ts

这里的 `my-app` 是我们的项目名称，`--template vue3-ts` 表示我们希望使用 Vue3 + TS 来初始化这个项目。

### 步骤三：配置 VSCode接下来，我们需要在 VSCode 中配置好我们的项目环境。首先，我们需要安装必要的插件：

* `uni-app`
* `typescript`

你可以通过以下方式安装这些插件：

bashext install uni-appext install typescript

或者，如果你使用的是 yarn：

bashyarn add @dcloudio/uni-cliyarn add typescript

### 步骤四：配置 tsconfig.json接下来，我们需要配置好我们的 `tsconfig.json` 文件。这个文件用于配置 TypeScript 的编译选项。

json{
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "strict": true,
 "esModuleInterop": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true }
}

这里的配置选项有：

* `target`: 指定编译目标为 ES5。
* `module`: 指定使用 CommonJS 模块系统。
* `strict`: 启用严格模式。
* `esModuleInterop`: 允许使用 ES6 模块语法。
* `skipLibCheck`: 跳过库检查。
* `forceConsistentCasingInFileNames`: 强制文件名一致。

### 步骤五：配置 vue.config.js接下来，我们需要配置好我们的 `vue.config.js` 文件。这个文件用于配置 Vue CLI 的选项。

javascriptmodule.exports = {
 publicPath: './',
 outputDir: 'dist',
 devServer: {
 port:8080,
 open: true,
 proxy: {
 '/api': {
 target: ' /> changeOrigin: true,
 pathRewrite: { '^/api': '' }
 }
 }
 },
 chainWebpack(config) {
 config.module.rule('svg').exclude.add(/.vue$/);
 }
}

这里的配置选项有：

* `publicPath`: 指定公共路径。
* `outputDir`: 指定输出目录。
* `devServer`: 配置开发服务器选项。
* `proxy`: 配置代理选项。
* `chainWebpack`: 配置链式 Webpack选项。

### 步骤六：启动项目最后，我们可以使用以下命令来启动我们的项目：

bashnpm run serve

或者，如果你使用的是 yarn：

bashyarn serve

这样，我们就可以在浏览器中访问我们的项目了。

**总结**

在本文中，我们一步步地讲解了如何使用 VSCode 和 Vue3 + TS 来初始化一个 UniApp项目。我们配置了必要的依赖包、创建了新项目、配置了 VSCode 环境、配置了 tsconfig.json 文件和 vue.config.js 文件，最终启动了我们的项目。

**参考**

* [UniApp 文档]( />* [Vue CLI 文档]( />* [TypeScript 文档](