uni-app新建项目并将项目导入微信开发者工具(细节踩坑)

216 阅读1分钟

1.用脚手架搭建uni-app

 1.1 全局安装vue脚手架命令

npm install @vue/cli    (cmd输入该命令前请输入node -V是否安装)

1.2 安装nui-app文件项目命令

vue create -p dcloudio/uni-preset-vue myproject(myproject为项目名可自行定义,前面为固定写法,安装过程中选择‘默认模板’即可)

1.3 启动项目命令

npm run dev:mp-weixin (启动命令前记得cd 项目名称切换到项目目录,上面创建的就是执行cd myproject)

1.4 导入微信小程序工具(这里有些坑,和我一样的初学者可能会踩)
提示:将项目导入到微信小程序工具的时候切记不要关闭cmd命令框,保持启动  如图:

然后打开微信小程序工具选择导入项目   如下图:

1.5 调试项目

打开微信开发者工具尝试改变标题内容,首先用编辑器打开新建的uni-app项目(我用的是vscode)然后进入pages.json文件中修改标题即可,  如图:

1.6 效果展示

修改成功之后保存代码微信开发者工具是会自动更新的,如图:

2.安装sass命令

npm i node-sass loader

3.特别注意:项目启动之后cmd千万不能关闭,否则修改代码保存之后微信开发者工具不会同步最新代码,从而看不到最新效果