1、安裝vue-cli3腳手架，不懂的去vue-cli官網(wǎng)

npm install -g @vue/cli

2、通過(guò)vue-cli3創(chuàng)建項(xiàng)目

vue create my-project

創(chuàng)建的過(guò)程有很多選項(xiàng)，我的常用選項(xiàng)：

1.png

簡(jiǎn)單介紹一下:
a、Babel ：轉(zhuǎn)碼工具，有了它就可以開(kāi)心的用es2015以上的代碼，那必須有！
b、Router ：前端路由，對(duì)一個(gè)單頁(yè)面來(lái)說(shuō)，基本不可或缺
c、Vuex：vue狀態(tài)管理，對(duì)于稍復(fù)雜的項(xiàng)目來(lái)說(shuō)很省力
d、eslint：代碼規(guī)范，可用可不用吧，對(duì)于團(tuán)隊(duì)來(lái)說(shuō)，最好是使用

下一步：

2.png

是否使用history路由模式，這個(gè)大家都懂，在路由文件也可以自己修改，暫時(shí)不用 n
下一步：

3.png

css預(yù)處理，我自己用第sass，看個(gè)人需求
下一步：

4.png

eslint，1、只報(bào)錯(cuò)；2、Aribnb規(guī)范；3、Standar 規(guī)范；4、美化；
選3沒(méi)毛病
下一步：

5.png

eslint是在保存的時(shí)候還是git commit 的時(shí)候報(bào)錯(cuò)？當(dāng)然是保存的時(shí)候
下一步：

6.png

是否生成一個(gè)單獨(dú)的文件：ok
下一步：

7.png

是否把這些配置作為未來(lái)的預(yù)選項(xiàng)目，也就是下次直接可以使用，ok
下一步：

8.png

給這些配置起個(gè)名：

下一步：自動(dòng)安裝依賴(lài)，等待即可，至此vue-cli3正式搭建完畢，下面安裝vant UI
3、安裝vant
安裝完cli項(xiàng)目后，一點(diǎn)要cd 進(jìn)入項(xiàng)目目錄，安裝vant

npm install vant -S

4、安裝babel-plugin-import插件（按需加載）

安裝插件

npm i babel-plugin-import -D

然后再babel.config.js文件里：

// 對(duì)于使用 babel7 的用戶(hù)，可以在 babel.config.js 中配置

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

// 接著你可以在代碼中直接引入 Vant 組件
// 插件會(huì)自動(dòng)將代碼轉(zhuǎn)化為方式二中的按需引入形式

// import { Button } from 'vant';

5、vant rem適配，需要安裝兩個(gè)插件

postcss-pxtorem 是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem
lib-flexible 用于設(shè)置 rem 基準(zhǔn)值
postcss-pxtorem：

npm install postcss-pxtorem --save-dev

lib-flexible：

npm i -S amfe-flexible

然后： main.js 引入amfe-flexible

import 'amfe-flexible/index.js'

在postcss.config.js文件內(nèi)(沒(méi)有就在根目錄創(chuàng)建一個(gè))

//修改前：
module.exports = {
  plugins: {
  }
}

//修改后
// module.exports = {
//  plugins: {
//    'autoprefixer': {
//      browsers: ['Android >= 4.0', 'iOS >= 7']
//    },
//    'postcss-pxtorem': {
//      rootValue: 37.5,
//      propList: ['*']
//    }
//  }
//}

// 最新寫(xiě)法

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

6、重啟項(xiàng)目

npm run serve

tip：1、375px 即100%寬度，寫(xiě)px會(huì)自動(dòng)rem處理，如果不想被rem處理，可以使用PX來(lái)寫(xiě)。

留一份vue.config.js 文件

module.exports = {
  // http://oss.hp-iot.cn/terminal/v1
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  // outputDir: 在npm run build時(shí) 生成文件的目錄 type:string, default:'dist'
  // outputDir: 'dist',
  // pages:{ type:Object,Default:undfind }
  // chainWebpack: config => {
  //   // 取消prefetch和preload
  //   config.plugins.delete('preload')
  //   config.plugins.delete('prefetch')
  // },
  devServer: {
    disableHostCheck: true, // 花生殼顯示Invalid Host header讓其不檢查hostname。
    https: false, // https:{type:Boolean}
    open: false, // 配置自動(dòng)啟動(dòng)瀏覽器
    // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個(gè)代理
    // port: 80,
    // host: 'wxtest.com',
    proxy: {
      '/api': {
        target: 'http://192.168.0.222:8080/api',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    } // 配置多個(gè)代理,
  },
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/css/common.scss";
        `
      }
    }
  },
  configureWebpack: {
    performance: {
      hints: 'warning',
      // 入口起點(diǎn)的最大體積 整數(shù)類(lèi)型（以字節(jié)為單位）
      maxEntrypointSize: 50000000,
      // 生成文件的最大體積 整數(shù)類(lèi)型（以字節(jié)為單位 300k）
      maxAssetSize: 30000000,
      // 只給出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js')
      }
    }
  }
}

// 舊
data: @import "~@/assets/scss/variables.scss";
// 新
prependData: @import "~@/assets/scss/variables.scss";

————————————————
版權(quán)聲明：本文為CSDN博主「勝天一子半」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_37942845/java/article/details/90444784