1. Webstorm uni-app syntax plugin: Uniapp Support
Uniapp Support - IntelliJ IDEs Plugin | Marketplace
The first is free, the second is charged
I chose the second Uniapp Support , which has a 30-day trial period. After installing and restarting webstorm, productivity can be improved.
2. Create uni-app project
Create a new project, select uniapp, the default template is for demonstration, there are some ui components, common function packaging
3. Run the project
1. First configure WeChat developer tools, HBuilder installation directory
2. Add the running project configuration, then click Run
3. The first startup must be an error, you need to configure your own DClound APPID, WeChat applet APPID
This appid number can be opened and compiled by WeChat developer tools to generate a test number, and then copied
The project package releases the source code of the developed WeChat applet project
After the configuration is complete, restart and run
After the startup is complete, simulate and see the effect in the WeChat developer tools
4. Create a new page
Use uniapp tool
5. uview-ui open source ui framework
uview introduces project preparation
Before configuring, please make sure you have npm installed uView according to the steps in the installation , if not, please perform the installation first:
// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y
// 安装
npm install [email protected]
copy
#Configuration steps
# 1. Import uView main JS library
In the project srcdirectory main.js, import and use uView's JS library. Note that these two lines should be placed import Vueafter.
// main.js
import uView from "uview-ui";
Vue.use(uView);
copy
# 2. Import the global SCSS theme file of uView
Introduce this file in the project srcdirectory .uni.scss
/* uni.scss */
@import 'uview-ui/theme.scss';
copy
# 3. Introduce uView basic style
Notice!
Introduced at the firstApp.vue line of , pay attention to add the lang="scss" attribute to the style tag
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
copy
# 4. Configure easycom component mode
This configuration needs to be done in the project srcdirectory pages.json.
Kind tips
- For uni-app debugging performance reasons, the modified
easycomrules will not take effect in real time. After configuration, you need to restart HX or recompile the project to use uView functions normally. pages.jsonMake sure you only have one field in youreasycom, otherwise combine multiple import rules yourself.
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
copy
# 5. Additional configuration in Cli mode
If you are vue-clia mode project, you also need to configure the following in the project file 根目录:vue.config.js
// vue.config.js，如没有此文件则手动创建
module.exports = {
transpileDependencies: ['uview-ui']
}6. $u variable: uni.$u, this.$u
From 1.7.9the beginning, uView $umounts the object to unithe object at the same time, which means that you can call some tools and methods provided by uView through the form in the external jsfile uni.$u.xxx, instead of calling *.vuethrough uni.$u.xxxthe form in the previous method.
on vue page, uni.$u == this.$u
console.log(">>>this.$u",this.$u)
console.log(">>>uni.$u",uni.$u)
console.log(">>>this.$u==uni.$u",this.$u==uni.$u) 
#How to reference a component separately without using easycom
There are disadvantages
No matter it is webstorm or HBuiler, the effect takes effect to the WeChat developer tools, and there is still a delay of a few seconds after hot compilation and scan startup.
https://blog.csdn.net/LlanyW/article/details/132450872?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22132450872%22%2C%22source%22%3A%22LlanyW%22%7D