mpvue初始化项目（基础总结）

2019-04-02 本文已影响0人栀丿東

创建，mpvue项目

1.node环境

2.全局安装vue

3.初始化脚手架 vue-cli

4.创建mpvue项目 vue init mpvue/mpvue-quickstart 项目名称

5. cd 找到项目目录并安装依赖

6.运行项目 npm run dev

1.package.json

"dev": "node build/dev-server.js",

"start": "node build/dev-server.js",

dev和start是两个等价的命令，执行其中之一都可以将项目以开发模式启动

"build": "node build/build.js",

build指令是用于生成发布用代码的，它会对代码进行一些压缩优化处理。当小程序开发完成后，将要提交审核时，请使用build来生成发布的代码

"lint": "eslint --ext .js,.vue src"

lint指令是使用ESLint来进行代码语法和格式检查，以及修复一些可自动修复的问题

npm run lint #检查语法和格式

npm run lint -- --fix #检查代码语法和格式，并修复可自动修复的问题

2.project.config.json文件

project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息

3.static目录

static目录可以用于存放各种小程序本地静态资源，如图片、文本文件等。代码中可通过相对路径或绝对路径进行访问

4.build目录

build目录下是一些用于项目编译打包的node.js脚本和webpack配置文件

5.config目录

config目录下包含了用于开发和生产环境下的不同配置，dev.env.js用于开发环境，prod.env.js用于生产环境

6.src目录

src目录是我们主要进行小程序功能编写的地方。默认生成的demo代码为我们创建了几个子目录：components、pages和utils，还有2个文件：App.vue和main.js。其实它们都不是必须的，可以按照自己的风格进行定义和配置

安装mpvue-wxparse

1.npm install mpvue-parse --save

2.引入 import wxparse from 'mpvue-wxparse'

3.注册组件 components:{wxparse}

4.使用组件解析 article数据

5.引入wxparse的css

@import url ('~mpvue-wxparse/src/wxparse.css')