本文共 1030 字，大约阅读时间需要 3 分钟。

新建mpvue项目指南

1. 安装Node.js

首先，需要安装Node.js。安装完成后，可以通过以下命令验证安装是否成功：

node --versionnpm --version

为了提高下载速度和成功率，可以将npm的下载源切换到国内淘宝的镜像：

npm set registry https://registry.npm.taobao.org/

2. 安装Vue CLI

接下来，安装Vue CLI工具。Vue CLI可以帮助我们快速创建Vue项目的骨架代码，包括mpvue项目：

npm install vue-cli -g

安装完成后，可以通过以下命令验证：

vue --version

3. 微信开发者工具

微信开发者工具是完成小程序开发的必要工具。安装完成后，可以通过工具打开项目。

4. Visual Studio Code + Vetur

Visual Studio Code是一款流行的代码编辑器，适合.vue文件的编辑。安装完成后，通过插件管理器安装Vetur插件，完成后重启编辑器即可。

5. 创建mpvue项目

使用Vue CLI创建第一个基于mpvue的小程序项目：

vue init mpvue/mpvue-quickstart firstapp

按照提示填写项目信息，或者直接按回车完成。项目创建完成后，进入项目目录并进行以下操作：

npm installnpm run dev

这样可以启动开发服务器，自动编译源代码到dist目录。

6. 运行项目

在微信开发者工具中，选择“文件” > “新建项目”，然后选择项目文件夹。在“项目设置”中，勾选“保存时自动编译小程序”，确保模拟器能够及时刷新。

7. 查看结果

打开dist目录下的wx文件夹，选择index.html文件即可查看项目结果。

8. 常见问题

如果遇到eslint报错，可以暂时关闭eslint：

打开build/webpack.base.conf.js，注释下列代码：

{  test: /\.(js|vue)$/,  loader: 'eslint-loader',  enforce: 'pre',  include: [resolve('src'), resolve('test')],  options: {    formatter: require('eslint-friendly-formatter')  }}

这样可以解决代码格式报错问题。

转载地址：http://ftffk.baihongyu.com/