vue2.0项目的搭建

安装node.js

从node官网下载并安装node，安装完成后，打开命令行工具输入命令node -v，出现对应版本号，即安装成功。
npm包管理器，是集成在node中的，输入npm -v出现对应版本号，即安装成功。

安装cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
输入cnpm -v，可以查看当前cnpm版本。

脚手架

1、打开powershell
2、npx vue -V  若不是最新版
npm install -g @vue/cli
3、npx vue create  demo
选最后一个是自定义 :点击空格是选中

a、Babel ：转码工具，有了它就可以开心的用es2015以上的代码，那必须有！
b、Router ：前端路由，对一个单页面来说，基本不可或缺
c、Vuex：vue状态管理，对于稍复杂的项目来说很省力
d、eslint：代码规范，可用可不用吧，对于团队来说，最好是使用 
>>> 下一步：是否使用history路由模式，这个大家都懂，在路由文件也可以自己修改，暂时不用 n 
>>> 下一步：css预处理，我自己用第sass，看个人需求
>>> 下一步：eslint，1、只报错；2、Aribnb规范；3、Standar 规范；4、美化；选3没毛病
>>> 下一步：eslint是在保存的时候还是git commit 的时候报错？当然是保存的时候
>>> 下一步：是否生成一个单独的文件：ok
>>> 下一步：是否把这些配置作为未来的预选项目，也就是下次直接可以使用，ok
>>> 下一步：给这些配置起个名：
>>> 下一步：自动安装依赖，等待即可，至此vue-cli3正式搭建完毕

安装vant

 npm i vant -S
自动按需引入组件 (推荐) ： npm i babel-plugin-import -D
babel.config.js文件加入代码

 module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

//main.js按需引入
import { Button } from "vant";
Vue.use(Button);

//组件中使用
<van-button type="danger">危险按钮</van-button>

px转rem

npm install postcss-pxtorem -D   用于将单位转化为 rem
npm i lib-flexible --save    设置 rem 基准值

//main.js
import 'lib-flexible/flexible'

在安装postcss-pxtorem的时候会生成一个文件.postcssrc.js 没有就建一个
module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        'postcss-pxtorem': {
            rootValue: 37.5,  //配置37.5是因为vantui没有转rem，刚好不变形
            propList: ['*']
        }
    }
}
//如果包浏览器错误，就用下面这个
module.exports = {
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        },
        'postcss-pxtorem': {
            rootValue: 37.5, 
            propList: ['*']
        }
    }
}

配置webpack.json

"scripts": {
    "serve": "vue-cli-service serve --open --hot --host 0.0.0.0"
  },
// ./public/index.html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

修改vant默认主题样式

步骤一 引入样式源文件

//babel.config.js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式源文件路径
        style: name => `${name}/style/less`
      },
      'vant'
    ]
  ]
};

步骤二 修改样式变量
vant原始样式： https://github.com/youzan/vant/blob/dev/src/style/var.less

//新建vue.config.js
//方法一：直接在配置中覆盖变量
module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 直接覆盖变量
          "text-color": "yellow",
          "border-color": "green",
          "font-size-sm": "22px",
          "font-size-md": "22px",
          "font-size-lg": "22px"
        }
      }
    }
  }
};

//新建一个样式文件覆盖（绝对路径）
const path = require("path");
module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 更改之后需要重启项目
          hack: `true; @import "${path.resolve(__dirname,"./src/assets/resetvant.less")}"`
        }
      }
    }
  }
};
//新建resetvant.less
@red: yellow;
@blue: yellow;
@orange: yellow;
@orange-dark: yellow;
@orange-light: #fffbe8;
@green: yellow;

步骤三 每次修改样式，需要重启

配置公共样式，less变量和reset样式

配置axios文件

配置vuex

公共组件头部

app.vue里书写底部

页面结构和路由配置，路由拦截

页面里使用less变量，需要全局引入

//新建 vue.config.js
const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 更改之后需要重启项目
          // theme variable: https://github.com/youzan/vant/blob/dev/src/style/var.less
          hack: `true; @import "${path.resolve(
            __dirname,
            "./src/common/css/theme.less"
          )}"`
        }
      }
    }
  }
};