Vue-cli 3.0 搭建一个 TS 多页应用，实现PC 移动端分离适配

废话不多说，开干

首先我们要先安装vue-cli3.0脚手架

npm install --global @vue/cli

下面我们就来构建一个项目：

vue create my-project

自定义项目，然后勾选自己所需要的包，我这边的话使用的是TS + Vue

项目添加完之后，我们开始将我们的单页应用修改为多页引用

在vue.config.js的这个文件，添加如下代码，没有vue.config.js这个文件的同学，需要自己手动新建一个这个文件，文件位置与package.json同级

    pages: {
        app: {
            // 页面入口文件
            entry: 'src/pages/app/main.ts',
            // 页面的模板文件
            template: 'public/app.html',
            // build生成文件的名称
            filename: 'app/index.html',
            title: 'app端',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'app']
        },
        pc: {
            entry: 'src/pages/pc/main.ts',
            template: 'public/pc.html',
            filename: 'pc/index.html',
            title: 'pc端',
            chunks: ['chunk-vendors', 'chunk-common', 'pc']
        }
    },

这里可以看到我们的文件目录是这个样子的，大家可以参考代码看一下对应的文件的目录

注意点：

1.名称要相同

2.路由要跟模块名相同

单页修改为多页到这里就结束了。

下面我们来做移动端的适配

移动端我才用的UI框架的话用的是 Vant youzan.github.io/vant/#/zh-C…，有需要的大家可以自己去看。

首先我们先安装这两个包
npm install lib-flexible --s || yarn add lib-flexible
npm install postcss-pxtorem -s || yarn add postcss-pxtorem

然后在我们需要的做适配处理的入口文件中引入
import 'lib-flexible'

为了避免影响到第三方UI的样式，所以我们安装Vant官方给的例子，新建一个postcss.config.js文件，在该文件中写入
module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

其中的rootValue:37.5 不建议修改。注意，若使用37.5则设计稿也建议使用375为标准的，尝试过使用75的，但是有赞自身组件在真机上还是有点奇怪。

有不明白的小伙伴，可以留言，我会即时回复