首先我們開始第一步

vue create 你的項目名字

image.png

default是默認配置，Manually select features是自定義配置
我選擇自定義配置

第二步是項目需要配置的架子，我選擇的是這些

Babel：用于編寫下一代JavaScript的編譯器，必須的吧
TypeScript：JavaScript的一個超集，很火，不會，又多了一項要學的東西?。?！
Progressive Web App (PWA) Support：PWA漸進式wabapp,個人理解類似國內(nèi)微信小程序、快應(yīng)用
Router：路由
Vuex：狀態(tài)管理
CSS Pre-processors：css預處理
Linter/Formatter：代碼風格
Unit Testing：單元測試
E2E Testing：端到端測試

image.png

第三步是使用 類 風格的組件語法

image.png

第四步是 Use Babel alongside TypeScript for auto-detected polyfills?：用Babel與TypeScript一起用于自動檢測polyfills

image.png

第五第六步是
Use history mode for router?：路由使用history模式
Pick a CSS pre-processor：CSS預編譯選擇

第七步是選擇代碼風格控制

image.png

第八步是
Lint on save：保存的時候檢測
Lint and fix on commit (requires Git)：提交的時候檢測，需要Git

第九步是
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?：你更喜歡將Babel、PostCSS、ESLint等配置放到那
In dedicated config files：各自專用的文件
In package.json：放在package.json文件中

最后是Save this as a preset for future projects?：將以上配置保存，以后可以直接用

image.png

接下來是適配vw移動端的，如果不需要可以忽略以下內(nèi)容

//安裝以下內(nèi)容
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

vue cli4.0需要安裝下面兩個

npm install postcss-url

npm install postcss-import

然后在根目錄下新建.postcssrc.js文件,內(nèi)容如下，這樣劇大功告成了！

module.exports = {
    plugins: {
      'postcss-import': {},
      'postcss-url': {},
      'postcss-aspect-ratio-mini': {},
      'postcss-write-svg': {
        utf8: false
      },
      'postcss-cssnext': {},
      'postcss-px-to-viewport': {
        viewportWidth: 750, //  視窗的寬度，對應(yīng)的是我們設(shè)計稿的寬度，移動端一般是750，如果是pc端那就是類似1920這樣的尺寸
        viewportHeight: 1344, // 視窗的高度，移動端一般指定1334，也可以不配置
        unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時候無法整除）
        viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
        selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
        minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
        mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px`
      },
      'postcss-viewport-units': {},
      cssnano: {
        preset: 'default', // 設(shè)置成default將不會啟用autoprefixer
        'postcss-zindex': false
      }
    }
  }

vw適配下ios圖片不顯示在APP.vue加上即可

img{
  content: normal !important
}