# uniapp-vue3-vscode-init

**Repository Path**: tang_workhome/uniapp-vue3-vscode-init

## Basic Information

- **Project Name**: uniapp-vue3-vscode-init
- **Description**: Uni-App+Uni-UI+Vue3.2+TypeScript+Vite+Pina项目启动模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-08
- **Last Updated**: 2023-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 技术栈：Uni-App+Uni-UI+Vue3.2+TypeScript+Vite+Pina
### 1 项目启动
#### 1.1 准备工作

#### node版本
    v14.15.1
#### 使用VSCode开发，添加如下插件（不添加亦不影响开发）
    Better Comments
    Color Highlight
    ESLint
    Prettier - Code formatter
    SCSS IntelliSense
    TypeScript Vue Plugin (Volar)
    uni-create-view
    uniapp-snippet
    Vue Language Features (Volar) 

#### 打开setting.json，添加如下配置，若未添加Color Highlight插件则无需添加color模块
    "files.associations": {
        "pages.json": "jsonc",
        "manifest.json": "jsonc"
    },
    "color-highlight.enable": true, // 开启插件
    // 颜色块的样式
    "color-highlight.markerType": "dot-before",
    // 起效果的语言，设置只在jsonc起作用
    "color-highlight.languages": [
        "jsonc"
    ],
    // 是否在旁边的滚条显示颜色
    "color-highlight.markRuler": false,
    // 是否匹配单词，如white，black
    "color-highlight.matchWords": false,
    "create-uniapp-view.template": "vue3",
    "create-uniapp-view.style": "scss",
    "create-uniapp-view.typescript": true,


#### 1.2 项目运行

#### git clone 地址 后，如果是微信小程序，打开manifest.json——mp-weixin中填入自己的appid，执行
```sh
npm install
```

#### 运行到网页端
```sh
npm run dev
```
    项目运行在http://localhost:3000/

#### 运行到微信小程序端
```sh
npm run dev:mp-weixin
```
    项目运行成功后生成dist文件夹
    使用微信开发者工具导入dist文件夹下的dev文件夹中的mp-weixin文件夹
    填入自己的appid

#### 运行到其他端，见package.json文件

#### 打包
```sh
npm run build
```