适合vue新手小白的：vue项目搭建+引入vant组件+开发属于自己的第一个vue页面！

前言：本人也是根据第一次搭建vue项目的经验，来记录的一个快速搭建vue项目的基本过程，本篇的主要目的是能让新手小白快速搭建vue项目，并且开发一个使用vant组件的基本vue页面，所以文章部分介绍较粗，如有详细要学的可自行百度！

---

首先，前期工作准备好：

1、node环境，简单的说 Node.js 就是运行在服务端的 JavaScript，而vue是基于node开发的，这就不用说了吧必装，从官网https://nodejs.org/en/下载包并装上，然后之后用自带npm走；

2、webpack，一个前端资源加载/打包工具，搭建会需要先安装这个；（了解更多请看https://www.runoob.com/w3cnote/webpack-tutorial.html）

3、vue脚手架vue-cli，根据我的归纳总结，vue-cli相当于就是为了更好的开发vue项目，而不用我们花更多的时间花费在环境搭建上的一个前端框架吧！（了解更多请看https://cli.vuejs.org/zh/guide/）

4、vant，有赞开源的移动端组件库，组件类型比较多而且挺好用的，支持按需引入，官方地址：https://vant-contrib.gitee.io/vant/#/zh-CN/home

---

开始搭建vue项目！

1、提前安装好node环境了（本篇使用的是8版本。大家记得都提前  node - v  ，  npm - v  等检查一下必有的环境都装好没再继续下一步！）

2、假设上述环境都已经安装好，开始使用npm进行全局安装webpack： npm install webpack -g ，安装成功后输入 webpack -v 查看版本号，出现版本号则安装成功！

但是没安装成功也关系，出现下面是我这样的宝宝们别怕，也可继续往后走不影响，

需要具体解决的可以自行再去百度！

3、全局安装vue-cli， npm install --global vue-cli  ，安装完输入 vue - V ，出现相应版本号则安装成功！（这一步必须成功，不能忽略啊！）

打开C:\User\xxx\AppData\Roaming\npm目录下可看到相应的vue，

打开node_modules也可看到vue-cli！

4、前期工作准备就绪，现在我们进入要建的vue项目文件夹下开始创建新的项目：

 vue init webpack ceshi888 （ceshi888是项目名，之后如下所示，一行一行输入或者回车，回车就默认yes，填完后就会自动创建一个vue项目开发下所需要的vue-cli）

创建好后的文件夹，相当于项目已经创建成功了：

5、这时在根目录运行 npm run dev 就已经能成功运行打开一个vue项目了，不过这时我们继续往下乘胜追击，创建第一个vue文件吧！

开始开发vue页面，引入vant组件！

1、大家都知道，开发vue，各种各样的组件肯定不可缺少了，而我这里就是使用的vant组件，所以我们继续把vant引进来先，输入 pam i vant -S ，在当前项目下安装！

安装完后在项目的node_modeles目录下看到vant组件目录，那就是已经被成功引入了！

2、然后我们选择按需引入组件的方式安装插件，会在编译过程中将import转为按需引入的方式！

3、然后继续在项目下的.babelrc文件中添加如下配置（babel7的用户，在babel.config.js中配置）

4、以上vant组件安装和配置差不多写完了，之后就是在新建的页面中引用了，然后我们继续在src的components下新建文件ceshi.vue，差不多随便写点，然后我这里引入了vant组件里的button作为例子参考！

之后在router路由那里新加刚刚建的路径：

5、写完页面到项目根目录启动编译运行 npm run dev ，运行成功！（右边一堆提示是因为新建这个项目的时候选择了js语法检测，到时候建的时候选择no就行啦）

---

总结：以上就是一个新手小白的vue项目搭建—引用vant组件—开发vue页面的具体过程了！差不多看完应该都会自己开发vue页面啦，最后祝大家学习愉快！~