一、创建vue3项目

1.使用vue cli创建

vue created 项目名

2.选择自定义方式创建vue3项目
在这里插入图片描述

3.选择项目所需要的依赖项(刚学习vue的同学建议选择安装(Linter / Formatter 支持代码风格检查和格式化)
在这里插入图片描述

对于每一项的功能,做了一个简单的描述:

  • Babel 主要是对es6语法转换成兼容的js (选上)
  • TypeScript 支持使用TypeScript语法来编写代码
  • Progressive Web App (PWA) Support [把网页做的更像原生app]
  • Router 支持vue路由配置插件(选上)
  • Vuex 支持vue程序状态管理模式 (选上)
  • CSS Pre-processors 支持css预处理器 (选上)
  • Linter / Formatter 支持代码风格检查和格式化 (刚开始学习vue的同学建议选上)
  • Unit Testing 单元测试
  • E2E Testing E2E测试

4.选择vue版本,这边是3.x
在这里插入图片描述

5.选择路由模式,是否采用history模式,我这边选择采用该模式
在这里插入图片描述

6.选择什么css预处理器,我这边选择的是Sass/SCSS
在这里插入图片描述

7.将Babel,PostCSS,ESLint这些配置文件放哪,通常我们会选择放到独立位置,让package.json文件干净点,所以选择第一个
在这里插入图片描述

8.询问是否记录这一次的配置,以便下次使用,如一开始的时候会显示的vuecli3配置(这个根据自己的需求选择)
在这里插入图片描述

9.选择安装项目依赖时所使用的包管理工具(我使用的是npm)
在这里插入图片描述

10.这样一个vue3项目就创建成功了
在这里插入图片描述

二、解决vue不同屏幕自适应的问题

1.安装依赖

1. npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小
 2. npm i px2rem-loader -D//自动将px转换为rem
 3. npm i postcss-px2rem//将代码中px自动转化成对应的rem的一个插件

2.这里要和大家说的就是lib-flexible-computer这个npm装的依赖,想必大家为了做pc的适配搜索了很多方法他们大多数都是安装的下面这个依赖

npm i lib-flexible -S

3.在main.js中引入

import "lib-flexible-computer";

4.然后在src同级下建立一个vue.config.js文件(如果有就不需要重复创建了),并在此文件中加入以下代码

 //适配屏幕大小
    css: {
        loaderOptions: {
            postcss: {
                postcssOptions: {
                    plugins: [
                        require('postcss-pxtorem')({ //这里是配置项,详见官方文档
                            rootValue: 100, // 换算的基数
                            selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                            propList: ['*'],
                        }),
                    ]
                }
            }
        }
    }

三、安装amfe-flexible & postcss-pxtorem

1.安装依赖 amfe-flexible:

npm install amfe-flexible --save

2.在 main.js 中导入依赖:

import "amfe-flexible/index"

3.安装依赖 postcss-pxtorem:

npm install postcss-pxtorem --save-dev

4、配置 postcss-pxtorem:
在根目录中的 postcss.config.js (没有新建即可),添加如下代码:

module.exports = {
    "plugins": {
        "postcss-pxtorem": {
            rootValue: 192, // 根据使用的ui组件? 定义根元素大小?
            propList: ['*'], //可以从px更改为rem的属性
            selectorBlackList: ['.norem'], // 过滤掉.norem-开头的class,不进行rem转换
            minPixelValue: 12, ///设置要替换的最小像素值,px小于12的不会被转换
            minPixelValue: 2, // 设置要替换的最小像素值
            exclude: ["node_modules"], //转换的时候排除
            // propBlackList: ['font-size'], //黑名单
        }

    }

}

四、在public文件夹下的index.html中添加meta标签设置缩放比例

在这里插入图片描述

  <meta name="viewport" content="width=device-width,initial-scale=1.0">
GitHub 加速计划 / vu / vue
86
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 4 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐