vue-cli2.x结合vant搭建项目vw为单位布局

雨点打透心脏的1/2处 2023-06-08 03:29 2阅读 0赞

## 1.安装vue-cli2.x脚手架 ##

npm intatll -g vue-cli

安装完毕之后 可以检查安装版本即 vue -V

## 2.创建一个项目 ##

vue init webpack YourProjectName

## 3.接下来安装vw布局需要的插件 ##

**我们需要安装7个插件**  
（1）`postcss-px-to-viewport` （2）`postcss-write-svg` （3）`postcss-cssnext`  
（4）`postcss-viewport-units` （5）`cssnano` （6）`postcss-aspect-ratio-mini`

**输入命令：**

cnpm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

**另一个插件是：**

cnpm i cssnano-preset-advanced --save-dev

## 4.安装MD5 ##

cnpm install --save js-md5

## 5.安装axios ##

cnpm install axios --save

## 6.安装less ##

cnpm install less less-loader --save-dev

**接下来找到bulid目录下的webpack.base.conf.js并打开，找到module下的rules写下**

module: {
            rules: [
                {	// 加的这里
                    test: /\.less$/,
                    loader: "style-loader!css-loader!less-loader"
                }
            ]
        },

## 7.安装vue-wechat-title（这是标题，我做微信公众号时候用的） ##

cnpm install --save vue-wechat-title

**如何使用在我的这篇文章中有提示：**  
[链接][Link 1]

https://blog.csdn.net/qq_39024950/article/details/99959210

## 8.安装vuex（如何使用点这里：[vuex使用链接][Link 1]） ##

cnpm install vuex --save

## 9.安装js-cookie ##

cnpm install js-cookie --save

## 10.安装vant ##

cnpm install vant -S

## 11.以下是第3步安装那几个插件后的配置，打开.postcssrc.js文件，直接复制即可: ##

module.exports = {
      "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        // "autoprefixer": {},
        "postcss-aspect-ratio-mini": {},
        "postcss-px-to-viewport": {
          viewportWidth: 750,
          // viewportHeight: 1334,      // 视口高度，根据750设备的宽度来指定，也可以不设置
          unitPrecision: 3,       // 单位精度
          viewportUnit: 'vw',     // 单位名称
          selectorBlackList: ['.ignore', '.hairlines', '.van-', /^(.van)/, /^(.igno)/], // 拥有该类名的元素保留px单位
          minPixeValue: 2,  // 小于或等于1px不转换为视窗单位，也可以设置为想要的值
          mediaQuery: false // 是否允许在媒体查询中转换px
        },
        "postcss-write-svg": {
          utf8: false
        },
        "postcss-cssnext": {},
        "cssnano": {
          preset: "advanced",
          autoprefixer: false,
          "postcss-zindex": false
        },
        "postcss-viewport-units": {}
      }
    }

12.一下是main.js文件的部分配置（根据自己情况来）：

import Vue from 'vue'
    import App from './App'
    import Vuex from 'vuex'
    import Vant from 'vant'
    import axios from 'axios'
    import 'vant/lib/index.css'
    import router from './router'
    import cookie from 'js-cookie'
    import store from "@/vuex/store.js"
    import VueWechatTitle from 'vue-wechat-title'
    
    Vue.use(Vuex)
    Vue.use(Vant)
    Vue.use(VueWechatTitle)
    
    Vue.prototype.$axios = axios  		//（这样写过后可以全局调用this.$axios）
    Vue.prototype.$cookie = cookie		//（这样写过后可以全局调用this.$cookie）
    
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

[Link 1]: https://blog.csdn.net/qq_39024950/article/details/99959210