vue3.0项目搭建，引入vant，去除严格模式eslint，适配转rem

VUE3.0引入vant组件库

  1. npm install -g @vue/cli-service-global
  2. vue --version
  3. vue create hello-world
  4. cd  hello-world
  5. vue add vue-next   //这一步要不要都行 用来升级2.0的
  6. npm i vant@next -S   //引入vant3.0
  7. npm i  babel-plugin-import -D  //安装适配插件 安装完以后会生成一个`babel.config.js文件，我们需要改写这个文件`
  8. npm run serve

一、安装适配插件

安装完以后会生成一个babel.config.js文件，我们需要改写这个文件

npm i  babel-plugin-import -D 

1.1、直接复制以下代码到 babel.config.js

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

1.2、 安装rem所需插件

npm i postcss-plugin-px2rem --save-dev

1.3、安装amfe-flexible：

npm i amfe-flexible -S

1.4、设置vue.config.js

module.exports = {
	// http://oss.hp-iot.cn/terminal/v1
	publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
	// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
	// outputDir: 'dist',
	// pages:{ type:Object,Default:undfind }
	devServer: {
		disableHostCheck: true, // 花生壳显示Invalid Host header让其不检查hostname。
		https: false, // https:{type:Boolean}
		open: false, // 配置自动启动浏览器
		// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
		// port: 80,
		// host: 'wxtest.com',
		proxy: {
			'/api': {
				target: 'http://192.168.0.188:8080/api',
				ws: true,
				changeOrigin: true,
				pathRewrite: {
					'^/api': '/'
				}
			}
		} // 配置多个代理,
	},
	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					require('postcss-plugin-px2rem')({
						rootValue: 75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
						// unitPrecision: 5, //允许REM单位增长到的十进制数字。
						//propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
						// propBlackList: [], //黑名单
						exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
						// selectorBlackList: [], //要忽略并保留为px的选择器
						// ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
						// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
						mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
						minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
					}),
				]
			}
		}
	},
	configureWebpack: {
		performance: {
			hints: 'warning',
			// 入口起点的最大体积 整数类型（以字节为单位）
			maxEntrypointSize: 50000000,
			// 生成文件的最大体积 整数类型（以字节为单位 300k）
			maxAssetSize: 30000000,
			// 只给出 js 文件的性能提示
			assetFilter: function(assetFilename) {
				return assetFilename.endsWith('.js')
			}
		}
	}
}

1.5、 在main.js引入你需要的vatn组件

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vant from 'vant';
import 'amfe-flexible/index.js'
import 'vant/lib/index.css';
createApp(App)
  .use(store)
  .use(router)
  .use(Vant)
  .mount("#app");

1.6、组件挂载

//main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vant from 'vant';
import 'vant/lib/index.css';
createApp(App)
  .use(store)
  .use(router)
  .use(Vant)
  .mount("#app");

1.7、组件使用

<template>
	<h1>test count: {{count}}</h1>
	<button @click="add">add</button>
	<van-button type="primary" size="large" url="/vant/mobile.html">URL 跳转</van-button>
	<van-button size="large" @click="print">print</van-button>
</template>

<script>
	import { ref } from 'vue'
	
	export default {
	  setup() {
	    const count = ref('1212')
	    const add = () => {
	      count.value++
	    }
	    const print = () => {
	      console.log(count.value)
	      console.log(import.meta.env.MODE)
	    }
	    return {
	      count,
	      add,
	      print
	    }
	  }
	}
</script>

二 、去除严格模式

注：vue版本注意

在根目录中，找到.eslintrc.js文件，或者全局搜索文件名

删除或者注释掉extends下面的@vue/standard，随后重新启动项目即可

使用手动创建项目：则需要手动做一些选择，但有时严格模式也会被留下，因此也可在相同的目录中注释掉或者删除掉@vue/prettier，即可去掉严格模式，重新启动项目就可以了。