3.0的目錄簡單了很多，少了build,config兩個目錄。需要對webpack進(jìn)行配置的話，要手動在根目錄新建一個vue.config.js文件

image.png

// vue.config.js 常?配置
module.exports = {
// 基本路徑, vue.cli 3.3以前請使用baseUrl
publicPath: '/',
// 輸出文件目錄
outputDir: 'dist',
// 用于嵌套生成的靜態(tài)資產(chǎn)（js，css，img，fonts）的目錄。
assetsDir: '',
// 生產(chǎn)環(huán)境sourceMap
productionSourceMap: true,
// webpack配置
configureWebpack: () => {},
chainWebpack: () => {},
// css相關(guān)配置
css: {
// 啟用 CSS modules
modules: false,
// 是否使用css分離插件
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {},
 },
// webpack-dev-server 相關(guān)配置
devServer: {
host: '0.0.0.0',
port: 8080,
proxy: {}, // 設(shè)置代理
 },
// 第三方插件配置
pluginOptions: {
// ...
 }
}

vs-code實(shí)用插件 Vue VSCode Snippets
快捷鍵：

• vb - 快速創(chuàng)建模板

一、父子組件傳值

• props / $emit
  • 子組件中通過定義props接收父組件中通過v-bind綁定的數(shù)據(jù)
  • 父組件中通過監(jiān)聽子組件中$emit的自定義事件接收數(shù)據(jù)
• $parent / children
  • 子組件中通過this.$parent這個對象獲取父組件中的數(shù)據(jù)
  • 父組件中通過this.$children這個數(shù)組獲取子組件中的數(shù)據(jù)
• $ref
  • 父組件中定義子組件中的ref屬性后，通過this.$refs.定義的屬性名獲取子組件數(shù)據(jù)

1.以props / $emit形式父組件向子組件傳遞值

1.1 在app.vue中注冊父組件

image.png

image.png

image.png

2.1 在parent.vue中監(jiān)聽@ShowMsg事件

image.png

2.2在Child.vue中自定義ShowMsg事件

image.png

**3.$parent / children
父組件中：

image.png

image.png