基于vue v2.6脚手架less4语言预处理器v7版本的样式插件安装生产环境使用

1.框架搭建 --组件集成、样式集成

使用版本： less v4.1.2 less-loader v7.3.0（less-loader使用7版本编译less4版本）

  样式预处理器：css -> sass -> less -> stylus -> postcss ->sss

  less样式 安装解析、编译库：cnpm i -D less less-loader

vue App组件：vant、antd、vux、mint、iconic

   首先要根据官网：https://vant-contrib.gitee.io/vant/#/zh-CN/

   项目安装使用vant组件：cnpm i -S vant@latest-v2

这是style文件夹下的index.less编写(在其他文件下直接使用时也可以引入文件)

//编写less语法，定义变量和方法的声明
//样式文件里可以引入样式文件的语法
@import  'common.less';


//主容器一定是包含了所有的控制，所以直接固定定位
.app-container{
     position:fixed;
     top:0;
     left:0;
     //使用方法调用
    .container();
  //使用在common文件中定义的变量
    background-color:@cf5;
    z-index:99;
}

//这样编写主体容器，会直接固定整体页面宽高度，
//在颜色选择上可以对整体框架颜色选择固定的匹配，方便统一管理进行修改处理

可以对整体页面的样式进行一个公共模块引用放置commonless文件：

//定义变量 =>常见用在背景颜色，或者主题颜色设置
@cf5:#f0f1f5;

//定义100%容器的方法
.container(){
  width:100%;
  height:100%;
}

在实例入口文件下进行全局通用配置，views文件，router配置，store配置，第三方组件库Vant，

import Vue from 'vue'
import App from './views'

//引入路由模块
import router from './router'

//引入状态管理器的实例模块
import store from './store'

//注入第三方组件库Vant,
import Vant from 'vant'
//主要还是看官网来进行引入，还要引入css样式注意
import 'vant/lib/index.css'
//然后在全局注入使用
Vue.use(Vant)

//样式有个规则，后加载的样式覆盖先加载的样式，所以自定义的样式要最后加载放在后面来进行引入
import './style/index.less'

new Vue({
   //进行路由实例对象注入
  router,
  //状态管理器实例注入 - -全局的变量this.$store
  store,
  render:c=>c(App)
}).$mount('#root')

//这是框架src配置的index.js实例入口的配置，vue全局注入文件使用