前进，前进。
使用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自行配置即可，此处无异
网友评论