The first step: check whether they have installed node.js
$ node -v
$ npm -v
Correct posture
Not installed, then go Node.js official website installation
Step 2: Install cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
The third step: Install the Vue Cli
$ sudo cnpm install -g @vue/cli
Correct posture
Step four: like a good project name, and create it
You must first enter the code directory, then create, you need to know
My native code directory: / Users / hrz / myworkspace
Project Name: Lawyer-Card-wxss
appid: my small micro-channel program appid
So I need to do
$ cd /Users/hrz/myworkspace
$ vue init mpvue/mpvue-quickstart lawyer-card-wxss After the execution, after a while it will again ask you, the project name, small micro-channel program appid, project description, author, whether to open ESLint and other information.
Correct posture
When finished, it will be created in the directory you execute the command of the project, then enter the project, downloading dependencies, and start.
$ cd lawyer-card-wxss
$ cnpm install $ npm run dev At this time, we import the project directory with micro-channel developer tools, running to see results
Importing project directory
You can see the home page
Step Five: Add vant components
To return to the command window, or still in the project directory, add a dependency vant components
$ cnpm i vant-weapp -S --production
After you do, you can enter package.json files, view dependencies is not already included vant-weapp, yes, indicating successfully added. Next, open the project in the build / webpack.base.conf.js file, add one more CopyWebpackPlugin in baseWebpackConfig.plugins array. Mainly to mpvue when compiled into a small micro-channel programming language, but also incidentally copy vant components to the directory, so the project can be found.
new CopyWebpackPlugin([
{
from: resolve('node_modules/vant-weapp/dist'),
to: resolve('dist/wx/vant-weapp/dist'),
ignore: ['.*']
}
])
Correct posture
Step Six: code reference vant
Components used in reference to a global src / app.json file, such as button components
"usingComponents": {
"van-button": "vant-weapp/dist/button/index"
}
Correct posture
We went home button code files added to see results
Join button code to see results
Run the project, and then look at the micro-channel Developer Tools
$ npm run dev
Found, micro-channel developer tools console error
thirdScriptError
sdk uncaught third Error
Unexpected token export
SyntaxError: Unexpected token export
错误截图
解决方法
将ES6转ES5的复选框，钩上
正确姿势
就这样，就可以看到首页，已经成功显示vant的按钮。mpvue+vant搭建成功！！！
下一篇文章，我们来介绍怎么引入flyio：微信小程序搭建mpvue+vant+flyio
这里我上传了一个名字叫mpvue-vant-flyio的项目，步骤是按照上文操作的，只是项目名不同而已。mpvue-vant-flyio项目源码
转载链接：https://www.jianshu.com/p/58c33e8389fe