用Vue-cli脚手架搭建项目

安装cnpm

在项目开发中我们经常需要使用node.js的包管理器npm来下载一些依赖
但是npm因为网络原因会使下载速度变得非常慢,所以我们需要换成淘宝源的cnpm
在命令行窗口输入下面的这句指令即可安装

 npm install cnpm -g --registry=https://registry.npm.taobao.org

在这里插入图片描述
报了一个WARN,先不管了他,下面下载试试能不能用再说,难受~

全局安装

全局安装vue cli,也就是脚手架,命令如下

 cnpm install -g @vue/cli

运行结果很多,我就放最后面的截图吧
其实是我看不懂233
在这里插入图片描述
我又换回cmd了,上面那个用的power shell,不知道怎么回事没权限下载
fine,我就不用你了~

创建项目

输入创建uni-app项目指令

 vue create -p dcloudio/uni-preset-vue 你的项目名称(不能带空格)

假如上面那个指令你输入你的项目名称是my project,后面的project会被忽略掉,可以试试my-project

一顿操作之后会让你选择模板,我选的默认模板,然后就创建成功了!
在这里插入图片描述

启动项目

先进入项目目录,命令如下

cd .\你的项目名称\.

然后启动项目,命令如下

 cnpm run dev:mp-weixin

跳转到下面这个页面,就说明启动成功了!
在这里插入图片描述

微信小程序开发者工具导入项目

打开微信开发者工具
在这里插入图片描述
登录之后,选择导入项目
在这里插入图片描述
从目录找到你的项目文件夹(mp-weixin才是根目录),然后导入,项目用来学习测试的话appID可以先不输入
在这里插入图片描述
导入成功!
在这里插入图片描述

写在最后

用了这么多操作终于学会用脚手架搭建uni-app项目了,如果不是特别喜欢用命令行操作的话,我还是强烈推荐大家使用HBuilder编译器的,操作会更加便捷,点一点就ok啦~

猜你喜欢

转载自blog.csdn.net/qq_43710881/article/details/107703137