环境安装
- npm set registry https://registry.npm.taobao.org/
- npm install vue-cli -g
- 微信开发者工具
- Visual Studio Code + Vetur
第一个小程序
- vue init mpvue/mpvue-quickstart firstapp
- cd firstapp
- npm install
- npm run dev
- 打开微信开发者工具，选择新增项目，项目目录选择指向firstapp目录
结构介绍
- package.json是项目的主配置文件，里面包含了mpvue项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息。scripts部分配置了4个可执行的命令。
dev和start是两个等价的命令，执行其中之一都可以将项目以开发模式启动。
npm start
npm run dev
- lint指令是使用ESLint来进行代码语法和格式检查，以及修复一些可自动修复的问题 。
npm run lint #检查语法和格式
npm run lint -- --fix #检查代码语法和格式，并修复可自动修复的问题
- build指令是用于生成发布用代码的，它会对代码进行一些压缩优化处理。当小程序开发完成后，将要提交审核时，请使用build来生成发布的代码。
- project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。
- static目录可以用于存放各种小程序本地静态资源，如图片、文本文件等。
如：<img src="/static/button.png" />
- build目录下是一些用于项目编译打包的node.js脚本和webpack配置文件。
- config目录下包含了用于开发和生产环境下的不同配置，dev.env.js用于开发环境，prod.env.js用于生产环境，你可以将开发阶段和生产阶段不一样的信息（如后台API的url地址等）配置到这两个文件中去，然后在代码中以变量的形式进行引用。
// dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_BASE_URL: '"http://127.0.0.1:8080/api"'
})
// prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_BASE_URL: '"https://www.my-domain.com/api"'
}
- src目录是我们主要进行小程序功能编写的地方。
- components：在实际开发中，我们可以尽量将界面上可复用的部分，提取成vue组件放入该目录
- pages：存放小程序的页面。请遵循每个小程序页面放入一个单独子目录的组织形式
- utils：可选（可删）。可以将代码中一些公用工具函数组织成模块放入该目录下
- 可新建其他目录，存放你希望组织起来的代码。
- main.js + App.vue：这两个是入口文件，相当于原生小程序框架中的app.json和app.js的复合体。
项目清理
- 删掉src/components、src/pages、src/utils三个目录下的所有代码文件
- 将src/App.vue文件中的内容重置成：
<script>
export default {}
</script>
<style>
</style>
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
export default {
config: {
pages: [],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: '第一个小程序',
navigationBarTextStyle: 'black'
}
}
}
