前言
最近要用uniapp开发个微信小程序,遇到的一些有趣的事情,特 记录一下。
平常写习惯了原生小程序项目,因公司需求要写一个可以跨端的小程序 就用了uniapp 正好用惯了vue语法 这个还都支持比较好
项目开始同事用的是官方提供的 HBuilderX 开发工具创建的项目,不是说这个工具不好用,主要是个人习惯了vscode的代码高亮等一些插件。。。
想着怎么能把HBuilderX创建的项目用cli跑起来。。就有了这篇博客(如果你是直接用 cli 创建的可以忽略本篇文章)
正文
首先用HBuilderX创建个项目
然后目录结构是这样的
下面在用cli创建个uniapp项目
默认你们环境都已经装好 命令行输入:
1 | vue create -p dcloudio/uni-preset-vue cli-uniapp |
会提示你安装什么模板 我选的默认(回车就行)
安装好之后我们看一下cli的目录结构
打开 src 目录 ,嗯?豁然开朗。这不就是用HBuilderX创建的目录结构嘛!
只需要把 HBuilderX 创建的项目放在 cli 项目里的src目录下就OK 就这么简单!!
然后运行
1 | npm run dev:mp-weixin |
然后用微信开发者工具打开
找到并开启端口 设置->安全设置->服务端口
然后找到你项目下的 dist->dev->mp-weixin 打开
结束~ 可以愉快的用vscode开发啦~~
写在最后
如果你项目用了scss或者其它插件之类的 可能会报错!只需要看报错提示去装指定的插件就OK了,开发环境的话 npm一定要加 -D 哦~