1. element
在用vue2想按需导入element组件时官方给的代码是
然后你就会知道不到.babeirc文件在哪。.
babeirc文件用于指定Babel如何转译JavaScript代码。
Babel是一个广泛使用的JavaScript编译器,可以将使用了最新JavaScript特性的代码转译成旧版本的浏览器或环境可以执行的代码,从而不用担心版本兼容的问题。
从babel版本7开始引入babel.config.js配置文件,也就是vue2使用脚手架工具默认生成的,它作用于全局配置,而.babel.js是一个局部的配置,但不常用。
且也需要把es2015的版本预设修改为@babel/preset-env预设,它能目标环境自动调整所需的转换,而"es2015"
预设仅限于转换ES2015的特性。
整体代码应该是这样
module.exports = {
presets: [
/**
* 1. 这是Vue CLI的Babel预设,专门为Vue项目设计。
* 2. 它包含了一些默认的Babel插件和配置,用于将Vue组件中的JavaScript代码转换成兼容所有主流浏览器的形式。
* 3. 这个预设涵盖了Vue特有的语法处理,如单文件组件(.vue文件)的解析
*/
'@vue/cli-plugin-babel/preset',
/**
* 1. 这是Babel的环境预设(preset-env),
* 2. 它允许你使用最新的JavaScript语法,而不用担心浏览器的兼容性问题。
* 3. {"modules": false}选项的设置是为了告诉Babel不要将ES6模块语法(如import和export)转换为其他模块类型(如CommonJS),
* 这通常是为了更好地与webpack这样的模块打包工具配合使用,让打包工具自己处理模块的逻辑
*
*/
["@babel/preset-env",{"modules":false}]
],
/**
* 这个插件配置是用来自动按需引入Element UI组件和它们的样式
*/
plugins:[
[
"component",
{
"libraryName":"element-ui",
"styleLibraryName":"theme-chalk"
}
]
]
}
2. vue插件
vue浏览器插件是可以检测网站是否使用了vue和用于调试vue。是一个很好用的调试工具,可是有些小bug,实在让人心烦。
当你使用vue插件的时候,如果讲data里的数据是以中文开头的,有时候浏览器会识别不了,尽管vue插件是亮起的状态,可是按f12后会发现没有关于vue的扩展。
就像这样
当把前面的中文去掉就可以了
3.未使用脚手架环境的进行vue组件开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{
{msg}}</h1>
<my-component></my-component>
</div>
<script>
const myComponent = Vue.extend({
template: `
<ul>
<li v-for="user of users" :key="user.id">
{
{user.name}}
</li>
</ul>
`,
data () {
return {
users: [
{ id: '001', name: 'lyshang11' },
{ id: '002', name: 'lyshang22' },
{ id: '003', name: 'lyshang33' }
]
}
}
})
const vm = new Vue({
el: '#app',
components:{
myComponent
},
data () {
return {
msg: 'hello',
}
}
})
</script>
</body>
</html>
当我们未使用脚手架环境进行vue组件开发时,在new Vue里的配置项components里注册组件使用驼峰命名,使用组件的时候需要用-来进行使用
例如注册组件使用的是myComponent,使用组件时就要<my-component></my-component>这样来使用。
且在未使用脚手架环境中,自闭和标签只能作用于一次。
4. 使用vant2组件选中没有高亮
当使用van-tabbar-item标签栏时,想要实现跳转,to属性不加 / 虽然也可以,但会丢失高亮显示。
不加 /
加 /