3.0的目录简单了很多，少了build,config两个目录。需要对webpack进行配置的话，要手动在根目录新建一个vue.config.js文件
image.png
// vue.config.js 常⽤配置
module.exports = {
// 基本路径, vue.cli 3.3以前请使用baseUrl
publicPath: '/',
// 输出文件目录
outputDir: 'dist',
// 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
assetsDir: '',
// 生产环境sourceMap
productionSourceMap: true,
// webpack配置
configureWebpack: () => {},
chainWebpack: () => {},
// css相关配置
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
},
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
proxy: {}, // 设置代理
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
vs-code实用插件 Vue VSCode Snippets
快捷键：
- vb - 快速创建模板
一、父子组件传值
-
props / $emit- 子组件中通过定义props接收父组件中通过v-bind绑定的数据
- 父组件中通过监听子组件中
$emit的自定义事件接收数据
-
$parent / children- 子组件中通过
this.$parent这个对象获取父组件中的数据 - 父组件中通过
this.$children这个数组获取子组件中的数据
- 子组件中通过
-
$ref- 父组件中定义子组件中的ref属性后，通过
this.$refs.定义的属性名获取子组件数据
- 父组件中定义子组件中的ref属性后，通过
1.以props / $emit形式父组件向子组件传递值
1.1 在app.vue中注册父组件
image.png
1.2 在parent.vue中只需要
注意：如果只是绑定字符串，可以简写成
msg="from parent msg"
image.png
1.3 在Child.vue中接收
image.png
2.以
props / $emit形式子组件向父组件传递值
2.1 在parent.vue中监听@ShowMsg事件
image.png
2.2在Child.vue中自定义ShowMsg事件
image.png
**3.$parent / children
父组件中：
image.png
**4.
$ref父组件中：
image.png
