vscode + uniapp + Ts + uview-ui 创建步骤和问题

Vue2 、Vue3在下面，有用点一个赞

hbuilderx中的ts插件像个屎一样

（解决方法：你还想用hbuilder的话，你可以使用vscode来校验住，你在vscode编码，hbuilder会跟着动）

Vue2

闲来练手，用cli创建了一个uni框架的ts标注项目，使用的是vscode，使用的前端组件库是uview-ui

项目搭建：
1、首先根据 文档 中介绍，执行如下命令来初始化一个新项目，最后是项目名称：

vue create -p dcloudio/uni-preset-vue my-ts-uni

2、确认过生成目录，稍等几秒初始化完成，就可以选择 默认模板 (TypeScript) 来创建 ts 项目了。过一会之后就会安装完成，完整的安装日志如下：

Vue CLI v3.5.5
? Generate project in current directory? Yes
✔  Fetching remote preset dcloudio/uni-preset-vue...


Vue CLI v3.5.5
✨  Creating project in /Users/admin/project/my-ts-uni.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.13.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 40.41s.
🚀  Invoking generators...

Preset options:
? 请选择 uni-app 模板 默认模板(TypeScript)
📦  Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 18.58s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-ts-uni.
👉  Get started with the following commands:

 $ yarn serve

3、这样项目就已经创建好了，可以说非常简单了，虽然默认模板是用的 Vue. extend() 进行编写，但是项目中已经自动下好了 vue-property-decorator，很简单的就可以修改成 class 风格。

<script lang="ts">
// class 风格的 App.vue
import { Vue, Component } from 'vue-property-decorator'

@Component({})
export default class App extends Vue {
    mpType = 'app'
    onLaunch() {
        console.log('App Launch')
    }
    onShow() {
        console.log('App Show')
    }
    onHide() {
        console.log('App Hide')
    }
}
</script>

4、运行到微信小程序，里面有运行指令

"scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5",
    ...
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    ...
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
   ...
}

执行结果：

5、然后你就可以在项目里找到 dist/dev/mp-weixin 目录，这个就是编译完成的微信小程序代码，接下来只需要启动微信小程序开发者工具打开该目录就可以了：
6、由于 dev 服务器会自动执行差量更新，而微信小程序也会监测代码修改并自动刷新，所以我们编写完代码后直接保存就可以在小程序开发工具里看到修改成果了，倒也挺方便。

安装 pug 及 stylus

在 uni-app 中安装这两者和普通项目并没有什么区别，直接执行下面命令，然后修改

yarn add stylus stylus-loader pug pug-plain-loader

解决未找到 sitemap

在执行完上面的步骤后写了个 demo，然后就在微信小程序开发者工具里看到了下面这个问题：

这个问题解决起来倒也简单，在 dist/dev/mp-weixin 目录下新建名为 sitemap.json 的文件。

然后填写如下内容就可以了，这个文件新建后除非直接删除 dist 文件夹，不然后续的代码更新不会影响到这个文件：

{
    "rules": [{
        "action": "allow",
        "page": "*"
    }]
}

添加其他声明文件

这里需要注意的是，这种方式创建的 ts 项目只会包含 uni-app 本身的 @types 声明，如果你想直接使用 wx 或其他小程序的 api 的话就需要自行添加，以微信小程序为例：

yarn add @types/weixin-app

然后在tsconfig.json中添加该声明后重启 vscode 即可：

...
"types": [
      "webpack-env",
      // 添加 weixin 的声明
      "weixin-app",
      "@dcloudio/types/uni-app"
]
...

uview-ui问题

无法找到模块“uview-ui”的声明文件。“e:/xxxxxx/node_modules/uview-ui/index.js”隐式拥有 “any” 类型。
尝试 npm install @types/uview-ui (如果存在)，或者添加一个包含 declare module ‘uview-ui’; 的新声明(.d.ts)文件ts(7016)

直接让ts把它略掉就好了

有“；”的要注意，就过了

Vue3

飞机票0，灰色的地方有解决的办法，记得下载下来项目install
飞机票1，如果你访问不了github会报一个错误，直接走下载文件就好了
注意：hubuderx中不太好用，跑了是乱码，但端口号是3000，你可以试试看，显示问题而已
不行就去vscode中跑一跑