文章主要記錄內(nèi)容：

• Vue CLI3.0環(huán)境搭建過程
• Vue目錄結(jié)構(gòu)及其配置
• component組件注冊和使用
• Vue使用scss
• Vue使用移動端適配方案Flexible、postcss-2rem和vw

一、Vue CLI3.0環(huán)境搭建過程

Vue CLI3.0官網(wǎng)文檔

1、npm install -g @vue/cli，安裝Vue CLI3.0

如果安裝了舊版本，需要使用npm uninstall vue-cli -g卸載舊版本再重裝新版本;
使用vue -V查看版本號，看是否成功安裝；

2、vue create hello-world，創(chuàng)建一個hello-world項目

（1）選擇配置：

default.png

默認選擇"default（babel，eslint)"，構(gòu)建一個基本的Vue項目，Vue-router和Vuex之后需要自己手動安裝；
選擇"Manaully select features"，可按需選擇項目需要的依賴模塊（使用電腦“空格鍵”進行選擇），后續(xù)不需要自己手動安裝；

按需選擇依賴模塊.png

可能遇到無法選擇的問題：詳情請查看

如果你在 Windows 上通過 minTTY 使用 Git Bash，交互提示符并不工作。你必須通過 winpty vue.cmd create hello-world啟動這個命令。不過，如果你仍想使用 vue create hello-world，則可以通過在 ~/.bashrc 文件中添加以下行來為命令添加別名。 alias vue='winpty vue.cmd' 你需要重新啟動 Git Bash 終端會話以使更新后的 bashrc 文件生效。

（2）選擇結(jié)束，回車，選擇路由模式

路由模式選擇.png

路由模式有兩種：history模式和hash模式；
默認是history模式，實際項目也通常采用 history 模式；

（3）選擇css編譯方式

選擇css編譯方式.png

之后的相關(guān)配置項如果不需要，直接回車默認選擇第一個就??啦；

（4）項目創(chuàng)建完成

項目創(chuàng)建完成.png

創(chuàng)建成功.png

（5）項目完成，打包

一般項目開發(fā)完成之后使用npm run build打包項目；
我們在開發(fā)前也可以測試打包，打包成功之后會在項目目錄生成一個dist文件夾；

二、Vue目錄結(jié)構(gòu)及其配置

目錄結(jié)構(gòu)

1、相關(guān)配置放置

Vue Cli3.0 刪除了 config、build 等配置目錄，如果需要進行相關(guān)配置我們需要在根目錄下創(chuàng)建 vue.config.js進行配置。

Vue Cli3.0項目的相關(guān)配置都需要在vue.config.js書寫配置;
vue.config.js官網(wǎng)文檔

vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

三、component組件注冊和使用

在component文件夾下新建Home.vue文件；然后如下步驟：

component組件注冊和使用.png

四、Vue使用scss

1、npm install node-sass --save-dev

2、npm install sass-loader --save-dev

也許你會遇到以下報錯:
test{ ^ Invalid CSS after ".test{": expected "}", was "{" in E:\code\Vue\vue-cli3.0\hello-world\src\components\Home.vue (line 17, column 7)
解決：
<style lang="sass"> ... </style>改成<style lang="scss"> ... </stycle>

如果你想引入外部scss，可在style里使用：
@import "../assets/css/reset.scss";

五、Vue使用移動端適配方案Flexible、postcss-2rem和vw

1、移動端適配方案flexible

（1）npm install lib-flexible --save，安裝flexible
（2）在main.js中引入flexible：
import 'lib-flexible/flexible.js'
（3）刪除index.html的meta標簽（如下）：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
因為 lib-flexible會通過JS動態(tài)改寫<meta>標簽（添加屬性data-dpr、font-size），并根據(jù)設(shè)備的不同動態(tài)改寫,如：

flexible原理.gif

2、px自動編譯rem插件

（1）npm install postcss-px2rem --save，安裝postcss-px2rem
如果不想px轉(zhuǎn)rem,保留原來px（如fontSize一般不轉(zhuǎn)rem）,只需要在后邊加/no/,
font-size: 20px;/*no*/
（2）配置
在vue.config.js中做如下配置：

module.exports = {
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins: [require('postcss-px2rem')({
                    remUnit: 75 //1rem=75px，這里是設(shè)計稿的尺寸是750px
                })]
            }
        }
    },
    publicPath:'./'
}

因為flexible會將設(shè)計稿分成100份,所以每一份a就是7.5，即：
1a = 7.5px
1rem = 75px
所以 remUnit: 75表示設(shè)計稿尺寸為750px;

如果px轉(zhuǎn)成rem表示已經(jīng)安裝成功了：

image.png

3、移動端使用vw適配， 使用px轉(zhuǎn)vw自適應(yīng)插件postcss-px-to-viewport

（1）安裝插件postcss-px-to-viewport：npm i postcss-px-to-viewport
（2）在項目根目錄創(chuàng)建一個 postcss.config.js文件:（移動端px轉(zhuǎn)vw配置）
（注意修改之后記得重啟項目）

module.exports = {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        viewportWidth: 750, //設(shè)計稿尺寸
        exclude: /(\/|\\)(node_modules)(\/|\\)/, //第三方UI組件單位不轉(zhuǎn)vw
      },
    },
  };

開發(fā)的時候直接寫px，插件會自動幫轉(zhuǎn)換成vw,頁面審查元素顯示的是vw。

image.png

image.png

不定期整理筆記小記~