uniapp踩坑笔记

前进，前进。

使用cli

# 全局安装cli
npm install -g @vue/cli
# 创建uni-app（正式版）
vue create -p dcloudio/uni-preset-vue my-project

会提示模版选择框（不同模版适配程度不同，hello uni-app可以直接运行，有的则不行，主要是sass-loader相关）
自行安装sass与sass-loader，经测试vue2+webpack4版本下，sass可用最新，sass-loader不能高于10。

image

配置WebStorm

先按照官方文档操作 https://ask.dcloud.net.cn/article/36307

显示特定标签

在src目录中任何地方建立包含组件import与use的文件，因为有easycom，不需要真的引入工程，只是让webstrom识别到，从而不再报错

image.png

内置组件位置

• @dcloudio/uni-h5/src/core/view/components
• @dcloudio/uni-h5/src/platforms/h5/view/components

rpx显示异常

先安装wechat mini program support插件，插件设置中选择启用，等待几分钟即可。

组件导入

导入还是使用HbuilderX的easycom
自HbuilderX2.5.5起，支持了easycom，简单来说就是不需要在.vue中import和components，只要组件安装在项目的components目录下，components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。但在webstrom会报警告，按照原来步骤导入和注册也可以。详见官方文档。

路由与网络

不支持直接使用vue-router与axios，但社区中有解决方案。
网络请求使用 luch-request
路由拦截使用uni-simple-router

去掉开发者工具中的sock.js.map 404

在根目录vue.config.js下配置devtool

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

eslint

安装@vue/cli-plugin-eslint，建立.eslintrc.js自行配置即可，此处无异