使用uniapp生成小程序项目

使用@vue/cli生成小程序项目

参考文档：

uni-app官网https://uniapp.dcloud.io/quickstart-cli.html

注意：vue脚手架的版本跟官方保持一致

步骤：

1、安装脚手架（之前已经安装过的，这一步可以忽略，但是要安装vue脚手架4.x的版本）

2、使用命令创建项目

vue create -p dcloudio/uni-preset-vue uni-shop-4

3、在创建的时候，它会提示你选择什么模板，选择默认模板就行，然后按回车

 4、如果看到以下的截图，就代表我们生成项目没有问题

问题：因为下载模板的时候，需要去远程仓库上加载，有时候可能会失败，你们多试几次即可

运行项目

1、更改项目src下的manifest.json文件，把appid更改成你自己的

 

 2、在项目根目录执行 npm run dev:mp-weixin 把vue代码编译成微信小程序原生代码（此时是开发阶段，所以运行 dev: 开头的指令，等项目做完了，要打包了，这个时候运行 build: 开头的指令）

3、打开开发者工具去导入，刚刚项目根目录下生成好的小程序原生代码 dist/dev/mp-weixin

注意：导入的时候，千万不要把uni-app项目整个根目录都导入进来，因为它里面包含了vue的代码，小程序开发者工具根本不认识，所以要导入dist/dev/mp-weixin目录的代码，因为它里面才是小程序原生代码。

 4、最终的效果如下

注意：如果运行的过程中，发现最终在开发中工具中查看不了效果，那么大家就重新运行下 npm run dev:mp-weixin 同时，把开发者工具重启，然后重新导入试试

分析生成的项目代码

 

在uniapp中写小程序代码虽说使用vue，但是跟我们之前讲的vue中的用法还是有所差异（但是差异不大），下面就罗列出跟我们在Web平台中使用vue不一样的地方

• template中，我们必须使用uniapp提供的组件或是自定义组件（不能使用div、span）,参考文档：组件使用的入门教程 | uni-app官网https://uniapp.dcloud.io/component/
• script中，生命周期钩子不能再直接使用vue的了，必须使用uniapp提供的，参考文档：页面简介 | uni-app官网https://uniapp.dcloud.io/tutorial/page.html#lifecycle

 

uniapp跟原生小程序的区别

• pages.json中配置的写法不一样，这个要参考uniapp的官方文档
• 在调用api的时候，uniapp是使用uni.开头去调用，原生是使用wx.去调用