Vue CLI3.0+移动端适配

文章主要记录内容：

Vue CLI3.0环境搭建过程
Vue目录结构及其配置
component组件注册和使用
Vue使用scss
Vue使用移动端适配方案Flexible、postcss-2rem和vw

一、Vue CLI3.0环境搭建过程

Vue CLI3.0官网文档

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

如果安装了旧版本，需要使用npm uninstall vue-cli -g卸载旧版本再重装新版本;
使用vue -V查看版本号，看是否成功安装；

2、`vue create hello-world`，创建一个hello-world项目

（1）选择配置：

default.png

默认选择"default（babel，eslint)"，构建一个基本的Vue项目，Vue-router和Vuex之后需要自己手动安装；
选择"Manaully select features"，可按需选择项目需要的依赖模块（使用电脑“空格键”进行选择），后续不需要自己手动安装；

按需选择依赖模块.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）选择结束，回车，选择路由模式

路由模式选择.png

路由模式有两种：history模式和hash模式；
默认是history模式，实际项目也通常采用 history 模式；

（3）选择css编译方式

选择css编译方式.png

之后的相关配置项如果不需要，直接回车默认选择第一个就🆗啦；

（4）项目创建完成

项目创建完成.png

根据图示：使用cd hello-world进入项目；
使用npm run serve运行项目；
打开“ http://localhost:8080/”，显示如下页面，表示项目创建成功：

创建成功.png

（5）项目完成，打包

一般项目开发完成之后使用npm run build打包项目；
我们在开发前也可以测试打包，打包成功之后会在项目目录生成一个dist文件夹；

二、Vue目录结构及其配置

目录结构

1、相关配置放置

Vue Cli3.0 删除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建 vue.config.js进行配置。

Vue Cli3.0项目的相关配置都需要在vue.config.js书写配置;
vue.config.js官网文档

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动态改写<meta>标签（添加属性data-dpr、font-size），并根据设备的不同动态改写,如：

flexible原理.gif

2、px自动编译rem插件

（1）npm install postcss-px2rem --save，安装postcss-px2rem
如果不想px转rem,保留原来px（如fontSize一般不转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，这里是设计稿的尺寸是750px
                })]
            }
        }
    },
    publicPath:'./'
}

因为flexible会将设计稿分成100份,所以每一份a就是7.5，即：
1a = 7.5px
1rem = 75px
所以 remUnit: 75表示设计稿尺寸为750px;

如果px转成rem表示已经安装成功了：

image.png

3、移动端使用vw适配，使用px转vw自适应插件postcss-px-to-viewport

（1）安装插件postcss-px-to-viewport：npm i postcss-px-to-viewport
（2）在项目根目录创建一个 postcss.config.js文件:（移动端px转vw配置）
（注意修改之后记得重启项目）

module.exports = {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        viewportWidth: 750, //设计稿尺寸
        exclude: /(\/|\\)(node_modules)(\/|\\)/, //第三方UI组件单位不转vw
      },
    },
  };

开发的时候直接写px，插件会自动帮转换成vw,页面审查元素显示的是vw。