Introduction:

I have built mpvue+vant before, but I did not record it. This time, the company started a new small program project, so I built it again from scratch. Make a note of it, otherwise you’ll forget how to set it up over time. The end of the article contains code, need to learn the children’s shoes, take away no thanks.

Step 1: Check to see if Node.js is installed

$ node -v
Copy the code
$ npm -v
Copy the code

If not, go to the node.js official website to install it

Step 2: Install CNPM

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

Step 3: Install the Vue Cli

$ sudo cnpm install -g @vue/cli
Copy the code

Step 4: Think of a project name and create it

Go to your code directory first, and then create, need to know

Myworkspace project name: lawyer-card-wxss appID: my wechat small program appid

So I need to execute

$ cd /Users/hrz/myworkspace
$ vue init mpvue/mpvue-quickstart lawyer-card-wxss 
Copy the code

After executing, it will ask you again for the project name, wechat applet APPID, project description, author, whether ESLint is enabled, etc.

When you’re done, it creates the project in the directory where you executed the command, then goes into the project, downloads the dependencies, and launches them.

$ cd lawyer-card-wxss
$ cnpm install
$ npm run dev
Copy the code

At this time, we use wechat developer tools to import the project directory, run to see the effect

Step 5: Add the Vant component

Go back to the command window and, again, add the vant component dependencies under the project directory

$ cnpm i vant-weapp -S --production
Copy the code

After executing this command, access the package.json file to check whether dependencies include ant- pervasive P. If yes, you can add it successfully. Next, open the project in the build/webpack base. Conf., js file in baseWebpackConfig. Plugins to add one more arrays in CopyWebpackPlugin. The main purpose is to copy vant components into the directory when mpVue is translated into wechat small program development language, so that it can be found by the project.

    new CopyWebpackPlugin([
      {
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['*']}])Copy the code

Step 6: Reference vants in your code

Reference a component, such as a button component, globally in a SRC /app.json file

"usingComponents": {
  "van-button": "vant-weapp/dist/button/index"
}
Copy the code

Let’s go to the file on the home page and add the code for the button to see the effect

Run the project and then look at the wechat developer tools

$ npm run dev
Copy the code

Found, wechat developer tool console error

thirdScriptError sdk uncaught third Error Unexpected token export SyntaxError: Unexpected token export

The solution is to turn ES6 to ES5 by checking the box on the hook

In this way, you can see that the home page has successfully displayed the Vant button. Mpvue + Vant built successfully!! In the next article, we will introduce how to introduce Flyio: wechat small program build MPvue +vant+flyio

Here I have uploaded a project named mpvue-ant -flyio. The steps are the same as above, but the project name is different. Mpvue-ant – Flyio project source code