前端技术VUE 的前世今生从PC 走向移动

2021-11-24 03:34:09

一、Vue的前世

Vue 框架诞生于2014年，他的作者为中国人–尤雨溪(江苏无锡人)。Vue用于构建交互式的Web界面的库，是一个构建数据驱动的Web界面渐进式框架，该框架遵循CMD规范，并且提供的设计模式为MVVM模式。发展至今已经有诸多版本,目前推荐使用比较稳定的2.0版本

二、Vue的今生

什么是Vue?Vue是一套用于构建用户界面的渐进式框架.提到Vue就不得不提前端框架的三驾马车:angular 谷歌公司,react Facebook,Vue 尤雨溪.这三种框架都有不同的特性,如要一教高下的话也只能说是伯仲之间,各有千秋.以我目前的能力我还不能将三种框架的特性聊的十分透彻,在这里只能浅谈一下之所以选择Vue的原因:
首先作为一名中国人,选择Vue存在一些主观因素,我觉得这无可厚非.然后我们来谈谈Vue的诸多有点:1.不存在依赖关系 2.轻便(25 + gzip 72k min) 3.适用范围广 4.学习成本低,语法升级平滑 5.双向数据绑定(所见即所得) 6.语法非常简洁.我强烈建议所有的前端开发者和全栈开发人员进行学习和掌握。

三、PC 端项目的使用

1.# 进入项目目录

cd  你的创建好的VUE 项目

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev


Vant 创建项目

1、在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

前端技术VUE 的前世今生从PC 走向移动

2、在图形化界面中，点击依赖 -> 安装依赖，然后将 vant 添加到依赖中，同时添加其它需要的依赖，如路由，axios等

3、安装相关的插件

前端技术VUE 的前世今生从PC 走向移动

4、引用babel 插件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

（1）# 安装插件 npm i babel-plugin-import -D

（2）在 babel.config.js 中配置

module.exports = { plugins: [ [‘import‘, { libraryName: ‘vant‘, libraryDirectory: ‘es‘, style: true }, ‘vant‘] ] };

（3）接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入形式

import { Button } from ‘vant‘;

5、安装好的项目截图如下：

前端技术VUE 的前世今生从PC 走向移动

6、如图

在VScode中，通过 Ctrl + ~ 组合键打开终端


输入
npm i vant -S
安装vant

前端技术VUE 的前世今生从PC 走向移动

配置babel.config.js文件，完成按需引入组件功能

module.exports = {
    presets: [
        ‘@vue/cli-plugin-babel/preset‘
    ],
    plugins: [
        [‘import‘, {
            libraryName: ‘vant‘,
            libraryDirectory: ‘es‘,
            style: true
        }, ‘vant‘]
    ]
}

引入vant组件测试

首先安装模块插件：

npm i babel-plugin-import -D

ps：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

引入组件方式有两种（推荐使用局部引入）：

方式一：在main.js文件中引入，全局使用

import { Toast,Button } from ‘vant‘
Vue.use(Toast).use(Button)

<van-button type="default">默认按钮</van-button>

此方法引入的Toast组件，使用方式：
this.$toast({        
    message: ‘test info‘,        
    duration: 1000,        
    forbidClick: true    
});

方式二：在页面单独引用，仅作用于此页面

<template>
  <div>
    <van-button type="default">默认按钮</van-button>
  </div>
</template>

<script>
    import { Button } from ‘vant‘;
    import { Popup } from ‘vant‘;
    export default {
        components:{
            Button,
            Popup
        }
    }
</script>

运行项目

npm run serve

成功启动后如下图：

前端技术VUE 的前世今生从PC 走向移动

解决移动端适配问题

安装对应插件

npm i postcss-pxtorem -S
npm i amfe-flexible -S

新建vue.config.js，引入插件，进行相关配置

const autoprefixer = require(‘autoprefixer‘);
const pxtorem = require(‘postcss-pxtorem‘);

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: [
              "Android 4.0",
              "iOS 7",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
            ]
          }),
          pxtorem({
            rootValue: 37.5, /*37.5对应的是375尺寸的图，如果是750尺寸的图则替换成75，以此类推*/
            propList: [‘*‘],
          })
        ]
      }
    }
  },
};

main.js文件中导入amfe-flexible

import ‘amfe-flexible‘

index.html配置移动端meta信息

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no

到此一个pc 版本的项目就改为移动端了如果你想在里面添加任何想创造的组件或者插件自己调整修改就可以了。非常的简单。值得大学学习和掌握。

前端技术VUE 的前世今生从PC 走向移动

码农公寓

一、Vue的前世

二、Vue的今生

相关文章