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,即可去掉严格模式,重新启动项目就可以了。