vue项目的搭建

1.安装node.js

2.全局安装webpack  

npm webpack install -g

3.安装vue--cli

npm install -g vue-cli

vue-cli脚手架：

1. 他与webpack一起工作
2. 他提供了一套基础的、可直接使用的vue项目模板

3.创建一个基于webpack的vue项目

vue init webpack project

4.运行项目

npm run dev

5.安装一些插件

npm install vue-router --save
npm install vue-resource --save
npm install vuex --save

6.README.md  项目说明文件package.json 依赖包，开发项目所需要第三方模块的依赖 package-lock.json确定第三方包的版本

Index.html      首页入口文件

static  静态资源 静态图片 

src 开发的主要目录，项目的源代码  main.js入口文件 App.vue根组件 

node-modules  以来的第三方node包

config 项目的配置的文件 index基础配置信息  dev.env.js开发环境配置信息    prod.env.js线上环境

build 项目打包的webpack的配置内容 webpack.base.config.js 基础 webpack.dev.conf.js 开发 webpack.prod.conf.js 线上

7.使用vant 组件库适配

1.安装lib-flexible　　 
npm i lib-flexible --save
2.在main.js中引入lib-flexible
import 'lib-flexible/flexible';
安装px2rem-loader（用于将px转换为rem的工具）
3.npm install px2rem-loader 
4.配置px2rem-loader
// 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如:
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5 // 这里设置html根字体，通常设置为设计稿宽度的 1/10。vant-UI的官方根字体大小是37.5
    }
  }
5.在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    。。。。
}
6.安装Vant组件库
npm i vant -S 
7.按需引入vant 需安装插件babel-plugin-import
npm i babel-plugin-import -D 
8.在babelrc中配置：
"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ],

全局引入vant

import Vue from vue
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);