前进,前进。
使用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。
配置WebStorm
先按照官方文档操作 https://ask.dcloud.net.cn/article/36307
显示特定标签
在src目录中任何地方建立包含组件import与use的文件,因为有easycom,不需要真的引入工程,只是让webstrom识别到,从而不再报错
内置组件位置
- @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
自行配置即可,此处无异