一、创建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转换为rem3. 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">
