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千万不能关闭,否则修改代码保存之后微信开发者工具不会同步最新代码,从而看不到最新效果