mpVue 入门

第一步:初始化项目

通过 Vue.js 命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目:

# 全局安装 vue-cli
$ npm install --global vue-cli

/* 这一步我是需要,但是也有人不需要,大家看着办,npm不行就用 cnpm */
# 全局安装 @vue/cli-init
$ npm install -g @vue/cli-init

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
或
$ npm start

创建完之后,先打开 .eslintignore 文件,填上这两句,为了方便,让它先不检查这两个文件:
在这里插入图片描述
接下来,你只需要启动微信开发者工具,引入项目即可预览到你的第一个 mpvue 小程序。
在这里插入图片描述

第二步:主页面部分搭建

先把自动生成的页面给隐藏,自己创建,把本来的 src 文件夹改成 src-demo,再自己新建一个 src 文件夹:
在这里插入图片描述
然后再在自己的 src 文件夹内新建 app.vue 文件:
在这里插入图片描述
再新建一个入口文件 main.js:
在这里插入图片描述
然后就可以创建页面文件夹 pages 了,要注意每个页面都有一个入口文件 main.js:
在这里插入图片描述
在这里插入图片描述
再创建一个全局的配置文件 app.json:
在这里插入图片描述
最后把之前的 dist 文件夹先删除,再让它重新去打包:
在这里插入图片描述
(此截图有错误,记得先 cd my-project 再 npm start / npm run dev)

最后打开我们的微信开发者工具编译一下,就可以看到我们自己写的页面了:
在这里插入图片描述
然后我们可以给此页面创建一个 main.json 文件,更改一下此页面的外观:
在这里插入图片描述
回到微信开发者工具编译,就是这样子啦:
在这里插入图片描述

第三步:主页面静态页面完成

猜你喜欢

转载自blog.csdn.net/Jessieeeeeee/article/details/107662408