Last night, I learned about the Taro framework. It can run all platform applets in the same "set" as uni app. It's so convenient. Of course, I should try it
Start quickly according to its official documents. A useful npm package, mirror config China, was found during the process. With it, you don't need to manually set the image. The installation is as follows:
npm install -g mirror-config-china
After a series of operations, Taro has been installed. Through its init initial project, Vue3 + NutUI is selected. However, its initial code project fails to compile. It will report:
Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/gavin/Public/oneApp/src/pages/index/index.vue: Unexpected token, expected "," (17:29) 15 | }); 16 | > 17 | const handleClick = (type: string, msg: string, cover: boolean = false) => { | ^ 18 | state.show = true; 19 | state.msg2 = msg; 20 | state.type = type;
People familiar with TS syntax know that the syntax is not correctly parsed and an error is reported. You need to change ts:false in abel.config.js to true, because NutUI is ts Syntax... It can't be compiled without opening it
Even if you don't choose to use TS when using Taro's initial project, it should be changed to true:
presets: [ ['taro', { framework: 'vue3', ts: true }], ],
I thought it was ok, but I didn't expect to report again:
Listening file is being modified... ⚠️ Compiled with warnings. ./src/app.js 9:8-14 " '@nutui/nutui-taro' does not contain an export named 'Button'. ./src/app.js 9:20-25 " '@nutui/nutui-taro' does not contain an export named 'Toast'.
Suddenly I don't want to use this framework. There are so many problems in the demo
Do you want to use uni app?
After thinking about it, he continued to study what the problem was
At this time, I couldn't help adding wechat groups posted with documents, hoping for the help of people who came to be cheated
So I added groups, asked questions, took screenshots and deleted nodes_ Models is installed again, and Taro init initial projects oneAPP and twoAPP are used continuously
The group did not encounter this problem or other problems, and no one could give the correct answer. I was also troubled by this problem to write PHP code
When I came home from work, the group still didn't reply to me. Today I am the most active person in the group
After a day's operation, the brain system came up with some ideas: why don't you look at NutUI documents
Quickly browse the guidance document to confirm:
Taro's Cli initial project (Vue3 + Nutui) code itself is incomplete (now 2021-10-11)
The fix is:
To select Vue3 + NutUI using taro, you also need to download it yourself:
yarm add babel-plugin-import --dev
Then add the following in babel.config.js:
plugins: [ [ "import", { "libraryName": "@nutui/nutui-taro", "libraryDirectory": "dist/packages/_es", "camel2DashComponentName": false }, 'nutui3-taro' ] ]
Complete babel.config.js:
// Babel preset taro more options and defaults: // https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md module.exports = { presets: [ ['taro', { framework: 'vue3', ts: true }], ], plugins: [ [ "import", { "libraryName": "@nutui/nutui-taro", "libraryDirectory": "dist/packages/_es", "camel2DashComponentName": false }, 'nutui3-taro' ] ] }
summary
This is the most annoying open source software I used. The initial project code generated by CLI, a bunch of bugs, can't even run and compile a basic demo, but... How much time did I waste? Curse, open source, don't scold. It's all bugs,
I can only say I don't want to do such a thing. Well, good night